CSSアサーション

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

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

CSSアサーションの作成

CSSアサーションの作成

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

1. Trainerウィンドウでチェックマークをクリックして、新しいアサーションを作成します。
2. アサートするターゲットエレメントを選択します。また、Shiftキーを押しながら操作すると、クイックアサートや重なり合っているエレメントをターゲットにするなどのオプションが利用できます。
3. アサーション設定メニューで、[CSS] タブをクリックします。
4. アサーションの条件を定義します。
5. [OK] をクリックして、CSSアサーションをテストに追加します。

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

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