Finding the correct element during test execution can present an interesting challenge. With dynamic content and often many similar elements on a 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 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.
Recorded steps and steps that use Configure Find are more resilient. As your application changes over time, mabl is more likely to continue finding the correct element even if some of the attributes change.
Custom find steps
If you cannot target the correct element using a recorded step or Configure Find, you may create a custom find step using CSS or XPath. Custom find steps do not have the ability to auto-heal.
Never copy the selector from DevTools. Selectors generated by DevTools are very specific and easily fail when minor changes are introduced to the application.
JavaScript
If recorded steps, Configure Find, and custom find all 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 <p>, make it easier to target elements based on their purpose or role in the webpage.