The jQuery .index() method is useful here
Search for a given element from among the matched elements
cy.contains('table thead th', 'Contact')
.then($th => $th.index())
.then(contactIndex => {
cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
})
This is possible by returning the index
of Cypress’ .each()
command. Assuming that there is a 1:1 correlation between the index position in each row, something like the following should work…
cy.get('th').each(($th, index) => {
if ($th.text() === 'Contact') {
cy.get('tr').eq(index).should('contain', 'Maria Anders');
// Assuming we'd only find one `Contact` header, we can exit the `.each()` once found
return false
}
});
If there isn’t a 1:1 correlation where the th
and the tr
have the same index, you could do something similar to figure out the relation between the index of the th
and the index of the tr
.
Info on returning early from .each()
The title might be confusing, I didn’t know how to put my thoughts into words.
Let me explain that simple example. Given the following table…
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
… I’d like to:
- Get the index position of
<th>
that contains “Contact” (which is 1
in this case)
- Use this index to check if the corresponding cell (
<td>
) contains a specific value – in this case, “Maria Anders”
I have no idea how to approach point 1.
I know that I could use
cy.get('th').eq(1).should('contain', 'Contact')
cy.get('td').eq(1).should('contain', 'Maria Anders')
but in my case, table content is dynamic, and I can not expect that the header I am looking for will be under a specific index. Instead, I would like to find the <th>
index after the title text.