为什么 data-* 属性比普通 ID 属性更适合元素选择？答案

【问题标题】：Why is data-* attributes preferred for element selection over a plain ID attribute?为什么 data-* 属性比普通 ID 属性更适合元素选择？
【发布时间】：2020-03-06 17:21:17
【问题描述】：

Cypress 和许多其他有关测试 Web 应用程序的帖子建议依靠 data-cy 或 data-test-id 之类的数据属性来定位元素，而不是依靠 id 属性。

我的理解是有两个原因：

重新使用组件的现代方式可能导致具有相同类型的多个组件，并且可能导致同一页面上出现多个 IDs - 但这也应该适用于“data-cy”或'data-test-id' 属性。
当IDs 与CSS 绑定时，往往会更频繁地更改它们，而data-* 属性可能不太容易更改。

有人可以详细说明一下推荐吗？

我正在考虑的另一件事是要求我的开发人员将data-test* 属性放在将使用组件的div 标记上——这样测试属性实际上是组件id 属性的上一级和即使在使用同一组件的多个实例的情况下也可能会派上用场。但同样，我不确定为什么与 data-test* 属性相比，div 标记的 id 属性不好。

【问题讨论】：

欢迎来到 SO。请花时间阅读How to Ask 和minimal reproducible example。它将帮助您提出可靠的问题，这些问题有望得到有用的答案。正如您提供的链接所指出的，一些 webapp 框架（尤其是 React）具有动态 id 属性。
@orde 我认为这个问题没有任何问题，除了提供的第一个链接完全回答了它。 Bhavani，您能否详细说明文档中不清楚的地方？
这是一个关于这个主题的好读物：kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
html 元素的 id 属性实际上不应该被使用，因为至少在早些时候有一个要求，id 属性必须是唯一的，因此具有相同类型的多个组件将需要具有不同的 @ 987654341@的带data-属性的就没有这个问题...
我发现这篇文章解决了这个问题：medium.com/agilix/…。我还是要试试，不过好像很有用。

标签： selenium-webdriver cypress angular-e2e

【解决方案1】：

From Cypress official docs:

反模式：使用易碎的选择器。

最佳实践：使用 data-* 属性为选择器提供上下文并将它们与 CSS 或 JS 更改隔离开来。

您编写的每个测试都将包含元素的选择器。为了省去很多麻烦，您应该编写能够适应变化的选择器。

我们经常看到用户在定位他们的元素时遇到问题，因为：

您的应用程序可能使用会发生变化的动态类或 ID 您的选择器从开发更改中中断到 CSS 样式或 JS 行为幸运的是，这两个问题都可以避免。

不要基于 CSS 属性来定位元素，例如：id、class、tag 不要定位可能改变其 textContent 的元素添加 data-* 属性，以便更容易定位元素

关键是 id 和类可以是动态的（也可以是文本内容），因此您总是希望使用像“data-cy”属性这样的静态选择器。

【讨论】：