Element assertions

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:

1. 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.
2. 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.

3. In the Trainer window, select the type of assertion - HTML or CSS - define the criteria for the assertion in the assertion configuration form.

4. 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, 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 takes 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 assertion configuration form 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.

📘

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.

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.