How to Handle Elements with Dynamic Attributes
Modern web applications often generate dynamic attributes for the HTML elements. This is often a significant challenge for test automation tools. Test Studio provides built-in capabilities to ease the automatic recording of elements for such pages and their long-term maintenance.
This article will guide you through the handy features, which can ease you when automating a web application which elements have dynamic attributes.
Record the Scenario
For this tutorial we use a sample application. The task is to click on the button and verify that the text in the paragraph is changed after the click.
We’ve already launched Test Studio’s recorder and recorded the following test steps:
Execute the Test and Explore the Results
Upon execution of this sample test, we expect it to pass successfully. However, it fails to locate the element for step 3., which should click the button on the page. The failure listed in the step failure details is 'Element Not Found'.
Following the troubleshooting steps how to handle an error 'Element Not Found', you find out that the button has dynamic value for its id attribute and it is different each time the page is reloaded.
If executed this test fails and editing the Element in Live reveals the button has dynamic id (it changes each time when the page is reloaded).
Test Studio uses an element identification scheme to auto-generate find expressions for the recorded elements. The default scheme lists the id attribute as a primary filter to be used in a find expression.
For the described scenario, using the id attribute, though, is not reliable and there are few options to find a permanent solution for the failure.
Note
If the majority of elements in the application under test are using dynamic ids, you can change the order of how attributes are used when generating a find expression. The Find Logic tab in the Project Settings allows you to reorder the attributes, and also add custom tags, which corresponds to the specifics of the tested page.
How to Overcome the Trouble with Dynamic Elements?
When the specific page structure allows you to change the order of attributes used for generating the automatic find expressions, you can rely on the recorded elements and continue working on the test project with the modified settings.
But what if you need to handle only a single element on the page, which cannot be located properly. Test Studio provides few possible options:
Edit Element’s Find Expression
Modifying the element’s find expression is usually the most straightforward, fastest and robust approach to overcome the issue with not found elements.
If we get back to the example listed in this article, you can see that the TextContent attribute of the button element is unique for the element and is not changing. So if TextContent is used in the find expression instead of id, the test execution will not fail to locate and click the button.
Locate Element by Image
Test Studio’s approach to record elements is quite enhanced and it records an image along with the automatically generated find expression. The recorded image for an element and its specific settings can be found when an element is opened in Edit mode.
The image is, by default, used as a backup search criteria, if the element find logic fails. In such case the test will be marked as passed and the only evidence that the element was found by using its image, is a warning in the execution log.
Note
If the application under test uses dynamic attributes and there is no set of attributes, which can be used to uniquely identify the elements, you can adjust the primary approach to locate elements for a project to be Search by image.
Use Chained Find Expression
Adjusting chained find expressions is sort of an advanced technique, but it comes quite handy to uniquely identify elements in more complex applications. The general idea is to use a parent element, which can be easily identified and search for the actual element, you are looking for, within the unique parent element.
Using the example test scenario from the beginning of this article and taking a closer look at the DOM Explorer of the page, reveals a possible parent div element, which can be uniquely identified by its id (it also seems to be static).
Under that div element there is only one button and it can be uniquely located by its TagName attribute. The find expression which will represent locating these two elements in chain looks like this:
Note
You can use any of the attributes to locate the parent element, and then the child under that parent element.
You can find a real user scenario how to automate SPA (Single Page Applications) with Test Studio and its ability to build chained find expressions in this blog post.