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

Question

Cypress以及许多其他关于测试 Web 应用程序的帖子都建议依赖像 data-cy 这样的数据属性。或 data-test-id用于定位元素而不是依赖 id属性。
我的理解是有两个原因:

重新使用组件的现代方式可能导致具有多个相同类型的组件，并且可能导致多个组件 IDs在同一页面上 - 但这也应该适用于 'data-cy' 或 'data-test-id' 属性。

当IDs与 CSS 相关联, 而 data-* 则倾向于更频繁地更改它们属性可能不太容易改变。

有人可以对建议多加说明吗？
我正在考虑的另一件事是要求我的开发人员放置 data-test* div 上的属性会消耗组件的标签 - 这样测试属性实际上比组件高一级 id属性，即使在使用同一组件的多个实例的情况下也可能派上用场。但同样，我不知道为什么 id该属性 div与 data-test* 相比，标签很糟糕属性。

Answer 1

From Cypress official docs :
反模式:使用易变的高度脆弱的选择器。
最佳实践:使用 data-* 属性为选择器提供上下文，并将它们与 CSS 或 JS 更改隔离开来。
您编写的每个测试都将包含元素的选择器。为了省去很多麻烦，您应该编写能够适应变化的选择器。
我们经常看到用户在定位他们的元素时遇到问题，因为:
您的应用程序可能会使用更改的动态类或 ID
您的选择器从 CSS 样式或 JS 行为的开发更改中解脱出来
幸运的是，可以避免这两个问题。
不要基于 CSS 属性定位元素，例如:id、class、tag
不要定位可能改变其 textContent 的元素
添加 data-* 属性以更轻松地定位元素
关键是 id 和类可以是动态的(也可以是文本内容)，因此您总是希望使用静态的选择器，如“data-cy”属性。