[Cypress] Use the Most Robust Selector for Cypress Tests
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:
<li data-cy={"todo-item-" + todo.id} className={classnames({ completed: todo.completed, diting: this.state.editing })} ></li>
spec:
cy.get("[data-cy=todo-item-3]") .should("have.text", "Hello world") .should("not.have.class", "completed") .find(".toggle") .should("not.be.checked");