javascript - 如何访问 Cypress 的 React 组件

Question

我目前正在开发一个大型项目，该项目使用了许多我无法控制的自定义 React 组件。因此，我无法修改它们，而且我无法为每个不具有我想要的行为的自定义组件发出拉取请求。
我正在寻求使用 Cypress 与这些组件进行交互。但是，这些自定义组件似乎不支持使用 data-*或 id Prop 。这些组件的文本可能会根据用户使用的语言而改变。
我认为您能够在 Cypress 中获取元素的唯一方法是查找分配给它们的类并根据类值进行选择。
Cypress 文档说你永远不应该这样做，因为它可能会改变，而且确实如此。
但是，我一直在尝试寻找替代解决方案，但未能找到任何其他解决方案。
是否有一种好方法可以强制您无法控制的 react 组件的最外层 html 元素采用 data-*或 id属性，或任何其他可用于稳健 Cypress 测试的解决方案？

Answer 1

您可以使用 cypress-react-selector 轻松访问 React 组件.它使用 react 的内部属性，如组件、 Prop 和状态来实时识别元素。你不需要在你的 JSX 中设置任何自定义属性，你可以以一种更适合 REACT 的方式找到元素。

将库安装为依赖项

npm i -D cypress-react-selector

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

import 'cypress-react-selector';

测试中的用户 react 选择器，例如:

describe('It should validate cypress react selector', () => {
  before(() => {
    cy.visit('https://ahfarmer.github.io/calculator/');
    cy.waitForReact();
  });

  it('it should validate react selection with wildcard', () => {
    cy.react('*', { name: '9' }).should('have.text', '9');
  });

  it('it should validate react chaining', () => {
    cy.react('t', { name: '5' }).react('button').should('have.text', '5');
  });

});

它提供了更多的功能。按照自述文件中的说明进行操作。
这是一个 live example使用 cypress-react-selector 处理 react formik 形式。