如何解决 Cypress (cy.type() can only be called on a single element.) 错误？

Question

我有三个输入字段：

      cy.get(':nth-child(1) > .input-module_input__3wsvS').should('be.visible').type(foo)
      cy.get(':nth-child(2) > .input-module_input__3wsvS').should('be.visible').type(bar)
      cy.get(':nth-child(3) > .input-module_input__3wsvS').should('be.visible').type(foo-bar)

如何让我的测试通过？我在反应中使用 css 模块。 ID 标签似乎不起作用，还有其他建议吗？

.first() 可以识别第一个，但我如何处理第二个和第三个输入？

Answer 1

使用 .eq() 可能会给您带来更好的结果

cy.get('.input-module_input__3wsvS').eq(0).should('be.visible').type('foo')
cy.get('.input-module_input__3wsvS').eq(1).should('be.visible').type('bar')

Answer 2

小心使用源自使用 css-modules 的前端网站的“哈希”，因为对基础 css 的任何更改都会更改其值，从而破坏测试。

同样，a selector 越复杂，文档结构更改破坏测试的表面积就越大。

.eq() 是您 select children 按索引（基于 0）的方式，您可以在此处找到文档：

https://docs.cypress.io/api/commands/eq

对于使用 css 模块的项目，我建议使用“开头为”select或

cy.get(`[class^='${cls}']`))

//或者为“partial class”添加如下命令，方便书写

Cypress.Commands.add('pclass', (cls) => cy.get(`[class^='${cls}']`));

您的示例中的用法：

cy.get(`[class^='input-module_input']`).eq(1) // (for second child)
// or (After you've added the command)
cy.pclass("input-module_input").eq(1); // (for second child that mathes)

如何解决 Cypress (cy.type() can only be called on a single element.) 错误？

How to address Cypress (cy.type() can only be called on a single element.) error?

cypress