How to check children position index in Cypress.js?

Question

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:

1. Get the index position of <th> that contains "Contact" (which is 1 in this case)
2. 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.

Answer 1

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()