如何使用 Angular Material 2 和 Protractor 选择一个选项? [英] How to select an option with Angular Material 2 and Protractor?

问题描述

我正在用量角器编写一些 e2e 测试.我的应用程序是一个 Angular Material 2 应用程序.在我的测试中，我想按值选择一个 md-select 选项.当我检查打开的 md-select 时，我看到了 md-option 项.选项的值在属性 ng-reflect-value 中.

I'm writing some e2e tests with protractor. My application is an Angular Material 2 application. In my test I want to select an option of a md-select by value. When I inspect the open md-select I see the md-option items. The values of the options are in an attribute ng-reflect-value.

假设我有一个值为optionA"的选项.如何通过此值选择某个选项?

Let's say I have an option with the value "optionA". How can I select a certain option by this value?

我试过了:

element(by.name('myselect')).click();
$$('.mat-option').then((options) => {
  ...
});

然后在里面我看到了正确数量的选项，但是如何选择具有opetionA"值的选项?

and inside then I see the correct number of options, but how can I select the option which has the value "opetionA" ?

推荐答案

这个例子有点粗糙，但它展示了如何做你想做的事:

This example is a bit crude, but it shows how to do what you want:

html:

<mat-form-field id="your-id">
    <mat-select>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
    </mat-select>
</mat-form-field>

ts:

function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');    

        for (let optionId of optionIds) {
          const option = element(by.id(optionId));
          option.getText().then((text) => {
            if (text === valueToFind) {
              option.click();
            }
          });
        }
      });
  });
}

selectOptionByOptionValue('your-id', '1');

这篇关于如何使用 Angular Material 2 和 Protractor 选择一个选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！