Creating an extension class for web tables

Selenium WebDriver provides the WebElement interface to work with various types of HTML elements. It also provides helper classes to work with the Select element. However, there is no built-in class to support the web tables or the <table> elements. In this recipe, we will implement a helper class for web tables. Using this class, we will retrieve properties and perform some basic operations on a web table element.

Getting ready

Create a new Java class WebTable.java, which we will use to implement support for the table elements.

How to do it...

Let's implement the web table extension code with WebTable.java using the following steps:

  1. Add a constructor for the WebTable class, and for the setter and getter property methods as well. The WebTable constructor will accept the WebElement object, as shown in the following code:
    package com.secookbook.examples.chapter09;
    
    import org.openqa.selenium.NoSuchElementException;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.By;
    
    import java.util.List;
    
    public class WebTable {
    
      private WebElement _webTable;
    
      public WebTable(WebElement webTable) {
        set_webTable(webTable);
      }
    
      public WebElement get_webTable() {
        return _webTable;
      }
    
      public void set_webTable(WebElement _webTable) {
        this._webTable = _webTable;
      }
    }
  2. Now, add methods to retrieve rows and columns from a table, as shown in following code:
    public int getRowCount() {
        List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
        return tableRows.size();
    }
    
    public int getColumnCount() {
      List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
      WebElement headerRow = tableRows.get(0);
    
      List<WebElement> tableCols = headerRow.findElements(By.tagName("td"));
      return tableCols.size();
    }
  3. Add a method getCellData() to retrieve data from a specific cell of the table:
    public String getCellData(int rowIdx, int colIdx) {
      List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
      WebElement currentRow = tableRows.get(rowIdx-1);
      List<WebElement> tableCols = currentRow.findElements(By.tagName("td"));
      WebElement cell = tableCols.get(colIdx-1);
      return cell.getText();
    }
  4. Add a method to retrieve the cell editor element; this is useful while working with editable cells:
    public WebElement getCellEditor(int rowIdx, int colIdx, int editorIdx) throws NoSuchElementException {
      try {
        List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
        WebElement currentRow = tableRows.get(rowIdx-1);
        List<WebElement> tableCols = currentRow.findElements(By.tagName("td"));
        WebElement cell = tableCols.get(colIdx-1);
        WebElement cellEditor = cell.findElements(By.tagName("input")).get(editorIdx);
        return cellEditor;
      } catch (NoSuchElementException e) {
        throw new NoSuchElementException("Failed to get cell editor");
      }
    }
  5. Let's create a test on a shopping cart page using a newly created WebTable class:
    package com.secookbook.examples.chapter09;
    
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.By;
    
    import static org.junit.Assert.*;
    
    import org.junit.After;
    import org.junit.Before;
    import org.junit.Test;
    
    public class WebTableTests {
      WebDriver driver;
    
      @Before
      public void setUp() {
        // Create a new instance of the Firefox driver
        driver = new FirefoxDriver();
        driver.get("http:// cookbook.seleniumacademy.com/Locators.html");
      }
    
      @Test
      public void testWebTableTest() {
        // Get the table element as WebTable instance using CSS Selector
        WebTable table = new WebTable(driver.findElement(By.cssSelector("div.cart-info table")));
    
        // Verify that it has three rows
        assertEquals(3, table.getRowCount());
        // Verify that it has six columns
        assertEquals(5, table.getColumnCount());
        // Verify that specified value exists in second cell of third row
        assertEquals("iPhone", table.getCellData(3, 1));
    
        // Get in cell editor and enter some value
        WebElement cellEdit = table.getCellEditor(3, 3, 0);
        cellEdit.clear();
        cellEdit.sendKeys("2");
      }
    
      @After
      public void tearDown() {
        // Close the browser
        driver.quit();
      }
    }

How it works...

The WebTable class accepts a WebElement object and extends it to provide table-specific properties and operations.

To retrieve the number of rows from a table, we locate the <tr> elements from the _webTable object. We used the tagName() method of the By class and collected all the <tr> elements as a list of WebElement objects. Using the size() method, we can find out how may rows are available in the table element, as shown in the following code:

List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));

Similarly, we inspected a number of <td> elements in the first row of the table (normally the header) to retrieve the number of columns available in the table element, as shown in the following code:

List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
    WebElement headerRow = tableRows.get(0);
List<WebElement> tableCols = headerRow.findElements(By.tagName("td"));

To retrieve data from a specific cell, the getCellData() function accepts row and column number arguments. First, it gets the <tr> element from the list by using the row argument as an index, as shown in the following code:

List<WebElement> tableRows = _webTable.findElements(By.tagName("tr"));
WebElement currentRow = tableRows.get(rowIdx-1);

Then, it retrieves the <td> elements from currentRow using column argument as an index, as shown in following code:

List<WebElement> tableCols = currentRow.findElements(By.tagName("td"));
    WebElement cell = tableCols.get(colIdx-1);

To retrieve the text, it calls the cell object's getText() method, as shown in following code:

  return cell.getText();

Often we need to test tables with editable cells. These could be dynamic tables based on database values. The getCellEditor() method of the WebTable object provides access to the first input element of the cell. We can then use this input element and perform actions such as Click() or SendKeys(). The getCellEditor() method uses a similar method to reach the desired cell and then finds the first input element inside a cell, that is, a <td> element, using the ByTagName locator strategy, as shown in the following code:

WebElement cellEditor = cell.findElements(By.tagName("input")).get(0);
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.14.39.59