Cypress: How to verify generated checkBox is checked and has attribute aria-checked="true"

user_7056281 0
Viewed 1511

I want to verify that a checkbox is checked. But it isn't a usually checkbox from type="checkbox", so it HASN'T the property "checked". Instead of this you can find in the HTML-Doom aria-checked="true". How can I read out this value?

HTML-Snipet:


<mat-checkbox class="mat-checkbox mat-primary mat-checkbox-checked" aria-label="checkBoxCapacityBaseEditDayofWeek: 1" id="DAY1">
  <label class="mat-checkbox-layout" for="DAY1-input">
  <span class="mat-checkbox-inner-container">
   <input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="DAY1-input" tabindex="0" value="1" aria-checked="true">

What I've tried for so long:

Cypress-Code (nothing works):

// cy.get('#DAY2')
    // .should('have.value', 'aria-checked="true"')
    
    cy.get('#DAY1')
    .should('have.attr', 'aria-checked', 'false')

    cy.get('#DAY2')
    .should('have.attr', 'aria-checked', 'true')

    // .invoke('val', 'aria-checked')
    // .should('eq', true)
    // .should('have.prop', 'aria-checked', true)
    // .should('have.attr', 'aria-checked', 'true')

How can I get to the value true?

EDIT: I found the solution: Cypress-Code:

cy.get('#DAY1-input').should('have.attr', 'aria-checked', 'true')
cypress checked checkbox attributes html
1 Answers

The issue with what you're trying is that you're only selecting the parent element with your cy.get(). If you use .find() you can chain off of the parent element to find child elements. Something like the following should work:

cy.get('#DAY1')
  .find('#DAY1-input')
  .should('have.attr', 'aria-checked', true);

Additionally, you could just select the DAY1-input element directly, since it has a unique identifier:

cy.get('#DAY1-input')
  .should('have.attr', 'aria-checked', true);
user_116258500
Related