WebTable Handling:

Getting the table header cell elements

To get access to the table header cells, this is used as a CSS.

cy.get("th")    //selects the table header elements

Accessing the Rows and Column elements

To get access to the row and column elements, tr and td (or) tr td is used as a CSS.

hello.js

cy.get("tr")        //selects the row elements
cy.get("td")        //selects the columns elements
cy.get("tr td")     //selects the columns elements

Accessing the Specific web table elements with assertions

With the help of the :nth-child concept in css, we can identify all the values of a particular column.

cy.visit("https://www.seleniumeasy.com/test/table-search-filter-demo.html")
cy.get("tr td:nth-child(2)")     //Gets the 2nd child in td column
  .eq(1)                         //Yields second matching css element 
  .contains("sometext")
  .should('be.visible')

Accessing the web table elements with text

.each() the method is used to iterate the elements in an array. Here we are iterating through the second column elements such that it matches the given text.

Example: Let's consider this table

cy.visit("https://www.seleniumeasy.com/test/table-search-filter-demo.html")
cy.get("tr td:nth-child(2)")
  .each(($e1, index, $list) => {      //iterating through the array of elements
    const text = $e1.text();         //storing the iterated element in the text
    if (text.includes("Wireframes")) {     //If the text found,iteration stops
       cy.get("td:nth-child(2)")          //gets the CSS of the second column
         .eq(index)                      //grabs the content in the index value
         .then(function (Taskcolumn) {
         const Tasktext = Taskcolumn.text();
         expect(Tasktext).to.equal("Wireframes");  //assertion to verify text
	    // Do something with this specific element...
   })
  }
})

Accessing the Siblings web table elements with elements found

Retrieving a value from a table cell appearing in the next or previous column of the same row. In Cypress, we have the command .next() & .prev() to move to the immediate following or preceding sibling in DOM respectively. Note: The .next() & .prev() command works only if it is chained with the cy.get() command.

Example: .next() command

cy.visit("https://www.seleniumeasy.com/test/table-search-filter-demo.html")
cy.get("tr td:nth-child(2)")
  .each(($e1, index, $list) => {        //iterating through the array of elements
   const text = $e1.text();            //storing the iterated element in the text
   if (text.includes("Wireframes")) {   //If the text found, iteration stops
    cy.get('tr td:nth-child(2)')
      .eq(index)                          //grabs the content in the index value
      .next()                    //using the next() to capture the sibling element
      .then(function (Assigneecolumn) {
        const Assigneetext = Assigneecolumn.text();
        expect(Assigneetext).to.contains('John Smith');    //verify the text
         // Do something with this specific element...
              })
            }
        })
    })
})

Example: .prev() command

cy.visit("https://www.seleniumeasy.com/test/table-search-filter-demo.html")
cy.get("tr td:nth-child(2)")
  .each(($e1, index, $list) => {        //iterating through the array of elements
   const text = $e1.text();            //storing the iterated element in the text
   if (text.includes("Wireframes")) {   //If the text found, iteration stops
    cy.get('tr:nth-child(2) td:nth-child(3)')
      .eq(index)                          //grabs the content in the index value
      .prev()                    //using the next() to capture the sibling element
      .then(function (Assigneecolumn) {
        const Assigneetext = Assigneecolumn.text();
        expect(Assigneetext).to.contains('Landing Page');    //verify the text
              })
            }
        })
    })
})