Cypress, get index of th element to use it later for it's td element

Question

Hey I have a question regarding Cypress. I have following table:

  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>

I want to get index of 'th' table element to get it's value in 'td'. I have tried it using jquery API but it returns for -1 instead 2: Cypress.$('th:contains('Age')').index()

It doesn't need to be jquery> I just want to be sure that even if 'Age' changes it's position, I will be able to get it's corresponding correct value from 'td'.

Answer 1

Here's how you'd get the index of the column with the 'Age` header:

cy.contains('th', 'Age').invoke('index').then((i) => {
  console.log(i)
})