如何使用Cypress测试mat-stepper并验证步骤选中状态？

因为mat-step是Angular Material的组件，其宿主标签不会直接渲染到最终HTML中，所以你添加的data-cy属性不会出现在DOM里。可以通过以下几种方式在Cypress中验证步骤选中状态：

方法1：通过步骤标题文本定位 #

如果步骤标题固定，直接通过文本找到对应的步骤头部，检查是否包含选中类：

// 替换为你的步骤标题文本
cy.contains('mat-step-header', '个人信息')
  .should('have.class', 'mat-step-header-selected');

方法2：通过步骤索引定位（顺序固定时适用） #

如果步骤顺序不会变动，可通过索引直接获取步骤头部并验证：

// 验证第一个步骤是否选中（索引从0开始）
cy.get('mat-step-header').eq(0)
  .should('have.class', 'mat-step-header-selected');

方法3：自定义data-cy到可渲染元素 #

你可以把data-cy属性加到matStepLabel模板内的元素上，确保属性能被渲染到DOM：

<mat-step>
  <ng-template matStepLabel data-cy="step-profile-label">个人信息</ng-template>
  <!-- 步骤内容 -->
</mat-step>

然后在Cypress中通过该属性找到元素，再向上追溯到步骤头部验证选中：

cy.get('[data-cy="step-profile-label"]')
  .parents('mat-step-header')
  .should('have.class', 'mat-step-header-selected');

方法4：联动验证步骤内容（可选） #

如果需要确认选中步骤的内容是否激活，可以通过步骤头部的aria-controls属性关联到内容区域：

cy.get('mat-step-header.mat-step-header-selected')
  .invoke('attr', 'aria-controls')
  .then(contentId => {
    cy.get(`#${contentId}`).should('have.class', 'mat-step-content-active');
  });

内容的提问来源于stack exchange，提问作者Simone Brognoli