Finding the correct element in browser tests

Finding the correct element during test execution can present an interesting challenge. With dynamic content and often many similar elements on a web page, it becomes all the more important to ensure that tests encapsulate the intention behind a particular action. This article identifies strategies for targeting the correct element in browser tests.

Creating find steps in mabl

A find step is any step that interacts with an element, such as a click or an element assertion. In order to accurately locate the correct element, mabl needs to know if your web application is in the correct state, why that particular element was selected, and if the context around the element is significant.

mabl provides a range of options for finding elements during the test creation process. When trying to get mabl to interact with the correct element, always try to create steps in this order:

Recorded steps

When you record a step in mabl that interacts with an element, the mabl Trainer collects information about the element’s attributes. When the test is executed, mabl selects the best match based on which combination of attributes matches for each potential candidate and the history of finds for that element and similar elements.

If the element is not part of the HTML of the page, the mabl Trainer cannot interact with it. For example, the mabl Trainer cannot interact with settings on your local browser or machine, such as Chrome DevTools or print dialogs.

Configured find steps

If your recorded find step isn’t targeting the correct element, you can use Configure Find to tell mabl which attributes are the most important. Configure Find helps mabl tailor find strategies based on the intention behind the step. If the target element takes longer to appear, you can set a timeout of up to 15 minutes to define how long mabl should look for the element.

Visual find steps

For click steps that target highly visual elements, such as maps, canvases, and images, you can create click steps that target a specific visual area instead of relying on text-based attributes in the page’s HTML.

Visual find steps use an AI-generated description of the visual area to perform the click action. By default, visual find descriptions are generated in English. Workspace owners may configure them to be generated in a different language on the Workspace page: Settings > Workspace.

See the article on visual training for taps and clicks for more details.

Custom find steps

If you cannot target the correct element using a recorded step, Configure Find, or visual find, you may create a custom find step using CSS or XPath. Custom find steps do not have the ability to auto-heal.

JavaScript

If all other find methods fail to interact with the correct element, you may try interacting with the element using JavaScript as a troubleshooting measure.

Improving element findability

mabl’s find strategy adapts based on the information that we get for the application under test. The more consistent and unique an attribute is, the more helpful it is for element findability. If you are unable to create a successful find step using the options in mabl, ask the developers on your team about making one of the following changes to improve element findability:

Add helpful attributes

Add attributes to the target element that are consistent and easily identifiable, such as ARIA labels, data test IDs, or test IDs.

Add attributes to the ancestor element

If the target element uses dynamically generated values and is difficult to target, try adding attributes to an ancestor element.

Use semantic HTML tags

If your application consists of a lot of nested divs and lacks other helpful attributes, it can be more challenging for mabl to target the correct element. Semantic HTML tags, such as h1 or paragraph tags, make it easier to target elements based on their purpose or role in the webpage.