I am trying to test the states of slide-toggles within my app using Cypress.

These time out and fails the test:

cy.get('label.mat-slide-toggle-label').eq(2).should('be.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('be.checked')

Where as these pass

cy.get('label.mat-slide-toggle-label').eq(2).should('not.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('not.checked')

The only difference is that the state of the toggle has changed.

Can someone help explain why the "not.checked" tests pass, but the others don't?

I am trying to test the states of slide-toggles within my app using Cypress.

These time out and fails the test:

cy.get('label.mat-slide-toggle-label').eq(2).should('be.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('be.checked')

Where as these pass

cy.get('label.mat-slide-toggle-label').eq(2).should('not.checked')
 or
cy.get('div.mat-slide-toggle-bar').eq(2).should('not.checked')

The only difference is that the state of the toggle has changed.

Can someone help explain why the "not.checked" tests pass, but the others don't?

• javascript
• testing
• automated-tests
• cypress

3 Answers 3

The documentation states:

The <mat-slide-toggle> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <mat-slide-toggle> element.

When Angular Material adds the switch, it adds a whole little hierarchy of elements under the outer <mat-slide-toggle> element; divs with classes like mat-slide-toggle-label, mat-slide-toggle-bar, etc. But it also adds a real (but hidden) <input> element.

The 'checked' test only applies to input elements (this is probably why your should('not.be.checked') tests are working--because non-input elements can never be checked. So, to use Cypress's should('be.checked') test, you need to tell Cypress to get a reference to the actual <input> contained within the <mat-slide-toggle>, and not one of the other mat-xxx elements.

Example:

cy.get('mat-slide-toggle#whateverId input').should('be.checked');
  // get reference to the single <input> inside the <mat-slide-toggle>

or:

cy.get('mat-slide-toggle#whateverId .mat-slide-toggle-input').should('be.checked');
  // get reference to the element with class "mat-slide-toggle-input" inside the <mat-slide-toggle> (which is the <input> itself)

I was going to invite you to use the GUI snapshots panel to better understand what could be wrong, and maybe increase the timeout(s).

But in fact, I'm tempted to conclude that neither <label> nor <div> can be checked. <input type="checkbox"> can.

Is there another property you can assert on your label ?

I have managed to find a element for each toggle that allows me to check the state (checked or not checked).

input#mat-slide-toggle-29-input.mat-slide-toggle-input.cdk-visually-hidden

All I need to do is change the number to related to the toggle under test. I can check that the toggle is checked, press the master switch and then check that it is unchecked. I will also created a test where I test each toggle individually to ensure that the toggle works in a ground and singularly.