Selenium Best automation Tutorial

Handling Dynamic Elements in Selenium WebDriver

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…

1

2

3

4

// Dynamic Element Locators

<button id="Submit-901" />

<button id="Submit-902" />

<button id="Submit-903" />

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.

1. Absolute XPath

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

1

2

3

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

1

XPath: //button[starts-with(@id, 'Submit-')]

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…

1

2

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

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

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

1

XPath: //input[contains(@class, 'suggest')].

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

1

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

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.

1

XPATH: //span1/../following-sibling::div//button1

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.

1

//label1/following::input

How to Run the Script in the Chrome Browser

1. Create new Java Project

[Name of the project is "FFTesting"

2. Create a new Java class file under the Package

[Give a name of the class is "Runtesting.java"

3. Download ChromeDriver server

First of all, download latest version of ChromeDriver server for webdriver software testing tool. from https://sites.google.com/a/chromium.org/chromedriver/downloads

Download the file and extract in the folder. You get "chromedriver.exe"

4. Next add the selenium server Jar files to the Project. Download Selenium Server

[Right click on the Project Name, Mouse over on Build Path and select 'Configure Build Path', Select Libraries tab, Click on Add External Jars and select the selenium server jar from your local machine]

5. .Write the script in the Java and execute it.

Please find the below example program to open Google in chrome browser

System.setProperty("webdriver.chrome.driver","path of that chromedriver.exe file");

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;

public class Runtesting{
   public static void main(String[] args) {
      System.setProperty("webdriver.chrome.driver","path of that chromedriver.exe file");
      WebDriver driver = new ChromeDriver();
   
      //Launch website
      driver.navigate().to("http://google.com/");
      
      //Maximize the browser
      driver.manage().window().maximize();
      
      //Close the Browser.
      driver.close();
   }
}

How to Run the Script in the Firefox Browser

1. Create new Java Project

[Name of the project is "FFTesting"

2. Create a new Java class file under the Package

[Give a name of the class is "Runtesting.java"

3. Next add the selenium server Jar files to the Project. Download Selenium Server
[Right click on the Project Name, Mouse over on Build Path and select 'Configure Build Path', Select Libraries tab, Click on Add External Jars and select the selenium server jar from your local machine]

4. .Write the script in the Java and execute it.

Please find the below example program to open Google in Firefox browser

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;

public class Runtesting{
   public static void main(String[] args) {
   
      WebDriver driver = new FirefoxDriver();
   
      //Launch website
      driver.navigate().to("http://google.com/");
      
      //Maximize the browser
      driver.manage().window().maximize();
      
      //Close the Browser.
      driver.close();
   }
}