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:
<th> that contains "Contact" (which is 1 in this case)<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.
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.