[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");