# 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**
```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**
```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
})
}
})
})
})
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://team-qatechtalks.gitbook.io/cypress-cookbook-edition-2/web-ui-controls/webtable-handling.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.