Which selectors your choose for your tests matter, a lot. In this lesson, we'll see the recommended Cypress best practices for selectors, and why we should prefer the data-cy attribute.

 

If you know that for React, the best pratice for testing is also adding:

data-test-id={`todo-item-${todo.id}`}

 

For Cypress:

 

spec:

cy.get("[data-cy=todo-item-3]")      .should("have.text", "Hello world")      .should("not.have.class", "completed")      .find(".toggle")      .should("not.be.checked");