Asserting on hard-to-target elements

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:

1. Create an element assertion: ✔︎ (Assert) > Element. 
2. Press the shift key and use the up/down arrows to scroll through overlapping elements at your mouse position. 
3. 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: 

1. Create an element assertion: ✔︎ (Assert) > Element. 
2. 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:

1. Record a click step on the target element.
2. Click on More actions (…) > Assert on element for the recorded step.
3. Select the type of assertion - visual, HTML, or CSS (browser only)
4. Define the criteria for the assertion in the assertion configuration form.
5. Click OK. The Trainer will add a new assertion step to your test.

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:

1. Add a new custom find step: + (Add step) > Find elements
2. In the custom find view, use CSS or XPath to identify the element in the browser window.
3. For the action, select Make assertion.
4. On the next page, select the type of assertion: visual, HTML, or CSS
5. Define the criteria for the assertion in the assertion configuration form.
6. Click OK. The Trainer will add a new assertion step to your test.

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.