无法使用nightwatchjs单击materail选项卡下一个选项卡

Question

我的申请表中有一个材料标签。我正在尝试使用nightwatch.js自动化测试用例。但我无法使用nightwatch.js单击我的应用程序的下一个选项卡。我需要切换到下一个标签。任何帮助都会被提升我的材料标签如下所示：

<mat-tab-group
  id="detailsTab"
  [selectedIndex]="tabIndex"
  (selectedTabChange)="tabSelectionChange($event.index)"
>
  <mat-tab id="sample" [label]="card">
    <app-details *ngIf="tabIndex === 0"></app-details>
  </mat-tab>
  <mat-tab [label]="Report">
    <app-report *ngIf="tabIndex === 1"></app-report>
  </mat-tab>
  <mat-tab [label]="perf">
    <app-perf *ngIf="tabIndex === 2"></app-perf>
  </mat-tab>
</mat-tab-group>

Nightwatch代码如下所示：

.waitForElementVisible('#detailsTab > .mat-tab-group:nth-child(1)',6000) 
.click('#detailsTab >.mat-tab-group:nth-child(1)')

Answer 1

看起来你的选择器是错误的。您是否在浏览器控制台中检查过它以确认使用$（'＃detailsTab> .mat-tab-group：nth-​​child（1）'）找到该元素？

这里只是一个猜测，但这似乎可行：

.waitForElementVisible('mat-tab#sample',6000) 
.click('mat-tab#sample')

Answer 2

这对我有用：

browser.waitForElementVisible('#detailsTab .mat-tab-label:nth-child(2)',6000) 
       .click('#detailsTab .mat-tab-label:nth-child(2)')

... mat-tab-group ID是#detailsTab。 HTML结构看起来像一个类名为<div>的mat-tab-labels，有三个孩子q​​azxswpois，类名为<div>，看起来像标签的标题。

所以我最终做的是选择相应的mat-tab-labels的nth-child元素。