Testing state of clicked radio button in Cypress

Question

I'm using cypress test runner and its selector playground. When I click radio button the value changes to false. Via selector playground I can't pick the right selector. I get the error shown in the picture.

    <label _ngcontent-qla-c109="">
      <input _ngcontent-qla-c109="" type="radio" class="native-input visually-hidden" name="redraw" value="false">
      <span _ngcontent-qla-c109="" class="outer-circle"></span>
      <span _ngcontent-qla-c109="" class="inner-circle"></span>
      <span _ngcontent-qla-c109="" class="text">No</span>
    </label>

Many thanks in advance for any hints, Robert

I've also tried

cy.get(':nth-child(8) > :nth-child(1) > :nth-child(1) > .col-9 > .radio-toolbar > :nth-child(2) > label > .native-input visually-hidden')
  .should('have.value','false')

Answer 1

The selector you used from the selector-playground is very brittle and prone to breaking. I really recommend to use data-testid for the interactive elements:

https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

Without a data-testid, i suggest you find the container element and chain this with the contains 'No' value.

I don't know the exact DOM structure but it can be something like:

cy.contains('Redraw')
  .parent()
  .contains('No')
  .should('have.value', 'false')

Answer 2

You can use .contains as well with Text. Since in your screenshot I can see multiple NO, you can get the first one by using eq(0).

cy.contains('No').eq(0).should('have.value', 'false')