CSSアサーション

CSSアサーションを使用すると、Webアプリケーションの視覚的および様式的な側面が、指定された基準や期待に適合していることを確認できます。CSSアサーションのユースケースには、以下のようなものがあります。

• ページ上の要素が会社のデザインまたはブランドガイドラインに準拠していることを検証する
• 異なるWebブラウザー間でエレメントが同じように表示されることを確認する。
• 非表示であるべきエレメントが実際に非表示になっていることをアサートする。

CSSアサーションの作成

CSS アサーションを追加するには、次の手順を実行します。

1. 要素アサーションを作成する:✔︎(アサート)> 要素
2. ページ上の要素を選択するよう求められたら、マウスを対象の要素の上に移動してクリックしてください。
3. アサーション設定メニューで、CSSタブをクリックします。
4. アサーションの条件を定義します。
5. OKをクリックして、CSSアサーションをテストに追加します。

ピクセルアサーション

ページ上でpx単位で測定された対象をアサートする場合は、以下の考慮事項に留意してください。

• ブラウザによって相対的なサイズの処理方法が若干異なります。高さ、幅、border-topなど、pxで測定されるものは、異なるブラウザで実行すると若干異なる値を返す場合があります。この場合、2つのCSSアサーションを使用することをお勧めします。1つは「より大きい」アサーションタイプを使用し、もう1つは「より小さい」アサーションタイプを使用して、要素の許容範囲を指定します。
• アプリケーションは、ビューポートに応じて要素のサイズを異なる方法で設定する場合があります。高さ、幅、border-top、またはpxで測定されるその他のプロパティに対してアサーションを実行する場合は、アサーションを実行する前にビューポートサイズを設定してください。そうしないと、アサーション中に一貫性のない値が得られる可能性があります。