How to handle web table in cypress

Handling web tables is one of the most common Cypress interview question. In this article, I am going to explain how to handle web tables in Cypress with practical examples.

A web table is an HTML element used to organize and display data in rows and columns. It is commonly created using the following HTML tags:

<table> – Defines the table.
<tr> – Defines a table row.
<th> – Defines a header cell.
<td> – Defines a standard data cell.

Let’s look at an example of HTML code for a web table and learn how to interact with its rows and columns using Cypress.

<table id="customLinks" border="2" width="80%">
    <thead>
        <tr>
            <th><b>Header1</b></th>
            <th><b>Header2</b></th>
            <th><b>Header3</b></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="https://www.google.com">Google</a></td>
            <td><a href="https://www.amazon.com">Amazon</a></td>
            <td><a href="https://www.facebook.com">Facebook</a></td>
        </tr>
           <tr>
            <td><a href="https://www.yahoo.com">Yahoo</a></td>
            <td><a href="https://www.tata.com">Tata</a></td>
            <td><a href="https://www.netflix.com">netflix</a></td>
        </tr>
    </tbody>
</table>

The following demo page can be used to practice handling web tables in Cypress. It displays the HTML web table shown above, which we will use to demonstrate how to identify table rows and columns, retrieve cell values, and validate data through Cypress automation scripts.

Read data from Web Table

In the following automation script, we will learn how to validate the text “Amazon” in the second row and second cell of a web table using Cypress.

First, we navigate to the website using cy.visit("/"). The base URL is configured in the cypress.config.js file, so we do not need to specify the complete URL in the test script.

Next, we initialize two variables: rowCount with 0 to count the table rows and validateStr with "Amazon" to store the expected text.

We use cy.get("table#customLinks tr") to identify all the rows in the table and iterate through them using the .each() command. The $elem parameter represents the current row as a jQuery element.

Inside the loop, we increment rowCount using rowCount++ and initialize cellCount to 0. Since the first row contains header cells represented by th tags, we use the condition if (rowCount == 2) to identify the second row.

Once the second row is identified, we use cy.wrap($elem).find("td") to locate its data cells. We then iterate through these cells and increment cellCount to identify the second cell using if (cellCount == 2).

Finally, we retrieve the text from the second cell using cy.wrap($elemCell).invoke('text'). The .then() callback receives the extracted text, and text.trim() removes any leading or trailing whitespace. We use expect(text.trim()).to.eq(validateStr) to verify that the actual text exactly matches the expected value, "Amazon".

If the text matches, the assertion passes; otherwise, the test fails.

This approach demonstrates how to navigate a web table, identify a specific row and cell, retrieve its text, and validate the expected value using Cypress.

Cypress automation script for handling web table

describe(‘Verify WebTable’, () => {
it(‘Verify Text amazon from Web Table’, () => {
 cy.visit("/");
  let rowCount = 0;
  let validateStr = "Amazon";
  cy.get("table#customLinks tr").each(($elem) =>{
    rowCount++;
    let cellCount = 0;

    if(rowCount == 2){
      cy.wrap($elem).find("td").each(($elemCell) =>{
       cellCount++;
       if(cellCount == 2){
          cy.wrap($elemCell).invoke('text').then((text)=>{
            expect(text.trim()).to.eq(validateStr);
            cy.log(text);
          });
       }
      })
    }
  });
});
});

Watch YouTube video here: How to Handle Web Tables in Cypress | Cypress Automation Testing Tutorial

Cypress automation script for handling web table

Related posts: