Handling Dynamic Elements in Selenium WebDriver

Dynamic Elements WebDriver Automation TesterLogic

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 which we need to interact with. It could be ID, Name, CSS Selector, XPath or combination of all these. It is quite straight forward to identify locators for static elements which are clearly defined with static IDs. But in some applications, we come across dynamic elements whose ids/xPaths change every time page reloads. It becomes quite challenging to interact with such dynamic elements.

A common example is listing of products on an E-commerce application. In this example, locators associated with different products can change if page is reloaded after use of sort, filter or add product function. Lets say we want to interact with “Purchase buttons” associated with different Products. These buttons could have IDs in following format.

In this test scenario, we know that element IDs can change on page reload. We can also see that id for each button has a common text “submit-” and a number that increments by value of 1. So, we need to understand our scenario requirements and also understand the behavior of these elements as the page is reloaded. Once we understand it, we can devise a strategy to interact with these elements.

In below, I have listed few common techniques used to handle dynamic elements. They might not work in every scenario, but will give you some idea on possible ways to deal with these elements.

1. Absolute XPath

Xpath Position or Absolute Xpath are most frequently used to resolve the dynamic element issues. Reason is, it does not change with page reloads. However, problem with using Absolute XPath locators is that they are very fragile. They are most prone to breakage in case of change in web page. This could  create a big trouble for us in maintainance, if we start using these frequently, especially in large test suites. Therefore they should only be used as last option. Below is an example of Absolute XPath and XPath Position.

2. Identify Element by starting Text

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

For example, in 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.

3. Identify Element by containing Text

Similarly, in some scenarios where dynamic element is surrounded by a static value, we can use ‘contains’ function. For example we have following element locators…

As we can see ‘usefield’ part of element is static, so we can apply ‘contains’ function to access this element locator as shown below…

4. Identify Element by Index

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

5. Identify Element with reference of 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.

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

6. Identify Element by stable preceding Text

For web elements like text field and text areas we can identify them by using the stable text labels nearby. This approach might not be possible in all scenarios but it does resolve the dynamic element issues where possible. Example of this approach is shown below.

End Note

These are only some of the approaches that I have come across and used in different Selenium WebDriver test automation projects to handle dynamic and complex element locator scenarios. Have you ever faced similar scenarios while automating? How did you handle it? Have you any suggestions for me or for our readers! Please share your thoughts and experiences in comments section.
Arif Masood

  • QA Test

    Hi Arif,

    I read your post and it’s quite useful.

    What if the link text is dynamic
    For Example, <
    0>
    Here 0 is dynamic and can be changed for different users. I’m using data-driven approach using excel to get input. Can you help me create a loctaor for this.
    Thanks

    • If the preceding text is stable or there is any stable element nearby then you can use them to create a locator. Do try Selenium IDE or Selenium Builder by SauceLabs and see what locator they generate for these elements. You may be able to see identify a pattern in those locators. Once you find a pattern you can create your own logic to use that.

  • Mohamed Irfan

    Hi Arif, I need some other solution to find web element..???

    I can able to handle dynamic web elements using xpath but sometimes matching node is only one that I was tested and evaluate manually in firefox browser but that tested web element not able to locate while running the auto test..???

  • varun

    Hi Arif,

    I have a gxt grid in a page where I don’t how many rows will be there in that grid I want to automate that page using selenium ,since I don’t know the how many grid rows are there so i cannot have selenium scripts available for that rows.Please help me how to solve this.

  • aditya dubey

    Hi there, I am new in selenium se driver automation and I am trying to find the count of dynamic created id’s . The id generated on same page is ResOutBound_0 ,ResOutBound_1 ,etc… . Please let me know how can I count ,so I will know number of results

    • Inzmam Ul Haq

      Hi Aditya,

      You can use following approach to count generated dynamic id in page:

      .//*[starts-with(@id, ‘ResOutBound’)]

  • Vignesh S. Kumar

    Easy to Learn.i read your post and quite is easy understand.tThanks for sharing

  • saikrishnap

    Hi Arif.
    I’ve a webelement which changes everytime page loads. Initially the element would be having rel. xpath as //section/div………div/a. some times the xpath changes to //section/div………div. can you please provide an approach to handle these type of elements.

    Thanks,
    Sai

  • Pingback: Selenium dynamic elements solution – Site Title()