css - 通过 css winch 查找元素未使用 Protractor Angular 激活

Question

我正在使用 Protractor 自动测试我的应用程序。我通过将 css 类定义为 html 来获取元素。现在，我有一个垫子表单字段。在那个垫子表单字段中，我有很多垫子选项。我想为此选项实现随机选择来测试我的应用程序。我正在详细解释。

在我的 HTML 类中

<mat-form-field>
   <mat-select class="t-day" matInput placeholder="{{ 'Day' | translate }}" [(ngModel)]="settings.day" name="day">
   <mat-option class="t-hour-option" *ngFor="let day of days" [value]="day.value">{{ day.text }}</mat-option>
  </mat-select>
</mat-form-field>

现在在测试课上，我首先点击进入字段，然后从中选择一个随机选项。我正在尝试这种方式。

 let dayfield = element(by.css('.t-day'));
 let picktime = element.all(by.css('.t-hour-option.mat-option:not(.t-hour-option.mat-option.mat-selected.mat-active)'));

    await click.onto(productionDayEnd)
    await productionDayEnd.isDisplayed();

    await click.onto(picktime);

但它没有点击并且不起作用。我不确定这种情况出了什么问题。

Answer 1

您正在使用 .mat-option 作为一个类，但它实际上是一个标签。
$$('mat-option.t-hour-option:not(.mat-active)'); 或
$$('.t-hour-option:not(.mat-active'); 是一些潜在的解决方案。

但是，我没有看到名为 .mat-active 的类，尽管它可能会被渲染(angular 不是最好的)。如果 .mat-active 是一个像 .mat-option 这样的标签那么你会想要做
:not(mat-active)