Similar to other element types that we have seen in earlier sections, an HTML table is represented as WebElement. However, there are no table-specific methods that are available with the WebElement interface.
While working with tables, we can find the rows and cells effectively by using a set of the By class methods. In this recipe, we will see how to get rows and columns in table.
Let's create a simple test that will print data from a table, as shown in the following code example:
@Test
public void testWebTable() {
WebElement simpleTable = driver.findElement(By.id("items"));
// Get all rows
List<WebElement> rows = simpleTable.findElements(By.tagName("tr"));
assertEquals(3, rows.size());
// Print data from each row
for (WebElement row : rows) {
List<WebElement> cols = row.findElements(By.tagName("td"));
for (WebElement col : cols) {
System.out.print(col.getText() + " ");
}
System.out.println();
}
}A table in HTML is a collection of the <tr> and <td> elements for rows and cells respectively. In the sample test, the table can be found as a WebElement using its ID attribute, as follows:
WebElement simpleTable = driver.findElement(By.id("items"));To get all the rows from a table, the findElements() method is called on simpleTable and the tagName strategy is used to get all <tr> elements as shown in the following way:
List<WebElement> rows = simpleTable.findElements(By.tagName("tr"));Each <tr> element then holds the <td> elements, which are the columns or cells of the table. The test iterates through the rows and columns to print the data in the following way:
//Print data from each row
for (WebElement row : rows) {
List<WebElement> cols = row.findElements(By.tagName("td"));
for (WebElement col : cols) {
System.out.print(col.getText() + " ");
}
System.out.println();
}This method is useful when you have a test that needs to verify data in a table.
We can also use CSS selectors or XPath to find table rows and cells using the index matching technique. In the following example, CSS selector is used to find the first cell of the second row in the table:
WebElement cell = driver.findElement(By.cssSelector("table#items tbody tr:nth-child(2) td"));Similarly, using XPath, it can be done in the following way:
WebElement cell = driver.findElement
(By.xpath("//table[@id='items']/tbody/tr[2]/td"));