.eq() vs :nth-child(), which one to choose?

[bunnyxt]

Hello guys, I'm writing tests for checking the item inside a list and find .eq() and :nth-child() both works, see example.

// component definition
function MessageWithStatus({ message, status, 'data-test': dataTest }) {
  return (
    <div data-test={dataTest}>
      <span data-test="message-text">{message}</span>
      {
        status === 'success' && <span data-test="success-indicator">Success!</span>
      }
    </div>
  )
}

// page rendering
const items = [
  { id: 1, message: 'first message', status: 'pending' },
  { id: 2, message: 'second message', status: 'success' },
]
<div>
{items.map(item => (
  <MessageWithStatus
    data-test="message-with-status"
    key={item.id}
    message={item.message}
    status={item.status}
  />
))}
</div>

// test using .eq()
cy.get('[data-test="message-with-status"]').should('have.length', 2)
cy.get('[data-test="message-with-status"]').eq(0).find('[data-test="message-text"]').should('have.text', 'first message')
cy.get('[data-test="message-with-status"]').eq(0).find('[data-test="success-indicator"]').should('not.exist')
cy.get('[data-test="message-with-status"]').eq(1).find('[data-test="message-text"]').should('have.text', 'second message')
cy.get('[data-test="message-with-status"]').eq(1).find('[data-test="success-indicator"]').should('be.visible')

// test using :nth-child()
cy.get('[data-test="message-with-status"]').should('have.length', 2)
cy.get('[data-test="message-with-status"]:nth-child(1) [data-test="message-text"]').should('have.text', 'first message')
cy.get('[data-test="message-with-status"]:nth-child(1) [data-test="success-indicator"]').should('not.exist')
cy.get('[data-test="message-with-status"]:nth-child(2) [data-test="message-text"]').should('have.text', 'second message')
cy.get('[data-test="message-with-status"]:nth-child(2) [data-test="success-indicator"]').should('be.visible')

Which one should I choose?

My assumption (please correct me if I'm wrong, thanks):

1. .eq() is more straightforward but chained with .find() will be less efficient.
2. :nth-child() is less readable but faster.