The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency. – Bill Gates
Target Audience: Software Developers, Automation Engineers.
Read Time ~ 7 Mins 34 Secs. (don’t trust me? Try it)
A lot of times when we automate a feature and run it for the first time, it gives us Green result, However, on the second run, it gives us the Red results. 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. So, 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 ID’s, actually not only ID’s it can be any attribute 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 locator.
For ex: 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.
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 ‘Navyug-3465-text1’ to ‘Navyug-4434-textE2’
and class name gets changed from “Navyug-Class-text45” to “Navyug-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, ’Navyug-’)]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, ‘Navyug-Class’)] /following:: input[contains(@id,’Navyug-’)]
//input [contains(@id,’Navyug-’)] /preceding:: button[contains(@class, ‘Navyug-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 ‘Navyug-12345’. We can use XPath to search for a button element with a class name containing ‘Navyug’.
Xpath:
//button[contains(@class, ‘Navyug’)]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 ‘Navyug’ plus class that contains ‘text’.
Xpath:
//button[contains(@id,’Navyug-’)] [contains(@class, ‘Navyug-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 == "Navyug");
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.
If you have ever encountered similar scenarios and handled it. Please share your experience in form of comments.
Thanks for your time. 
Ohh sorry, did you check your read time?? 