Reading a HTML Web Table

There are times when we need to access elements (usually texts) that are within HTML tables. However, it is very seldom for a web designer to provide an id or name attribute to a certain cell in the table. Therefore, we cannot use the usual methods such as "By.id()", "By.name()", or "By.cssSelector()". In this case, the most reliable option is to access them using the "By.xpath()" method.

How to write XPath for Table

In this we will be accessing 6th Row 2nd cell to get text “Learn JMETER from Scratch - (Performance + Load) Testing Tool”

Set the parent Element(Table)

XPath locators in WebDriver always start with a double forward slash "//" and then followed by the parent element. Since we are dealing with tables, the parent element should always be the <table> tag. The first portion of our XPath locator should, therefore, start with "//table".

Add the child elements

The element immediately under <table> is <tbody> so we can say that <tbody> is the "child" of <table>. And also, <table> is the "parent" of <tbody>. All child elements in XPath are placed to the right of their parent element, separated with one forward slash "/" like the code shown below.

//table/tbody

Add Predicates

The <tbody> element contains 12 <tr> tags. We can now say that these 12 <tr> tags are "children" of <tbody>. Consequently, we can say that <tbody> is the parent of the <tr> elements.

Another thing we can conclude is that the two <tr> elements are siblings. Siblings refer to child elements having the same parent.

To get to the <td> we wish to access (the one with the text "sixth cell"), we must first access the sixth <tr> and not the first. If we simply write "//table/tbody/tr", then we will be accessing the first <tr> tag.

//table/tbody/tr[6]

Add the succeeding Child Elements using the appropriate Predicates.

The next element we need to access is the second <td>. Applying the principles we have learned from steps 2 and 3, we will finalize our XPath code to be like the one shown below.

//table/tbody/tr[6]/td[2]

Now that we have the correct XPath locator, we can already access the cell that we wanted to and obtain its inner text using the code below.

package tests;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class TableSelenium {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        //code to maximize chrome browser
        driver.manage().window().maximize();

        String baseURL = "https://www.rahulshettyacademy.com/AutomationPractice/";
        driver.get(baseURL);

        //Code to navigate to inner text of table.
        String innerText = driver.findElement(By.xpath("//table/tbody/tr[6]/td[2]")).getText();
        System.out.println(innerText);
       
        //code to close driver
        driver.close();
    }
}

Accessing Nested Tables

The same principles discussed above applies to nested tables. Nested tables are tables located within another table.

For this we will create HTML page and try to under stand this nested tables concept.

NestedTable.html

Kindly double click on above NestedTable.html link and it will open new browser using which we can understand nested table.

To access the cell with the text "QA" using the "//parent/child" and predicate concepts from the previous section, we should be able to come up with the XPath code below.

//table/tbody/tr[1]/td[2]/table/tbody/tr[2]/td

package tests;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class NestedTable {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        //code to maximize chrome browser
        driver.manage().window().maximize();

        String baseURL = "location//HTML//file//saved";
        driver.get(baseURL);

        //Code to navigate to inner text of table.
        String nestedTableText = driver.findElement(By.xpath("//table/tbody/tr[1]/td[2]/table/tbody/tr[2]/td")).getText();
        System.out.println(nestedTableText);

        //code to close driver
        driver.close();
    }
}

Using Attribute as predicates 

If the element is written deep within the HTML code such that the number to use for the predicate is very difficult to determine, we can use that element's unique attribute instead.

AttributePredicate.html

We will create HTML page to understand this scenario, double click on above HTML file to access the website for this scenario.

In this we are going to use Attribute as predicates and access “India” in the table.

In this case, we can use the table's unique attribute (width="200") as the predicate. Attributes are used as predicates by prefixing them with the @ symbol. In the example above, the "India" cell is in the third table first row.

Remember that when we put the XPath code in Java, we should use the escape character backward slash "\" for the double quotation marks on both sides of "270" so that the string argument of By.xpath() will not be terminated prematurely.

package tests;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class AttributeAsPredicates {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        //code to maximize chrome browser
        driver.manage().window().maximize();

        String baseURL = "file:///C:/Users/vikra/Desktop/AttributePredicate.html";
        driver.get(baseURL);

        //code to access table content using Attribute as predicate.
        String innerText = driver.findElement(By.xpath("//table[@width=\"200\"]/tbody/tr[1]/td")).getText();
        System.out.println(innerText);

        //Code to close driver.
        driver.close();
    }
}

Summary

  • By.xpath() is commonly used to access table elements.
  • If the element is written deep within the HTML code such that the number to use for the predicate is very difficult to determine, we can use that element's unique attribute instead.
  • Attributes are used as predicates by prefixing them with the @ symbol.
  • Use Inspect Element for Accessing Tables in Selenium

Tags


You may also like

API Basics and Architecture

API Basics and Architecture
Leave a Reply

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}