HANDLING DYNAMIC WEB ELEMENTS

While automating any web application using any automation tool, be it open-
source like selenium webdriver or commercial like UFT/QTP.

We have to identify locators for elements that we need to interact with. It could
be Name, id, CSS Selector, XPath or combination of all these. It is quite straight
forward to identify locators for static elements that are clearly defined with
static IDs.

But in some of the web applications, we found some dynamic elements and it
becomes quite difficult to identify locators for such dynamic elements.

What is Dynamic element?

Dynamic elements are web elements which have identifiers that are dynamically
generated during run time. Dynamic identifiers could be for any web element of
the page but normally used for buttons, text fields and buttons.

Let us take an example of a button whose ID is in the following format…

// Dynamic Element Locators

<button id="Submit-901" />
<button id="Submit-902" />
<button id="Submit-903" />

In this test scenario, we can observe that the element ID is not static. There is a
number attached with text that auto increments with every user action.

So, we can expect that on every page load there will be a new ID for the
element.
There are multiple approaches that can be used to handle dynamic elements but
there is no definite one. An approach might work in one scenario and might not
work in another scenario. It all depends on the code, and type of locator.

1. Absolute Xpath

Xpath Position or Absolute Xpath are most frequently and commonly used way
to resolve the dynamic element issues. The only problem with using XPath
locators is that they are very much vulnerable to damaged and most prone to
breakage in case of change in a web page.

This factor could get worse exponentially as the test suite size and its
complexity increases. Below is an example of Absolute XPath and XPath
Position

web_element_name=html/body/div[30]/div[2]/div[2]/div/div/div/div[1]/table/
tbody/tr/td[2]/table/tbody/tr/td[1]/table/tbody/tr/td[1]/table/tbody/tr[2]/td[2]/
em/button
//p[6]/label[2]/div/ins

2. Identify Element by starting Text

If the dynamic elements have a definite pattern to them, then we can make
use  of JavaScript functions like “starts-with” or “contains” in our element
locators to separate the dynamic part of the locator from static part.

For example, in the case of dynamic, submit button Id example which we

discussed earlier, we can apply ‘starts-with’ function to access this locator
irrespective of its dynamic part.
XPath: //button[starts-with(@id, 'Submit-')]

3. Identify Element by containing Text

Similarly, in some scenarios where the dynamic element is surrounded by a

static value, we can use ‘contains’ function. For example, we have the following
element locators…

<input class="new-userfield-001">
<input class="old-userfield-002">

As we can see ‘usefield’ part of the element is static, so we can apply ‘contains’
function to access this element locator as shown below…
XPath: //input[contains(@class, 'suggest')].

4. Identify Element by Index

If there are multiple elements present on page with the same locator then we can
use the following Java code in our selenium WebDriver script to interact with
an element of a particular index.

driver.findElements(By.xpath(“//*submit”)).get(0).click();

5. Identify Element with reference to a closest stable

element

We can use the DOM structure to find the closest stable element first and then
this stable element can be used as a reference element to find the required
element.
XPATH: //span1/../following-sibling::div//button1

DOM structure could be found using Firefox extensions like Firebug and
FirePath.
But in complex and multi-layer applications this approach is difficult to use
because of large and complex DOM structures.

6. Identify Element by stable preceding Text

For web elements like text field and areas, we can identify them by using the
stable text labels nearby to them.

This approach might not be feasible in all scenarios but it does resolve the
dynamic element issues where possible. An example of this approach is shown
below.
//label1/following::input