CSSアサーション

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

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

CSSアサーションの作成

CSSアサーションの作成

CSSアサーションを作成するには、トレーナーメニュー下部のチェックマークアイコンをクリックします。ページ上の要素を選択するように指示されたら、対象の要素にマウスカーソルを合わせてクリックしてください。

要素をターゲットにしづらい場合は、次のいずれかの方法を試してみてください。

• Shift + 上下矢印キー：ターゲット要素が、より高いz-indexを持つ別の重なった要素によって覆われている場合は、Shiftキーを押しながら上下の矢印キーを使って、マウス位置で重なっている要素をスクロールし、アサーションしたい要素がハイライトされるまで切り替えられます。
• Enter：クリックで要素を選択すると消えてしまう場合は、その要素にカーソルを合わせて Enter キーを押してみてください。

アサーション設定メニューでCSSタブをクリックし、アサーションの条件を定義します。OKをクリックすると、CSSアサーションがテストに追加されます。 

ピクセルアサーション

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

• 相対サイズの処理はブラウザーによって若干異なります。px単位で測定された対象 (高さ、幅、上の枠線など) は、異なるブラウザーで実行すると、返される値が若干異なります。このような場合は、「より大きい」と「より小さい」のアサーションタイプをそれぞれ使用する、2つのCSSアサーションを使用して、エレメントの許容範囲を指定することを推奨します。
• アプリケーションによっては、ビューポートごとに異なる方法でエレメントのサイズが設定される可能性があります。高さ、幅、上の枠線、またはpx単位で測定されるその他のプロパティをアサートする場合は、アサーションを実行する前にビューポートのサイズを設定してください。この設定を行わないと、アサーション時に一貫性のある値が得られない可能性があります。