Cypress - Web Tables

---

Cypress is capable of handling the web tables. A table is basically of two types, which are dynamic and static. A static table has a fixed number of columns and rows unlike a dynamic table.

In an html code, a table is represented by table tagname, while rows are represented by tr, and columns by td.

• To access the rows, the Cypress command is as follows −

 cy.get("tr")

• To access the columns, the Cypress command is as follows −

 cy.get("td") or cy.get("tr td")

• To access a particular column, the CSS expression should be as follows −

td:nth-child(column number)

• To iterate through the rows/columns of the table, the Cypress command each is used.

In Cypress, we have the command next to shift to the immediate following sibling element. This command has to be chained with get command. The command prev is used to shift to the immediate preceding sibling element.

The Html structure of a table is given below −

Example

Let us take an example of a table, and verify the content of the second column TYPE (Open Source) corresponding to the value Selenium, which is in the first column AUTOMATION TOOL.

The following screen will appear on your computer −

Implementation

Given below is the implementation of the Cypress commands related to tables −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      //URL launch
      cy.visit("https://sqengineer.com/practice-sites/practice-tables-selenium/")
      // identify first column
      cy.get('#table1> tbody > tr > td:nth-child(1)').each(($elm, index, $list)=> {
         // text captured from column1
         const t = $elm.text();
         // matching criteria
         if (t.includes('Selenium')){
            // next sibling captured
            cy.get('#table1 > tbody > tr > td:nth-child(1)')
            .eq(index).next().then(function(d) {
               // text of following sibling
               const r = d.text()
               //assertion
               expect(r).to.contains('Commercial');
            })
         }
      })
   });
});

Execution Results

The output is as follows −

The execution logs show that the value in the column TYPE is captured as Open Source.This happens as it is the immediate following sibling to the element Selenium (first column)which appears in the same row.