Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Checking radio buttons in Cypress

I'm very new to Javascript and it's my only second week using Cypress, so I need help in getting radio buttons to be clicked. I'm getting errors from Cypress all the time.

The element that I'm trying to check looks like: <input class="XyzTypeRadio" type="radio" name="zzz_type" value="2">

And what I tried to implement after reading the Cypress documentation (at https://docs.cypress.io/api/commands/check.html#Syntax )was: cy.get('[type="radio"]').first('.XyzTypeRadio').check('value=2') Also tried simply .... .check('2') and ... .check('Xyz')

like image 619
Stacey Avatar asked Oct 16 '22 05:10

Stacey


People also ask

How do I check radio buttons?

You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .

How do you check if a button is enabled in Cypress?

To check if your buttons are disabled in Cypress or not, you can use the should('be. disabled') or should('not. be. enabled') assertions.

How do I check if a radio button is active?

To find the selected radio button, you follow these steps: Select all radio buttons by using a DOM method such as querySelectorAll() method. Get the checked property of the radio button. If the checked property is true , the radio button is checked; otherwise, it is unchecked.

What does check () do in Cypress?

. check() can time out waiting for the element to reach an actionable state . . check() can time out waiting for assertions you've added to pass.


1 Answers

(edited and working answer)

Try this:

cy.get('[type="radio"].XyzTypeRadio').check("2")

Or if you don't care which radio button is checked, you could check the first one:

cy.get('[type="radio"].XyzTypeRadio').first().check()

Takeaways:

  • The first() function does not understand selectors, that's why we need to pass our selector ".XyzTypeRadio" to get().
  • The check() function expects the value or values as its argument, so instead of "value=2" we simply give it "2".
  • The check() function does a bit of selecting, ie the result of everything before calling check("2") is a list of inputs and the check("2") function searches and selects the one whose value is "2".
  • We could use first().check() if we want to check the first radio button, or we could remove first() and check a radio button with a specific value using check("2").
like image 67
sina Avatar answered Oct 18 '22 23:10

sina