2

我正在尝试使用 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" });总是返回未定义，我该如何解决这个问题或以正确的方式编写上面的测试。

谢谢

4

2 回答 2

3

根据赛普拉斯测试库示例cy.findByRole({ role: "checkbox" })，您应该将其作为第一个参数传递，而不是在对象 () 中传递角色：

cy.findByRole("checkbox");

除此之外，正如 Jonah 指出的那样，我认为您的测试可能会失败，因为您正试图将返回值分配给cy.findByRole变量。在赛普拉斯，一切都是异步的，所以你需要链接你的断言。这在赛普拉斯文档中有更深入的解释。

这是考虑到上述所有内容而重写的测试用例：

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")
于 2020-11-13T16:07:05.723 回答
1

cy.findByRole({ role: "checkbox" });如果复选框有很好的 id ( ) ，你为什么要使用 id="item1"？我会简单地使用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")
    })
于 2020-09-10T10:07:27.987 回答