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
awesome info
Reply