How to check the Radio Button in Cypress. The regular check() is not working

Question

I bumped into a problem with Cypress. I just couldn't check the radio button.

I have 7 questions with Yes or No radio buttons. By default, all buttons are checked to "NO". I need to check the "YES" options, it will send an API call to the backend and continue to do magic.

The html code for YES looks like this:

<input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">

The html code for NO looks like this:

<input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">

By default the NO radio button has property: checked: true , the YES radio button has property: checked: false

This is my tries:

cy.get('[class="sc-fzoJMP"]')
      .find('.list-group-item')
      .then((item) => {
        cy.wrap(item)
          .eq(0)
          .should('contain', 'Is this opportunity?')
          .find('input[type="radio"]')
          .then((radioButtons) => {
            cy.wrap(radioButtons).eq(0).check({ force: true }).should('be.checked');
          });

I used different locators, tried ('[type="radio"]'), (':radio'), ('#options[0]radiovalue-true') I used different check methods: cy.get(':radio').click({force: true}) , cy.get(':radio').check('true', {force: true}) and tried to move code with checking radio buttons out of the loop but this is something else. It doesn't check the radio button but can verify that it's not checked. I found one solution to use invoke property:

cy.wrap(radioButtons).eq(0).invoke('prop', 'checked', true).should('be.checked');
cy.wrap(radioButtons).eq(1).invoke('prop', 'checked', false).should('not.be.checked');

But it's checking "YES" radio button but it's not unchecking "NO" radio button and it doesn't send API call to the backend as supposed to do.

This is full HTML code for YES and NO radio buttons:

<div class="d-flex ">
   <div class="mr-4" style="position: relative;">
      <div class="form-check">
         <input type="radio" id="options[0]radiovalue-true" class="form-control is-action-field form-check-input" value="true" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
         <label for="options[0]radiovalue-true" class="ml-0 form-check__radio form-check-label">
            <svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
               <title>Select Option</title>
               <circle cx="12" cy="12" r="9" stroke="#666666" stroke-width="2" fill="white"></circle>
            </svg>
            <p class="sc-fznyAO hdDwJr ml-1 typography-body  ">Yes</p>
         </label>
      </div>
   </div>
   <div class="mr-4" style="position: relative;">
      <div class="form-check">
         <input type="radio" id="options[0]radiovalue-false" class="form-control is-action-field form-check-input" value="false" checked="" style="opacity: 0; cursor: pointer; height: 0px; width: 0px;">
         <label for="options[0]radiovalue-false" class="ml-0 form-check__radio form-check-label">
            <svg viewBox="0 0 24 24" style="height: 20px; min-height: 20px; width: 20px; min-width: 20px; opacity: 1;">
               <title>Selected Option</title>
               <circle cx="12" cy="12" r="9" stroke="var(--dcp-color-primary)" stroke-width="2" fill="none"></circle>
               <circle cx="12" cy="12" r="5" fill="var(--dcp-color-primary)"></circle>
            </svg>
            <p class="sc-fznyAO hdDwJr ml-1 typography-body  ">No</p>
         </label>
      </div>
      <div class="action-field-wrapper is-action-field"></div>
   </div>
</div>

Fody · Answer 1 · 2021-10-26T20:50:18.847

2

The id's that have been assigned contain characters that don't work with # notation, but you can use attribute notation

cy.get('.list-group-item')
  .eq(0)
  .find('[id="options[0]radiovalue-true"]')  // query id as an attribute
  .click() 

cy.get('.list-group-item')
  .eq(0)
  .find('[id="options[0]radiovalue-false"]')
  .click()

Specifically, the [] in the ids stops '#options[0]radiovalue-true' from working.

With the expanded fragment, this works

cy.get('input[id="options[0]radiovalue-true"]')
  .click({force:true})
  .should('be.checked')

You need force:true because of the style opacity:0 and width & height 0.

This means the input is effectively hidden, and there is probably a better way to test this - perhaps clicking on the SVG icons.

edited Oct 26 '21 at 20:50

answered Oct 26 '21 at 19:59

Fody

23,754
3
20
37

I tried this one as well! It's not working ((( – Anastasion Oct 26 '21 at 20:19
Will need more of the HTML to sort it out, please. It worked with the fragment you already posted. – Fody Oct 26 '21 at 20:23
I just added it. – Anastasion Oct 26 '21 at 20:35
1

Thanks for the comment! I changed it to click on SVG and it finally worked! It also sent API call as I wanted! – Anastasion Oct 26 '21 at 20:58
Excellent, good work. – Fody Oct 26 '21 at 20:59

Alapan Das · Answer 2 · 2021-10-26T18:08:55.467

0

You can use the IDs and click to select the 'Yes' or 'No' radio buttons.

cy.get('.list-group-item')
  .eq(0)
  .find('#options[0]radiovalue-true')
  .click() //Clicks Yes

cy.get('.list-group-item')
  .eq(0)
  .find('#options[0]radiovalue-false')
  .click() //Clicks No

edited Oct 26 '21 at 18:08

answered Oct 26 '21 at 18:03

Alapan Das

17,144
3
29
52

Unfortunately, it's not working – Anastasion Oct 26 '21 at 18:43
Are you getting any errors? Can you try with `click({force: true})`? Also it would be great if you can add the HTML of the entire row containing the text and the two radio buttons. – Alapan Das Oct 26 '21 at 18:44
Yes, I tried ``` click({ force: true}) ``` . It's not clicking or checking this radio button + failed in assertion ``` should('be.checked') ``` – Anastasion Oct 26 '21 at 19:09
Please share the HTML of the entire row containing the text and the two radio buttons. – Alapan Das Oct 26 '21 at 19:34
I just added it – Anastasion Oct 26 '21 at 20:35
I fixed the problem! I needed to click on SVG instead radio-button – Anastasion Oct 26 '21 at 21:00

How to check the Radio Button in Cypress. The regular check() is not working

2 Answers2