Dynamic Web Elements in Web Automation
Dynamic Web Elements in Web Automation
Table of Contents
What is Dynamic Web Element?
The dynamic web element is that Element whose IDs, & any other attributes like Class Name, Value etc. are not fixed on page source. It keeps on changing every time when page reloaded. So, we cannot handle that element simply by the exact value of any locator.
Example: On 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-textE5′ & class name gets changed from ‘ID-Class-text55′ to ‘ID-Class-text75” 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/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 == "Random1");
element1.Click();
Note: IWebElement interface is used to interact with both visible and invisible elements present on a page.
