如何使用量角器正确编写菜单选择测试？答案

【问题标题】：How to properly write a test for menu selection with protractor?如何使用量角器正确编写菜单选择测试？
【发布时间】：2018-10-04 11:45:07
【问题描述】：

我正在尝试了解如何在量角器测试中连接事件。我在下面有一个最小化的示例，如果包含第二个 browser.sleep (browser.sleep(3000))，则测试通过。由于点击事件 (element(by.tagName('mat-form-field)).click()) 的承诺现在应该已经解决。我想知道为什么测试没有通过。

可能是因为承诺在点击之后的那一刻被解决，所以在点击事件之后但在它触发的操作完成之前？（延迟显示下拉菜单）

如果是这种情况，我应该如何创建一个测试，等待选择菜单可见，然后再从菜单中选择一个选项？

import {browser, by, element} from 'protractor';

describe('workspace-project App', () => {
  
    it('should select', () => {
      browser.get('http://localhost:4200/test').then(() => {
          // browser.sleep(4000);
          element(by.tagName('mat-form-field')).click().then(() => {
            // browser.sleep(3000);
            element.all(by.css('span.mat-option-text')).getText().then((values) => {
              element.all(by.css('span.mat-option-text')).filter((elem, index) => {
                return elem.getText().then((text) => {
                  return values[1] === text;
                });
              }).first().click();
              browser.sleep(2000);
            });
          });
        });
      });
});

<p>
  <mat-form-field>
    <mat-select [(value)]="selected">
      <mat-option>None</mat-option>
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2">Option 2</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>
</p>

【问题讨论】：

标签： protractor

【解决方案1】：

如果您想在执行操作之前等待元素，您应该使用：http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.visibilityOf

element.all(by.css('span.mat-option-text')).getText().then((values) => {
  element.all(by.css('span.mat-option-text')).filter((elem, index) => {
    return elem.getText().then((text) => {
      return values[1] === text;
    });
  }).first().click();
});

这部分代码应该被替换。现在你正试图在ElementArrayFinder 上执行getText()。您可以在ElementFinder 上进行操作。此外，您将循环遍历那些ElementArrayFinder 两次。在filter() 中，您定义了index，但不要在任何地方使用它。索引是可选参数 - 如果你不打算使用它 - 省略它。

values[1] === text; - 如果你想选择option2试试：

从“量角器”导入{browser, by, element}；

describe('workspace-project App', () => {
  it('should select', () => {
    return browser.get('http://localhost:4200/test').then(() => {
      return element(by.tagName('mat-form-field')).click().then(() => {
        //add Expected Condition here
        return element(by.css('mat-option[value="option2"]')).click();
      });
    });
  });
});

【讨论】：

【解决方案2】：

检查元素是否存在于页面的 DOM 上并且可见的期望。可见性是指元素不仅被显示，而且高度和宽度都大于0。这与'invisibilityOf'相反。

【讨论】：