Element assertions
How to create and define the criteria of an element assertion
This guide outlines how to create and define the criteria of an element assertion.
Creating an element assertion
You recorded some interactions in your application, and now you're ready to make an assertion! Here's what you can do to create an element assertion:
- 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.
- Click on the element that you want to assert against.
- In the Trainer window, select the type of assertion - HTML or CSS - define the criteria for the assertion in the element assertion menu.
- Click OK to save the assertion.
When you create an assertion step, it will immediately run in the mabl Trainer.
Running assertion steps
All find actions in mabl, including assertions, will automatically wait up to 30 seconds for the targeted element to appear. There is generally no need to add an additional wait step before an assertion, unless the element will take more than 30 seconds to appear in your app or if the element comes into existence without being fully realized. In the latter case, a wait step before the assertion may be necessary since mabl will evaluate as soon as it detects that the target element exists. Find more information about wait steps in mabl at our "Adding wait steps with the mabl trainer" doc.
Defining an element assertion
The element assertion menu is where you define the criteria of your assertion. These are the settings:
Assert against
This setting shows which element has been selected. If it appears that the incorrect element has been selected, click on the mouse icon and re-select the element you wish to assert against.
Attribute/property
All assertion types, excluding "is present" and "is not present" assertions, require you to specify the attribute or property you'd like to assert against, such as "innerText", "value," or "checked." To assert against a CSS property, click the button labeled “CSS” above the field labeled “Attribute/property” and choose a property.
Understanding attributes and properties
If you need more information on what an attribute or property represents, try looking it up in MDN.
Assertion type
Select an option from this dropdown to indicate how mabl should assert against the element. Does the element just need to be present? Does it need to match or contain a specific value? Supported assertion types include the following: equals, does not equal, greater than, less than, greater than or equals, less than or equals, contains, does not contain, starts with, does not start with, ends with, does not end with, present, and is not present.
The "is not present" assertion
This assertion type can be useful for confirming that unique page content does not appear on the page after navigation or to confirm that a delete action removed an item from the page.
By default, the "is not present" assertion will run for 30 seconds or until they find an element that matches.
Compare to
You can choose between Attribute or Variable. If you select Attribute, you can use valid expressions, including mabl variable syntax. See the following screenshot for an example.

Example of an assertion that uses mabl variable syntax
Character limit
Assertions have a character limit of 300. If you are trying to assert on an element that has more than 300 characters, mabl will capture only up to 300 characters.
Optional settings
If desired, you can disable case sensitivity or crop the screenshot to element. You can also configure failure options.

Optional settings
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.
Updated about 2 months ago