How can you check whether a checkbox is in the indeterminate state (neither checked nor unchecked)?

user_5378803 0
Viewed 1959

In Cypress you can test whether a checkbox is checked by:

cy.get('[data-cy=my-selector]').should('be.checked');

And conversely you can check whether it is not checked by:

cy.get('[data-cy=my-selector]').should('not.be.checked');

I can't find a way to check whether the checkbox is in the indeterminate state.

enter image description here

Is there any way to do that in Cypress?

cypress
4 Answers

I just realised that I can do that with a simple css selector:

cy.get('[data-cy=my-selector]:indeterminate').should('exist');

Thanks @AlapanDas for pointing that selector out.

user_53788030

Here is another, perhaps more direct, way to check the indeterminate attribute in Cypress:

    cy.get('#checkbox-input')
      .invoke('prop', 'indeterminate', true)
user_9220320

Another short way using the .should method:

cy.get('#checkbox-input')
  .should('have.prop', 'indeterminate');
user_57707340

You can use the Jquery property .is(":indeterminate") for this. Considering your codepen example. You can do something like:

cy.get('input#tall').then(($ele) => {
  if ($ele.is(':indeterminate')) {
    //Do something here when checkbox is in indeterminate state
    expect(true).to.be.true //Or, Apply a true assertion
  }
})
user_45712710
Related