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

Question

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

我的理解是有两个原因：

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

有人可以对建议多加说明吗？

我正在考虑的另一件事是要求我的开发人员将data-test*属性放在div会使用组件的标签上 - 这样测试属性实际上比组件id属性高一个级别，即使在多个实例相同的情况下也可能派上用场组件被使用。但同样，我不知道为什么id该属性div相比，当标签是坏的data-test*属性。

Answer 1

来自赛普拉斯官方文档：

反模式：使用容易发生变化的高度脆弱的选择器。

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

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

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

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

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

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