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} />
任何避免这种痛苦的解决方法?
我们使用data-test-target
属性,并在JSX中手动写入。在简单版本中,这就是您所需要的。但是,如果您有复杂的情况,例如同一页面上的两个表单具有相同的字段,则需要区分它们。这样我们就可以做到: