Handle Dynamic Html Tables Use Selenium WebDriver

Html table is widely used in web page. This article will show you examples about how to access html table use selenium webdriver in your automation test script.

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

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

read table use selenium webdriver example

html code for use selenium read table example

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

  1. Because the text “selenium” is located in outer table line two and cell one. So we can use below xpath to locate it. //table/tbody/tr[2]/td[1]. 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 article Selenium XPath Css Selector Example for more xpath examples.
  2. Because the cell that contain the text “selenium” has unique attribute style="background-color:red;color:yellow", so we can also locate it with//td[@style="background-color:red;color:yellow"]
  3. Because the text “selenium” is unique, so we can also use //td[contains(text(),"selenium")]
  4. 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();
    	}

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

  1. Use //table[@style="width:100%"]/tbody/tr to get all row web element list in outer table. Please note we use outer table’s style attribute to identify it.
  2. Loop in the row web element list, for each row, use xpath ./td to get 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.
  3. 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();
    	}
  4. Output
    get table row and column count output
READ :   Selenium WebDriver - Handle Keyboard And Mouse Events

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

  1. 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.
  2. Nested inner table has unique attribute width=80%, so we can use //table[@width="80%"]//td[2].
  3. The target cell contains unique text “testing”, so we can use//td[contains(text(),"testing")] also.
  4. 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"].
  5. 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();
    	}

Download “AccessingHtmlTablesUseSeleniumWebDriver.zip” AccessingHtmlTablesUseSeleniumWebDriver.zip – Downloaded 48 times – 2 KB

(Visited 1,810 times, 4 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.