When creating a browser or mobile test, asserting on page elements ensures that your application is behaving as expected. In the mabl Trainer, you can create element assertions to validate an element’s content or visual appearance, including HTML and CSS properties.
Create an element assertion
To create an element assertion in the mabl Trainer, 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.
- Select a type of element assertion:
- Visual (default) - validate the visible content or quality of an element using a natural language prompt
- HTML - validate an element’s HTML properties or attributes. MDN is a great reference for understanding an element’s HTML.
- CSS - validate an element’s CSS properties
- Define the criteria for the assertion in the assertion configuration form.
- Click OK to save the assertion.
When you create an assertion step, it will immediately run in the mabl Trainer.
Asserting on difficult-to-target elements
If the element you want to assert on is difficult to target, see the article on validating hard-to-target elements for suggestions.
Asserting that an element is not present
If you want to validate the absence of an element, see the article on asserting that an element is not present for more guidance.
Crop the screenshot to element
In addition to standard assertion settings - ignore case and failure options - element assertions also include a crop screenshot to element option.
If you check Crop screenshot to element, mabl will capture a screenshot of the element instead of the full screen during cloud runs. This setting could make it easier to see which element mabl asserted on in detail or do visual comparisons on the asserted element, even if the element moves around the screen.