Blog

Strategies to Interact with Dynamic Web elements using Selenium

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, Lets discuss some techniques to handle such web elements while scripting the automation using using any automation tool, be it open-source like selenium webdriver or commercial like UFT/QTP.

What do we understand by Dynamic Web Element?

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 locator.

For ex: Gmail Inbox elements, there 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 on 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 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 include 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 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 ID that contains ‘Navyug’ plus class that contains ‘text’.

Xpath:

//button[contains(@id,’Navyug-’)] [contains(@class, ‘Navyug-Class-text’)]

5. Element with Index

Some times there are more than one elements 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 page and you want to locate 5th button. Then we search elements with ‘button’ tag and navigate to 5th index of list of buttons to get that element:

  Driver.findElements(By.tag(‘button’))[4]

If 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 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/button

7. 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 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.. smile
Ohh sorry, did you check your read time?? wink

By – Vishal Singh, Software QA Lead

adminStrategies to Interact with Dynamic Web elements using Selenium
Share this post

Join the conversation