[英]How to test checkbox toggle with Cypress and @testing-library/cypress ,
I am trying to write to test toggle action of accordion using cypress testing library.我正在尝试使用 cypress 测试库编写测试手风琴的切换动作。 Below is the Markup for accordion, it is being toggled using checkbox hack :
下面是手风琴的标记,它正在使用复选框 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>
and Tests is below :和测试如下:
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")
})
The problem is cy.findByRole({ role: "checkbox" });
问题是
cy.findByRole({ role: "checkbox" });
always returns undefined , how can I fix this or write above test in a right way .总是返回 undefined ,我该如何解决这个问题或以正确的方式编写上面的测试。
Thanks谢谢
Based on the Cypress Testing Library examples , instead of passing the role in an object ( cy.findByRole({ role: "checkbox" })
), you should be passing it as the first argument:基于赛普拉斯测试库示例,您应该将其作为第一个参数传递,而不是在对象中传递角色(
cy.findByRole({ role: "checkbox" })
):
cy.findByRole("checkbox");
Beyond that, as Jonah pointed out, I think your test may be failing because you are trying to assign the return value of cy.findByRole
to a variable.除此之外,正如 Jonah 指出的那样,我认为您的测试可能会失败,因为您试图将
cy.findByRole
的返回值分配给一个变量。 In Cypress, everything is asynchronous, so you need to chain your assertions.在 Cypress 中,一切都是异步的,因此您需要链接断言。 This is explained in more depth in the Cypress documentation .
这在赛普拉斯文档中有更深入的解释。
Here is your test case rewritten with all of the above in mind:这是您的测试用例,并考虑了上述所有内容:
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")
Why are you using cy.findByRole({ role: "checkbox" });
你为什么使用
cy.findByRole({ role: "checkbox" });
if the checkbox has nice id ( id="item1"
)?如果复选框有很好的 id (
id="item1"
)? I would simply use cy.get('#item1')
in order to get the required checkbox.我会简单地使用
cy.get('#item1')
来获取所需的复选框。
In addition, if you want to check the checkbox, the Cypress has method for that .check()
and .uncheck()
for deselecting.此外,如果您想选中复选框,Cypress 具有用于取消选择的
.check()
和.uncheck()
方法。
In summary your code could be:总之,您的代码可能是:
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")
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.