Cypress https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements和许多其他关于测试 Web 应用程序的帖子建议依赖像这样的数据属性data-cy or data-test-id用于定位元素而不是依赖于id属性。
我的理解是有两个原因：
- 重用组件的现代方式可能会导致拥有多个相同类型的组件，并且可能会导致多个这样的组件
IDs在同一页上 - 但这也应该适用于“data-cy”或“data-test-id”属性。
- When
IDs被束缚于CSS，有一种更频繁地改变它们的趋势，同时data-*属性可能不太容易改变。
有人可以对建议进行更多说明吗？
我正在考虑的另一件事是要求我的开发人员放置data-test*上的属性div将使用组件的标签 - 这样测试属性实际上比组件高一级id属性，即使在使用同一组件的多个实例的情况下也可能派上用场。但我再次不确定为什么id属性div与标签相比，标签很糟糕data-test*属性。
来自 Cypress 官方文档 https://docs.cypress.io/guides/references/best-practices:
反模式：使用容易发生变化的高度脆弱的选择器。
最佳实践：使用 data-* 属性为选择器提供上下文，并将它们与 CSS 或 JS 更改隔离。
您编写的每个测试都将包含元素选择器。为了避免很多麻烦，您应该编写能够适应变化的选择器。
我们经常看到用户在定位其元素时遇到问题，因为：
您的应用程序可能会使用会更改的动态类或 ID
您的选择器会因 CSS 样式或 JS 行为的开发更改而中断
幸运的是，这两个问题都是可以避免的。
不要根据 CSS 属性定位元素，例如：id、class、tag
不要定位可能改变其文本内容的元素
添加 data-* 属性以更轻松地定位元素
关键是 id 和类可以是动态的（也是文本内容），因此您总是希望使用像“data-cy”属性这样的静态选择器。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
