如何使用“Angular Material 2”和“Protractor”选择选项？

Question

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

假设我有一个值为“optionA”的选项。如何通过该值选择某个选项？

我试过这个：

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

在里面，我看到了选项的正确数目，但是我如何选择值为“of options”的选项呢？

Answer 1

这对我很管用：

    element.all(by.cssContainingText('span.mat-option-text', "option text to search for")).click();

从这个问题中得到了答案：如何在量角器中按量程值定位元素？

Answer 2

您可以做的是通过在选择器中添加期望值来使您的css-selector“动态”。例如

// I've place the expected value in a var to make it more clear
const optionValue = 'your-option-value';

// Open select
element(by.name('myselect')).click();
// Click on the option with your selected value
$(`.mat-option[value="${optionValue}"]`).click();

Answer 3

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

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');