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?
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);
}));
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments