Handle Dynamic Html Tables Use Selenium WebDriver

The Html table is widely used on web pages. This article will show you examples of how to access an Html table use selenium webdriver in your automation test script.

Table of Contents

1. Example Overview.

Generally, web designers will not give id or name value to a table. So we had better use XPath to access them.

There are two tables in the below example, a big table which contains a small table.

Below is the above Html table web page source code.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Insert title here</title>
  </head>
  <body>
    <table style="width:100%" border="1">
      <tbody>
        <tr>
          <td> i</td>
          <td> love </td>
          <td> java </td>
        </tr>
        <tr>
          <td style="background-color:red;color:yellow"> selenium </td>
          <td colspan=2>
              <table border=1 width=80%>
                  <tr>
                      <td> webdriver </td>
                      <td style="background-color:green;color:yellow"> testing </td>
                  </tr>
              </table>
          </td>
        </tr>
        <tr>
          <td> TestNG </td>
          <td> Junit </td>
          <td> Eclipse </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

2. Example 1: Read the text “Selenium” in the red cell using XPath.

Because the text “selenium” is located in outer table line 2 and cell 1. So we can use the XPath //table/tbody/tr[2]/td[1] to locate it.

Please note // means find after Html tag in every dom tree level. / means find after Html tag in current dom tree level. So //table/tbody/tr[2]/td[1] will find /tbody/tr[2]/td[1] under both the outer and inner tables. You can read the article Selenium XPath Css Selector Example for more XPath examples.
Because the cell that contains the text “selenium” has a unique attribute style="background-color:red;color:yellow", so we can also locate it with//td[@style="background-color:red;color:yellow"].
Because the text “selenium” is unique, so we can also use //td[contains(text(),"selenium")].

Run below selenium webdriver java code to get the cell text.

public void getCellText()
{
	WebDriver ffDriver = new FirefoxDriver();
	ffDriver.get("file://C:/WorkSpace/dev2qa.com/Code/src/com/dev2qa/webdriver/tablelinks/tableLinksExample.html");
	
	//String cellXPath = "//table/tbody/tr[2]/td[1]";
	
	//String cellXPath = "//td[@style=\"background-color:red;color:yellow\"]";
	
        String cellXPath = "//td[contains(text(),\"selenium\")]";

	By cellByXPath = By.xpath(cellXPath);
		
	WebElement cellElement = ffDriver.findElement(cellByXPath);
		
	String text = cellElement.getText();
		
	System.out.println(text);
		
	ffDriver.close();
}

3. Example 2: Get row and column count for the outer table.

Use //table[@style="width:100%"]/tbody/tr to get all row web element list in the outer table. Please note we use the outer table’s style attribute to identify it.
Loop in the row web element list, for each row, use XPath ./td to get the current row’s cell web element list. Please note the dot in XPath, one dot means find td in current web element( current tr ), two dot means find in parent web element.

Run below selenium webdriver java code to see the result.

public void getRowColumnCount()
{
	WebDriver ffDriver = new FirefoxDriver();
	ffDriver.get("file://C:/WorkSpace/dev2qa.com/Code/src/com/dev2qa/webdriver/tablelinks/tableLinksExample.html");
		
	// Used to find the tr list.
	String rowXPath = "//table[@style=\"width:100%\"]/tbody/tr";
		
	By rowByXPath = By.xpath(rowXPath);
		
	List<WebElement> rowList = ffDriver.findElements(rowByXPath);
		
	int rowCount = rowList.size();
		
	System.out.println("There are " + rowCount + " rows in outer.");
		
	int rowNumber = 1;
	for(WebElement rowElement : rowList)
	{
		/* For each tr, use below xpath to find the td in it. 
		 * Please note the dot in it, one dot means current web element, tow dot means parent web element.*/
		String columnXPath = "./td";
		By columnByXPath = By.xpath(columnXPath);
			
		List<WebElement> columnList = rowElement.findElements(columnByXPath);
			
		int columnCount = columnList.size();
			
		System.out.println("There are " + columnCount + " columns in row " + rowNumber);
			
		rowNumber++;
	}
		
	ffDriver.close();
}

Output.

There are 3 rows in outer table.
There are 3 columns in row 1
There are 2 columns in row 2
There are 3 columns in row 3

4. Example 3: Get text “testing” in the inner nested table.

Text “testing” is located in inner table row one column two, so we can use below xpath //table//table/tbody/tr[1]/td[2] to get it. Please note even the source html code do not have tbody html tag for the nested inner table, but some web browser like Chrome, Firefox will add it automatically. So we had better use Chrome inspector or Firefox firebug to get the xpath exactly, then modify it as we need. You can read article How To Find Web Element Using Web Browser Inspector.

Nested inner table has unique attribute width=80%, so we can use //table[@width="80%"]//td[2].
The target cell contains unique text “testing”, so we can use//td[contains(text(),"testing")] also.
The target cell has unique attribute style="background-color:green;color:yellow", so below xpath is also effective. //td[@style="background-color:green;color:yellow"].

Below is the selenium webdriver java code for this example.

public void getNestedTableCellText()
{
	WebDriver ffDriver = new FirefoxDriver();
	ffDriver.get("file://C:/WorkSpace/dev2qa.com/Code/src/com/dev2qa/webdriver/tablelinks/tableLinksExample.html");
		
	//String nestedCellXPath = "//table//table/tbody/tr[1]/td[2]";
		
	//String nestedCellXPath = "//table[@width=\"80%\"]//td[2]";
		
	// String nestedCellXPath = "//td[contains(text(),\"testing\")]";
		
	String nestedCellXPath = "//td[@style=\"background-color:green;color:yellow\"]";
		
	By nestedCellByXPath = By.xpath(nestedCellXPath);
		
	WebElement cellElement = ffDriver.findElement(nestedCellByXPath);
		
	String text = cellElement.getText();
		
	System.out.println(text);
		
	ffDriver.close();
}

1. Example Overview.

2. Example 1: Read the text “Selenium” in the red cell using XPath.

3. Example 2: Get row and column count for the outer table.

4. Example 3: Get text “testing” in the inner nested table.

Leave a Comment Cancel Reply