How to test mat-stepper with Cypress

Question

I want to test mat-stepper with Cypress.

In particular I want to verify that a particular step is currently selected or not.

I have tried to put a data-cy attribute on the mat-step tag, but this is not rendered on HTML, so I can not access directly to the current selected step.

Example of stepper I want to test

Is there a way in Cypress where I can verify which is the selected header?

Answer 1

I've tried a different approach.

Instead of using an attribute on the tag, I try to interact with the Angular module

it('Check selected step', () => {
cy.visit(pageToVisit);
let angular: any;
cy.window()
  .then((win) => angular = win.ng)
  .then(() => cy.document()
    .then((doc) => {
      const componentInstance = angular.getComponent(doc.querySelector('mat-stepper'));
      expect(componentInstance._selectedIndex).to.equal(wantedIndex);
    }));
});