Handling Dynamic Elements in Selenium WebDriver

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 and it becomes quite challenging to identify locators for such dynamic elements.
  • Dynamic elements are those elements which have identifiers that are dynamically generated. Dynamic identifiers are normally used for buttons, text-fields and buttons. Let us take an example of a button whose ID is in following format…
  • In this test scenario, we can observe that element ID is not static. There is a number combined with text that auto increments on user action. So, we can expect that on every script execution there will be a new ID for the element.
  • There are multiple approaches which 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. It all depends on the code, element type, locator and test script requirements.

  • Xpath Position or Absolute Xpath are most frequently used to resolve the dynamic element issues. Only problem with using XPath locators is that they are very fragile. They are most prone to breakage in case of change in web page. This factor could get worse exponentially as the test suite size and complexity increases. Below is an example of Absolute XPath and XPath Position

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

  • 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…

  • 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 of particular index.

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

  • 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.li>