angular - 使用 Cypress 更改 Angular Material 中的选项卡

Question

我的页面上有一个“Angular Material”选项卡组。我必须使用 Cypress 测试选项卡的更改。当页面加载时，用户位于基本信息选项卡上，我想切换到关系选项卡。我无法更改选项卡

代码如下:

<mat-tab-group animationDuration="0ms">

  <mat-tab label="Basic Information">
  </mat-tab>

  <mat-tab data-cy="relationship-tab" label="Relationship" *ngIf="leiType.value===leiTypes.CORPORATION">
  </mat-tab>

  <mat-tab label="Address">
  </mat-tab>
</mat-tab-group>

我正在使用标签上的单击事件来更改选项卡，但无济于事。

cy.get(`[data-cy='relationship-tab']`).click();
// cy.get(`[data-cy='relationship-tab']`).trigger('click');

我收到以下错误:

Timed out retrying: Expected to find element: [data-cy='relationship-tab'], but never found it.

Answer 1

因此 mat-tab 不会一对一地渲染到 DOM，您应该考虑其他选项。截至目前，mat-tab像这样包含在 DOM 中:

<div role="tab" ... >

因此，如果您所在的页面没有任何其他带有 Angular 色选项卡的 div，则可以根据 cypress css 选择器进行选择，并进行以下设置。

// Select second tab
cy.get('div[role=tab]').eq(1).click();

顺便说一句，仅依赖这个 css 选择器并不是最佳实践，但我希望能够帮助您。