如何使用 Cypress 和 @testing-library/cypress 测试复选框切换，

Question

我正在尝试使用 cypress 测试库编写测试手风琴的切换动作。下面是手风琴的标记，它正在使用复选框 hack 进行切换：

 <div class='accordion'>
                <div class='accordion__item'>
                    <input style="display:none" type="checkbox"  id="item1"/>
                    <label class="accordion__itemLabel"for="item1">FAQ's</label>
                    <div style="display:none" class="accordion__itemContent"> FAQ Content Here </div>
                </div>
                <div class='accordion__item'>
                    <input style="display:none" type="checkbox"  id="item2"/>
                    <label class="accordion__itemLabel"for="item2">Contact us details</label>
                    <div style="display:none" class="accordion__itemContent"> Contact us details here </div>
                </div>
 </div>

测试如下：

    it("should toggle accordion ", () => {
            const checkbox = cy.findByRole({ role: "checkbox" });
            expect(checkbox.checked).equal(false);
            cy.get(".accordion__itemContent").invoke("display").equal("none")
            fireEvent.click(checkbox)
            expect(checkbox.checked).equal(true);
            cy.get(".accordion__itemContent").invoke("display").equal("block")
        })

问题是 cy.findByRole({ role: "checkbox" }); 总是 returns 未定义，我该如何解决这个问题或以正确的方式编写上面的测试。

谢谢

Answer 1

如果复选框有很好的 ID ( id="item1")，为什么要使用 cy.findByRole({ role: "checkbox" });？我会简单地使用 cy.get('#item1') 来获得所需的复选框。

此外，如果你想勾选复选框，赛普拉斯有方法 .check() 和 .uncheck() 取消选择。

总而言之，您的代码可能是：

it("should toggle accordion ", () => {
        cy.get('#item1').should('not.be.checked')
        cy.get(".accordion__itemContent").invoke("display").equal("none")
        cy.get('#item1').check().should('be.checked')
        cy.get(".accordion__itemContent").invoke("display").equal("block")
    })

Answer 2

基于the Cypress Testing Library examples，而不是在对象中传递角色（cy.findByRole({ role: "checkbox" })），您应该将其作为第一个参数传递：

cy.findByRole("checkbox");

除此之外，正如 Jonah 指出的那样，我认为您的测试可能会失败，因为您正试图将 cy.findByRole 的 return 值分配给一个变量。在 Cypress 中，一切都是异步的，因此您需要 chain 您的断言。这在 the Cypress documentation.

中有更深入的解释

这是您重写的测试用例，考虑到以上所有内容：

cy.findByRole("checkbox").should("not.be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("none")
cy.findByRole("checkbox")
  .check()
  .should("be.checked");
cy.get(".accordion__itemContent").invoke("display").equal("block")

如何使用 Cypress 和 @testing-library/cypress 测试复选框切换，

How to test checkbox toggle with Cypress and @testing-library/cypress ,

javascript

cypress

testing-library

cypress-testing-library