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 add a CSS assertion, take the following steps:
- Create an element assertion: ✔︎ (Assert) > Element
- When prompted to select an element on the page, hover your mouse over the target element and click on it.
- In the assertion configuration menu, click on the CSS tab.
- Define the criteria for the assertion.
- Click OK to add the CSS assertion to your test.
“Fail at end” assertions
Because CSS assertions usually validate non-functional aspects of the page, they are great candidates for the “Fail at end of test” option.
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.