Question

我有两个项目的“选择器”组件（如分段控件），当选择时为黄色，当未选择时为灰色。我想测试单击其中一个选项是否将其选中。

该元素是一个样式按钮：

const LeftButton = styled(Button)({
  borderTopLeftRadius: '10px',
  borderBottomLeftRadius: '10px',
  borderRight: 'solid 2px #545454',
});

const RightButton = styled(Button)({
  borderTopRightRadius: '10px',
  borderBottomRightRadius: '10px',
});

        <Group>
          <LeftButton
            data-testid={'OPTION_1'}
            active={option == 1}
            onClick={() => toggleParameter(1)}
          >
            1
          </LeftButton>
          <RightButton
            data-testid={'OPTION_2'}
            active={option === 2}
            onClick={() => toggleParameter(2)}
          >
            2
          </RightButton>
        </Group>

查看呈现的HTML，看来唯一可用的信息是类。例如，这是选择选项1而未选择选项2时的样子：

<div data-testid="OPTION_1" class="css-1z12orh">1</div>
<div data-testid="OPTION_2" class="css-14vfpcp">2</div>

当选择选项2而没有选择选项1时，这些类不会切换，它们实际上会生成新的类，尽管幸运的是，每次生成的类都是相同的gobbledegook。

要在赛普拉斯中断言是否已选中，我必须在此随机类名中断言，对吗？有什么方法可以访问实际组件的道具，以便我可以在props.active上断言吗？

赛普拉斯是否甚至知道反应组件的存在，还是只知道HTML元素？

Answer 1

您可以使用cypress-react-selector

将其另存为开发依赖项：

npm i -D cypress-react-selector

获取道具

您可以从React元素获取React属性并验证属性运行时间。

// set the email in the form
cy.react('MyTextInput', { field: { name: 'email' } }).type(
  'john.doe@cypress.com'
);

// validate the property runtime
cy.getReact('MyTextInput', { field: { name: 'email' } })
  .getProps('fields.value')
  .should('eq', 'john.doe@cypress.com');

// to get all the props, simply do not pass anything in getProps() method
cy.getReact('MyTextInput', { field: { name: 'email' } }).getProps();

获取当前状态

cy.getReact('MyTextInput', { field: { name: 'email' } }).getCurrentState(); // can return string | boolean | any[] | {}

在此处查找更多示例：https://github.com/abhinaba-ghosh/cypress-react-selector/blob/master/cypress/integration/react-selector.spec.js

如何在赛普拉斯中访问组件道具

1 个答案: