'Getting the checked value of a checkbox - Material Design

I have a page that uses a basic bootstrap based Admin BSB Material Design layout

I am having difficulty getting a value from the checkboxes in this design.

Example checkbox that is 'checked':

I am seeing cypress having no luck finding the checkbox control even if i add a data-cypress="mycheckbx" attribute.

So my questions is: how do I obtain the 'checked' property in this scenario?

Styles Used:

[type="checkbox"].filled-in:not(:checked)+label:before {
    width: 0;
    height: 0;
    border: 3px solid transparent;
    left: 6px;
    top: 10px;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 20% 40%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:not(:checked)+label:after {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #5a5a5a;
    top: 0;
    z-index: 0
}

[type="checkbox"].filled-in:checked+label:before {
    top: 0;
    left: 1px;
    width: 8px;
    height: 13px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(37deg);
    transform: rotateZ(37deg);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%
}

[type="checkbox"].filled-in:checked+label:after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #26a69a;
    background-color: #26a69a;
    z-index: 0
}

cypress

Solution 1:^[1]

It seems all I needed to do was:

cy.get('#pract-haspen').should('have.attr', 'checked')

and that Assertion worked!

Thanks

Solution 2:^[2]

Since none of the solutions above worked for me, I did this :

cy.get('#element').should('be.checked')

source : cypress documentation

The opposite (unchecked) assertion would be (see the official docs):

cy.get('#element').should('not.be.checked')

Solution 3:^[3]

This answers ask the question with an assert test in mind.

If you want to get the value and use it somewhere, you can simply:

cy.get('#elementQuery').then(elem => {
   var value = elem.val()
   ...do anything you want, like if(value == 'on')...
})

Solution 4:^[4]

If attr doesn't work for you, try prop:

cy.get('#pract-haspen').should('have.prop', 'checked')

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jazb
Solution 2	Valentine Shi
Solution 3
Solution 4	Cody Guldner

'Getting the checked value of a checkbox - Material Design

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]