Dynamic Web Elements in Web Automation
A lot of times when we automate a feature and run it for the first time, it gives us green results as passed cases. However, on the second run, it gives us several failures with the exact same code. And after further analysis, we get to know that web elements we are dealing with are dynamic in nature and It becomes quite challenging to interact with such dynamic elements. Let’s discuss some techniques to handle such web elements while scripting the automation using any automation tool, be it open-source like selenium web driver or commercial like UFT/QTP.
What do we understand by Dynamic Web Element?
The dynamic element is that Web Element whose IDs, and any other attributes like Class Name, Value etc. are not fixed. It changes every time you reload the page. So, you cannot handle that element simply by the exact value of any locator.
For example: Gmail Inbox elements, their class name gets changed on every login.
Dynamic elements are database-driven or session-driven. When you edit an element in a database, it changes a number of areas of the application under test. Dynamic elements are strictly content, with formatting being laid out in the design. Dynamic identifiers are generally used for text-boxes and buttons
If you are automating a dynamic website, the scripts will break as soon as the content changes which will cause your test to fail. Then you have to update your test case each and every time, which is a tiresome task and not a generic solution at all.
We always need to understand the behavior of these elements as the page is reloaded or entered in the new session. Once we understand it, we can devise a strategy to interact with these elements.
Some of the strategies are listed below:
Let’s see dynamic element example with tag as Button which has dynamic ID and Class name,
where ID is getting changed from ‘ID-3465-text1’ to ‘ID-4434-textE2’
and class name gets changed from “ID-Class-text45” to “ID-Class-text73” on every new session.
1. Relative XPath with Starting Text:
Like partial link selector in selenium, we can also use XPath search with starting Text match element. We can apply ‘starts-with’ function to access the element as shown below:
//button[starts-with(@id, ’ID-’)]2. Relative XPath with Following or Preceding Node
The following includes all the nodes that follow the context node. We can apply ‘following’ to specify the following elements in the web element list.
Xpath:
//button [contains(@class, ‘ID-Class’)] /following:: input[contains(@id,’ID-’)]
//input [contains(@id,’ID-’)] /preceding:: button[contains(@class, ‘ID-Class’)]3. Relative XPath with Text Contains
Few dynamic elements contain static values. On the basis of those values, we can use ‘contains’ function to search such elements. For example, in above HTML button class name contains static string ‘Class-12345’. We can use XPath to search for a button element with a class name containing ‘Class’.
Xpath:
//button[contains(@class, ‘Class’)]4. Relative XPath with Multiple Attribute
We can also add more than one condition to search element using XPath. Like button with an ID that contains ‘Random-’ plus class that contains ‘text’.
Xpath:
//button[contains(@id,’Random-’)] [contains(@class, ‘Random-Class-text’)]5. Element with Index
Sometimes there is more than one element present in the DOM with similar attributes and it becomes difficult to search them when they are dynamic in nature. For example, there are 10 buttons on the page and you want to locate 5th button. Then we search elements with ‘button’ tag and navigate to the 5th index of the list of buttons to get that element:
Driver.findElements(By.tag(‘button’))[4]If the hierarchical level doesn’t get change, then this would be one method to trace dynamic element.
6. Absolute XPath Method
Absolute XPath method uses complete path from the Root Element to the particular element. An absolute XPath starts with html and forward slash (/) as shown below. You can use firepath (firebug) to generate Xpaths. They are prone to more regression as a slight modification in DOM makes them incorrect or refer to a different element. Normally it’s not considered as a best practice to use absolute Xpath, However, it solves the Dynamic element problem.
XPath:
/html/body/div[5]/div[4]/div/div/div[6]/div/div[3]/div/button7. Using IWebElement Interface.
One more way to handle dynamic element is to find all elements with Tag name and search required element by contains text value or element attributes. For example, to search button with specific text you can use below code:
IList webElement = BrowserDriver.GetDriver().FindElements(By. TagName(‘button’));IWebElement element1 = webElement.First(element => element.Text == "Random1");element1.Click();
** Note: IWebElement interface is used to interact with both visible and invisible elements present on a page.
Closure words:
These are only a few of the approaches that I have come across and used in different automation projects to handle dynamic and complex element locator scenarios. They might not work in every scenario but will give you some idea on possible ways to deal with these elements.
