在开发e2e测试时，为什么选择data- *属性而不是使用纯id属性来进行元素选择

Question

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

我的理解是，有两个原因：

1. 现代的组件重用方式可能导致具有多个相同类型的组件，并且可能导致同一页面中的多个ID出现-但这也应适用于'data-cy'或'data-测试ID的属性
2. 将ID与CSS绑定在一起时，往往会更频繁地更改它们，而data- *属性可能不太容易更改

有人可以进一步介绍一下建议吗？

我正在考虑的另一件事是要求我的开发人员将“ data-test *”属性放置在会消耗该组件的div标签上-这样，test属性实际上比该组件的id属性高了一个级别，并且可能即使在使用同一组件的多个实例的情况下也很方便。但是同样，我不确定在比较data-test *属性时为什么那个div标签的id属性不好。