How should I assert that the checkbox is checked in Cypress?

Issue

I am trying to assert on an element to see if the checkbox is checked or not. Please find the image below:

Now, this is the dom structure to target this element:

<pds-radio class data-v-1234bb3c model="singleSelection" checked>
 #shadow-root (open)
 <div class="wrapper">
  <div class="radio-wrapper">
          <div class="radio-container">
                 <div class="radio active" tabindex="0">
                        ::before

Right now when I click on it, I get this 'checked' attribute in 'pds-radio' and in the shadow the class becomes class="radio active" if not checked it's class="radio"

I will really appreciate your help on this. Thanks

Solution

You can use .shadow() to access the shadow DOM.

cy.get('pds-radio')
  .shadow()
  .find('.radio')
  .should('have.class', 'active')

Alternatively, you could include the includeShadowDom option in the find command.

Answered By - agoff