如何让 Protractor 等待弹出框的出现并检查它是否不为空字符串？

Question

如何让 Protractor 等待弹出框的出现并检查它是否不为空字符串？

6

这是我的弹出式气泡，当您悬停在它上面时会弹出：

这是添加到DOM之前的HTML：

<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欧元的价格适用于往返机场所有行程这样的字符串。此字符串不得为空。

以下是我的protractor-conf部分，其中包含正则表达式以检查元素是否为空，以及浏览器在检查之前应等待多长时间：

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

这是我的 Protractor 测试：

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的方式进行测试？Protractor可以等待5秒钟，如果没有文本，则将测试标记为失败吗？

- mles

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alecxe · Accepted Answer

Protractor能等待大约5秒钟，如果没有文本，则将测试标记为失败吗？

这正是browser.wait()的作用所在。与使用browser.sleep()相比，它也是通常推荐的。我们甚至通过eslint-plugin-protractor帮助执行了“不要使用browser.sleep()”规则。

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

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

Protractor会等待最多5秒，不断检查文本是否存在于元素中。如果在5秒后文本仍不存在，则会出现错误并且测试将失败。

如果需要，您还可以使用visibilityOf预期条件来等待弹出框出现。

如果您需要等待符合特定正则表达式模式的测试，您可以创建一个自定义的“预期条件”：

：

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