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 HTML or CSS properties and even assert on the element by sending an assertion description to a generative AI model.
Depending on the situation, there are several ways to create element assertions:
- Select an element in the assertion menu
- Create an assertion from a recorded step
- Use a CSS or XPath selector
- Use a JavaScript snippet step
Understanding element attributes and properties
If you need help understanding element properties and attributes, MDN is a great reference.
Select an element in the assertion menu
The easiest way to create an element assertion is to select an element in the assertion menu.
After recording some interactions in your application, take the following steps to assert on a specific page element:
- At the bottom of the mabl Trainer window, click on the check mark icon to add an assertion. A prompt to "Click on an element" will appear in the browser window.
- Select the element that you want to assert against. Alternatively, hold the shift key for more options, including quick assert and targeting a different overlapping element.
- In the Trainer window, select the type of assertion - HTML, CSS (browser only), or GenAI.
- 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.
Keep in mind the following when working with these assertion types:
- is not present: there are many ways to assert that an element is not. See the article on asserting that an element is not present for more guidance.
-
matches regex: mabl uses JavaScript regular expression syntax. You can wrap the pattern in forward slashes and add optional flags such as
i
for case-insensitive search andm
for multiline matching. If the forward slashes are omitted, mabl asserts against the provided pattern as if no flags were passed in.
Optional assertion settings
Additional assertion settings include:
- Disable case sensitivity
- Configure failure options
- Crop the screenshot to element
If you check "Crop screenshot to element," during cloud runs, mabl will capture a screenshot of the element instead of the full screen. 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.
Example of an assertion step that is cropped to the element.
Create an assertion from a recorded step
If creating a regular assertion for an element proves to be difficult, another option is to create an assertion from an existing recorded step that finds the element, such as a click step:
- Click on More actions (...) for the recorded step that targets the element you want to assert.
- Select Assert on element from the dropdown.
- Select the type of assertion - HTML, CSS (browser only), or AI.
- Define the criteria for the assertion in the assertion configuration form.
- Click OK. The Trainer will add a new assertion step to your test.
The "Assert on element" option
Use a CSS or XPath selector
If you cannot target the correct element using Configure Find, you can use custom CSS queries or XPath expressions to identify the element you wish to assert against. To create a custom find assertion, take the following steps:
- Click on the plus symbol to add a new step.
- Select Find elements
- In the custom find view, you can use CSS or XPath to identify the element in the browser window.
- For the action, select Make assertion.
- Click Next.
- Select the type of assertion - HTML, CSS (browser only), or GenAI.
- Define the criteria for the assertion in the assertion configuration form.
- Click OK. The Trainer will add a new assertion step to your test.
Try Configure Find first
Before using CSS or XPath, we recommend creating the assertion through the assertion menu and using Configure Find to identify the correct element.
An assertion that uses Configure Find is easier to maintain, and a custom find assertion should only be used in cases where Configure Find does not include the attributes needed to correctly identify the element.
For an overview on identifying elements in mabl, read our documentation on finding the correct element.
Use a snippet step
If you’re asserting on an element that doesn’t persist on the page long enough to execute an assertion step, you can try using a snippet step to assert on the element. Snippet steps are custom steps written in JavaScript.
For example, if you need to assert the presence of a toast message that quickly disappears from the page, a snippet step can help you quickly validate that it’s there.
To assert on an element with a snippet step, you should be familiar with accessing web elements with JavaScript or interacting with mobile elements via Appium. Compared to native assertions, assertions created with snippet steps can require more maintenance and potentially provide less visibility in test output when the step fails.