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

Question

赛普拉斯和许多其他关于测试 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*。

标签： selenium-webdrivercypressangular-e2e

Answer 1

来自赛普拉斯官方文档：

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

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

您编写的每个测试都将包含元素的选择器。为了省去很多麻烦，您应该编写对更改具有弹性的选择器。

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

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

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

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