无法使用 nightwatch js 单击下一个选项卡的材料选项卡

Question

我的应用程序中有一个 material 选项卡。我正在尝试自动化测试用例使用 nightwatch.js。但是我无法点击我的下一个标签使用 nightwatch.js 的应用程序。我需要切换到下一个选项卡。任何帮助是晋升我的 material 选项卡如下所示：

<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>，名称为 class mat-tab-labels，具有三个 child <div>，名称为 class 作为 mat-tab-labels 看起来像选项卡的 headers。

所以我最后做的是 select 相应的 nth-child 元素 <div>.

无法使用 nightwatch js 单击下一个选项卡的材料选项卡

Not able to click on materail tabs next tab using nightwatchjs

nightwatch.js

angular6