将样式组件或自定义组件与cypress一起使用

Question

Cypress选择器很简单，只需执行cy.get('.myComp')，就会选择<input className="myComp" />，但使用样式组件

也许我们需要使用cy-data，cy-testid等自定义属性。我想除了用这些自定义属性充斥我们的​​组件，没有别的捷径了吗？

使用cypress的另一个麻烦是，当您使用css模块时，该类在每个版本中都以不同的方式生成，并且假设您的组件是，那么您需要将自定义属性一直向下传递

<Custom cy-data="btn1" />

const Custom = ({cy-data}) => <button cy-data={cy-data} />

任何避免这种痛苦的解决方法？

Answer 1

我们使用data-test-target属性，并在JSX中手动写入。在简单版本中，这就是您所需要的。但是，如果您有复杂的情况，例如同一页面上的两个表单具有相同的字段，则需要区分它们。这样我们就可以做到：