If you can’t target the correct element with a standard element assertions, try one of these other methods for asserting on page elements:
- Use a visual screen assertion
- Scroll through overlapping elements
- Use the enter key for disappearing elements
- Create an assertion from a recorded step
- Add Configure Find
- Use a CSS or Xpath selector
- Use a JavaScript snippet for ephemeral elements
Use a visual screen assertion
If you don’t need to validate a specific element’s HTML or CSS properties, consider using a visual screen assertion instead. Screen assertions validate the entire visible page, which can be useful when the element you want to check is hard to target but clearly visible on the screen.
Scroll through overlapping elements
If the target element is covered by a different overlapping element with a higher z-index, you can use keyboard shortcuts to scroll through until you find the target element:
- Create an element assertion: ✔︎ (Assert) > Element.
- Press the shift key and use the up/down arrows to scroll through overlapping elements at your mouse position.
- When the correct element is highlighted, click to select the element.
Use the enter key for disappearing elements
If you are asserting on an element that disappears when clicked on, you can try using the enter key to select the target element:
- Create an element assertion: ✔︎ (Assert) > Element.
- Instead of clicking on the element, hover over it and press enter.
Create an assertion from a recorded step
Another option is to create an assertion from an existing recorded step that finds the element, such as a click step:
- Record a click step on the target element.
- Click on More actions (…) > Assert on element for the recorded step.
- Select the type of assertion - visual, HTML, or CSS (browser only)
- 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
Add Configure Find
If there are other similar elements on the page, try adding Configure Find to ensure mabl identifies the correct element.
Use a CSS or XPath selector (browser only)
In browser tests, if Configure Find fails to target the correct element, 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:
- Add a new custom find step: + (Add step) > Find elements
- In the custom find view, use CSS or XPath to identify the element in the browser window.
- For the action, select Make assertion.
- On the next page, select the type of assertion: visual, HTML, or CSS
- Define the criteria for the assertion in the assertion configuration form.
- Click OK. The Trainer will add a new assertion step to your test.
For a more general overview on identifying elements in mabl, read our documentation on finding the correct element.
Use a snippet step for ephemeral elements
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.