CSS assertions

With CSS assertions, you can ensure that visual and stylistic aspects of your web application meet specified standards or expectations. Some use cases for CSS assertions include:

• Validating that elements on the page conform your company's design or brand guidelines
• Ensuring that elements look the same across different web browsers.
• Asserting that an element that should be hidden is indeed hidden.

Creating a CSS assertion

Creating a CSS assertion

To create a CSS assertion, take the following actions:

1. Click on the check mark in the Trainer window to create a new assertion
2. Select the target element for the assertion. Alternatively, hold the shift key for more options, including quick assert and targeting a different overlapping element.
3. In the assertion configuration menu, click on the CSS tab.
4. Define the criteria for the assertion.
5. Click OK to add the CSS assertion to your test.

If you are asserting against anything measured in px on the page, keep in mind the following considerations:

• Different browsers handle relative sizing slightly differently. Anything measured in px , such as height, width, or border-top, may return slightly different values when run across different browsers. In this situation, we suggest using two CSS assertions - one using the “greater than” assertion type and one using the “less than” assertion type - to specify an acceptable range for your elements.
• Your application may size elements differently depending on your viewport. If you want to assert against height, width, border-top, or any other property that is measured in px, set the viewport size before running your assertion. Otherwise you may get inconsistent values during your assertions.