我应该要求开发人员为我需要测试的 React 网页添加数据标签吗？

如何解决我应该要求开发人员为我需要测试的 React 网页添加数据标签吗？

我正在 Cypress 中编写自动化脚本来测试我们的一个 Web 应用程序。据我所知，大多数元素在 HTML 中只有 class 属性，这些属性是由 React 根据渲染顺序随机分配的。

这是一个示例图片：

由于大多数领域除了 CSS 之外没有其他领域，我不得不依赖 XPath，这使得它非常麻烦并且使测试变得不稳定。此外，我喜欢 Cypress 中的选择器游乐场，它本身不适用于 XPath。

以下是我的一些问题：

1. 对于大多数 Cypress 位置，我是否应该只使用 XPath？
2. 我是否应该要求开发人员添加 data-test 或 data-cy 标签，以便可以非常轻松地识别和使用定位器？
3. 由于我打算在生产中使用它，因此保留数据标签是否存在重大安全风险？

解决方法

Cypress 推荐用于测试标识的特殊属性，从编写测试的角度来看是最简单的，但也有缺点

• 有多少地方需要放置 data-cy？
• 你知道他们应该去哪里吗，还是随着测试的进行你会一直要求更多
• 是否担心生产包的大小
• 是否担心源代码混乱

不一定要用xpath，Cypress有大量的Traversal命令，总结在这里Examples of traversing DOM elements in Cypress

例如兄弟姐妹()、父母()、下一个()、查找()、过滤器()

可能一个好的开始是在组件的逻辑“顶部”元素（例如标题、菜单）添加 data-cy 属性，并使用遍历命令在其中工作。