如何访问 Cypress 的 React 组件

Question

我目前正在开发一个大型项目，该项目使用了许多我无法控制的自定义 React 组件。因此，我无法修改它们，并且对每个不具有我想要的行为的自定义组件发出拉取请求对我来说也是不可行的。

我正在寻求使用 Cypress 与这些组件进行交互。然而，这些自定义组件似乎不支持使用data-*orid属性。这些组件的文本可能会根据用户使用的语言而变化。

我认为您能够在 Cypress 中获取元素的唯一方法是查找分配给它们的类并根据类值进行选择。

Cypress 文档说你永远不应该这样做，因为它可能会改变，而且确实如此。

但是，我一直在尝试寻找替代解决方案，但未能找到任何其他解决方案。

有没有一种好方法可以强制您无法控制的 React 组件的最外层 html 元素采用data-*orid属性，或者可以用于强大的 Cypress 测试的任何其他解决方案？

Answer 1

您可以使用cypress-react-selector轻松访问 React 组件。它使用 React 的内部属性（如组件、道具和状态）来实时识别元素。您不需要在 JSX 中设置任何自定义属性，您可以以更原生于 REACT 的方式查找元素。

• 将库安装为依赖项

npm i -D cypress-react-selector

• 通过添加以下内容更新 Cypress/support/index.js 文件以包含 cypress-react-selector 命令：

npm i -D cypress-react-selector

• 您的测试中的用户反应选择器如下：

import 'cypress-react-selector';

它有更多的功能可以提供。按照自述文件中的说明进行操作。

这是使用 cypress-react-selector 处理 React formik 表单的实例。