# 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.**

{% code title="hello.js" %}

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

{% endcode %}

### **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.**

```javascript
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**

![](https://lh3.googleusercontent.com/_T8SToGqh3PPDx0kbIGegsLIlhi34Cy4LHp8nnp_6dW7X7KvtFjCj_s05BSiEYGJyBXpwFB-MvGWE599eAbiQfAR7J3ndEY9c6Zd1DGQ5kRDBpUMMW4hDdBYSOIPOyGYaJHHV2zf=s0)

```bash
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**

```bash
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**<br>

```bash
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
              })
            }
        })
    })
})

```