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

Question

一旦你将鼠标悬停在弹出窗口上,这就是我的弹出窗口:

这是在弹出窗口添加到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€ for all rides to and from the airport.此字符串不能为空.

这是我的量角器-conf的一部分,用正则表达式来检查元素是否为空以及浏览器在检查之前应该等待多长时间:

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中则不行.如何进行类似承诺的测试？量角器可以等待5秒钟,如果没有文本,请将测试标记为失败？

Answer 1

量角器可以等待5秒钟,如果没有文本,请将测试标记为失败？

这就是browser.wait()全部.通常也建议使用它browser.sleep().我们甚至browser.sleep()在帮助下强制执行"不使用"规则eslint-plugin-protractor.

在您的情况下,textToBePresentInElement完美契合:

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

量角器会等待最多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);