Checking radio buttons in Cypress

Question

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')

Caresse

Welcome to programming with Javascript :) I am not familiar with Cypress, but I (and other Javascript programmers like me) might be able to help you if you add a link to the documentation for the "check" function! Also, try this: open up the browser's console and see if the browser is reporting any errors (which are usually red) in the console. – Gabrila

How to open the console – Gabrila

Thank you for response! It's not the code written by me and it's written over 10 years ago, so I'm sure it's working. But I'm trying to include it in the acceptance test and getting errors from Cypress. – Caresse

sina, thank you. I got this code from "inspect element", so I know where console is but it didn't help me here. – Caresse

My guess is that the "first" function is not used the way it is described in the docs. Try this cy.get('[type="radio"].XyzTypeRadio').first().check() instead and see what happens. – Gabrila

Yes, it works this way, thank you. But how can I now add the radio with value "2"? First always gets the first element it finds and I have several buttons. Sorry, it's so hard to be stupid.:) – Caresse

Try the one I posted as an answer, let's see if that works. I am passing "2" to the "check" function (following the docs) – Gabrila

I added another one to the answer (removed the "first()" function) – Gabrila

To simplify the tedious process of finding the locator for the elements, I recommend Cypress Studio and Cypress Recorder. Both generate the code when you click on the element. Very useful. – Maura

Answer 1

(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").

Gabrila

Nope, this didn't work, I tried before asking, both with double and single quotation marks. The error Cypress returns is "CypressError: Timed out retrying: Expected to find element: 'undefined', but never found it." – Caresse

Try the second one (without "first()") – Gabrila

Perfect! The cy.get('[type="radio"].XyzTypeRadio').check("2") worked out. You are so kind! – Caresse

Awesome! I edited the answer to only include the working solution and added a few takeaways :) – Gabrila

Great, thank you! Hope someone else finds use of it. And .first function is a working solution too: it's good if you don't want to add any value, it takes the first value and proceeds. – Caresse

Updated! Feel free to "accept" the answer if you want :) – Gabrila

cy.get('[type="radio"]').first().check() worked for me. Thanks – Mckinzie

Answer 2

cy.get('[value="Other"]').first().check()

this worked for me as there are 3 radio buttons each with a value so it was just a matter of selecting the correct value

Akvavit