[Cypress] Use the Most Robust Selector for Cypress Tests

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/11042815.html

文章标签：

#javascript #ViewUI

博客介绍了测试中选择器的重要性，讲解了Cypress选择器的推荐最佳实践，以及为何应优先使用data - cy属性，还提及React测试的最佳实践。

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

转载于:https://www.cnblogs.com/Answer1215/p/11042815.html