量角器如何等待弹出窗口出现并检查它是否没有空字符串？

Question

这是我的弹出框，当您将鼠标悬停在它上面时会弹出：

这是 html 在 将弹出框添加到 DOM 之前 的样子：

<span 
    tariff-popover="popover.car2go.airport" 
    class="ng-isolate-scope">
    <span ng-transclude="">
        <span class="ng-binding ng-scope">
            Airport Fee
        </span>
    </span>
    &nbsp;
    <span 
        popover-placement="right" 
        uib-popover-html="text" 
        popover-trigger="mouseenter" 
        class="fa fa-info-circle">
    </span>
</span>

这是在弹出窗口可见之后：

<span 
    tariff-popover="popover.car2go.airport" 
    class="ng-isolate-scope">
    <span ng-transclude="">
        <span class="ng-binding ng-scope">
            Airport Fee
        </span>
    </span>
    &nbsp;
    <span 
        popover-placement="right" 
        uib-popover-html="text" 
        popover-trigger="mouseenter" 
        class="fa fa-info-circle">  
    </span>
    <div 
        tooltip-animation-class="fade" 
        uib-tooltip-classes="" 
        ng-class="{ in: isOpen() }" 
        uib-popover-html-popup="" 
        title="" 
        content-exp="contentExp()" 
        placement="right" 
        popup-class="" 
        animation="animation" 
        is-open="isOpen" 
        origin-scope="origScope" 
        style="visibility: visible; display: block; top: -41px; left: 108.984px;" 
        class="ng-isolate-scope right fade popover in">
        <div class="arrow">
        </div>
        <div class="popover-inner">
            <!-- ngIf: title -->
            <div 
                class="popover-content ng-binding" 
                ng-bind-html="contentExp()">
                4,90€ for all rides to and from the airport
            </div>
        </div>
    </div>
</span>

我想测试文本是否不为空。在我的测试中，我正在检查是否有像 4,90€ for all rides to and from the airport 这样的字符串。此字符串不能为空。

这是我的带有正则表达式的量角器配置文件的一部分，用于检查元素是否为空以及浏览器在检查之前应等待多长时间：

params: {
    regexNotEmpty: '^(?!\s*$).+',
    sleepTimeout: 1000
},

这是我的量角器测试：

describe('car2go test all input fields and checkboxes', function() {
  beforeEach(function() {
    browser.get('http://localhost:9999/#/car2go');
    browser.waitForAngular();
  });

  it('should display the popover-content on mouseover', function() {
    var path = 'span[tariff-popover="popover.car2go.airport"]';
    var pathIcon =  path + ' > .fa.fa-info-circle';
    var pathPopover = path + ' > .popover.ng-isolate-scope.right.fade.in';

    var popoverIcon = element(by.css(pathIcon));
    browser.actions().mouseMove(popoverIcon).perform();
    var popover = element(by.css(pathPopover));

    expect(popover.isDisplayed()).toBeTruthy();
    browser.sleep(browser.params.sleepTimeout);
    expect(popover.getText()).toMatch(browser.params.regexNotEmpty);
  });
});

我将鼠标悬停在 i 图标上并检查弹出框是否出现。没问题。然后我必须等待 1 秒，直到弹出窗口完全加载，然后我可以检查它是否不为空。

这种方法的问题是它主要适用于 Chrome，但不适用于速度较慢的 Firefox。怎样才能做到类似于promise的测试呢？量角器能否等待 5 秒，如果没有文本，则将测试标记为失败？

Answer 1

Can protractor wait for like 5 seconds and if there is no text, mark the test as failure?

这就是browser.wait() is all about. It is also generally recommended as opposed to using browser.sleep(). We've even enforced the "not use browser.sleep()" rule with the help of eslint-plugin-protractor.

在您的情况下，textToBePresentInElement 非常适合：

var EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElement(popover, "text to expect"), 5000);

Protractor 会等待 最多 5 秒 不断检查文本是否存在于元素中。如果 5 秒后文本不存在 - 您将收到错误消息并且测试将失败。

如果需要，您也可以将 visibilityOf expected condition 用于 "wait until the popover appears" 部分。

---

如果您需要等待匹配特定正则表达式模式的测试，您可以制作一个自定义预期条件:

var EC = protractor.ExpectedConditions;

var patternToBePresentInElement = function(elementFinder, pattern) {
  var matchesPattern = function() {
    return elementFinder.getText().then(function(actualText) {
      return actualText.search(pattern) !== -1;
    });
  };
  return EC.and(EC.presenceOf(elementFinder), matchesPattern);
};

用法：

browser.wait(patternToBePresentInElement(popover, /\w+/), 5000);