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, click on the check mark icon at the bottom of the Trainer menu. When prompted to select an element on the page, hover your mouse over the target element and click on it.

If the element is difficult to target, try one of these alternative methods to target it:

• Shift + up/down arrows: If the target element is covered by a different overlapping element with a higher z-index, press shift and use the up and down arrows to scroll through overlapping elements at your mouse position until it highlights the element you want to assert on.
• Enter: If an element disappears when you select it with a click, try hovering over it and pressing enter instead.

In the assertion configuration menu, click on the CSS tab, and define the criteria for the assertion. Click OK to add the CSS assertion to your test. 

Pixel assertions

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.