gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 08:56:19 24 4
gpt4 key购买 nike

我正在尝试使用 Cypress 测试库编写测试 Accordion 的切换操作。下面是 Accordion 的标记,它是使用复选框 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"}); 总是返回 undefined ,我该如何解决这个问题或以正确的方式编写上面的测试。

谢谢

最佳答案

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

cy.findByRole("checkbox");

除此之外,正如 Jonah 指出的那样,我认为您的测试可能会失败,因为您试图将 cy.findByRole 的返回值分配给变量。在 Cypress 中,一切都是异步的,因此您需要链接您的断言。 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")

关于javascript - 如何使用 Cypress 和 @testing-library/cypress 测试复选框切换,,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63815574/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com