javascript - How to test checkbox toggle with Cypress and @testing-librarycypress , - Stack Overflow

admin管理员组

文章数量:1025465

I am trying to write to test toggle action of accordion using cypress testing library. Below is the Markup for accordion, it is being toggled using checkbox 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" }); always returns undefined , how can I fix this or write above test in a right way .

Thanks

I am trying to write to test toggle action of accordion using cypress testing library. Below is the Markup for accordion, it is being toggled using checkbox 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" }); always returns undefined , how can I fix this or write above test in a right way .

Thanks

• javascript
• cypress
• testing-library
• cypress-testing-library

Share Follow edited Nov 14, 2021 at 17:22 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Sep 9, 2020 at 16:13 BhupendraBhupendra 1,2861919 silver badges4545 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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("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. In Cypress, everything is asynchronous, so you need to chain your assertions. 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" }); if the checkbox has nice id ( id="item1")? I would simply use cy.get('#item1') in order to get the required checkbox.

In addition, if you want to check the checkbox, the Cypress has method for that .check() and .uncheck() for deselecting.

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")
    })

I am trying to write to test toggle action of accordion using cypress testing library. Below is the Markup for accordion, it is being toggled using checkbox 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" }); always returns undefined , how can I fix this or write above test in a right way .

Thanks

I am trying to write to test toggle action of accordion using cypress testing library. Below is the Markup for accordion, it is being toggled using checkbox 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" }); always returns undefined , how can I fix this or write above test in a right way .

Thanks

• javascript
• cypress
• testing-library
• cypress-testing-library

Share Follow edited Nov 14, 2021 at 17:22 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Sep 9, 2020 at 16:13 BhupendraBhupendra 1,2861919 silver badges4545 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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("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. In Cypress, everything is asynchronous, so you need to chain your assertions. 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" }); if the checkbox has nice id ( id="item1")? I would simply use cy.get('#item1') in order to get the required checkbox.

In addition, if you want to check the checkbox, the Cypress has method for that .check() and .uncheck() for deselecting.

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")
    })

本文标签： javascriptHow to test checkbox toggle with Cypress and testinglibrarycypress Stack Overflow