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

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

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

CodePudding user response：

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.

CodePudding user response：

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