2

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

这是代码：

<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.
4

2 回答 2

1

因此 mat-tab 不会一对一地呈现给 DOM，您应该考虑其他选项。截至目前，mat-tabDOM 中包含如下：

<div role="tab" ... >

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

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

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

于 2021-06-03T11:37:46.597 回答
0

等待标签可见然后单击它怎么样，这对我总是有用的：

cy.get('[data-cy="relationship-tab"]').should('be.visible');    
cy.get('[data-cy="relationship-tab"]').click();
于 2020-07-07T14:33:02.393 回答