Question

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

我正在寻求使用赛普拉斯与这些组件进行交互。但是，这些自定义组件似乎不支持使用data-*或id道具。这些组件的文本可能会根据用户使用的语言而变化。

我看到您能够在赛普拉斯中获取元素的唯一方法是找到分配给它们的类别，然后根据类别值进行选择。

Cypress文档说您永远都不要这样做，因为它很可能会改变，而且确实如此。

但是，我一直在尝试寻找替代解决方案，但是却找不到其他解决方案。

是否有一种很好的方法来强制您无法控制的react组件的最外层html元素采用data-*或id属性，或者可以使用的任何其他解决方案进行可靠的赛普拉斯测试？

Answer 1

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

将库安装为依赖项

npm i -D cypress-react-selector

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

import 'cypress-react-selector';

您的测试中的用户反应选择器，例如：

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组件

1 个答案: