量角器：不要等待元素出现在 Dom

Question

我使用量角器进行端到端测试。当我开始测试时，我会看到这条消息

conFusion App E2E 测试菜单 0 项应显示第一评论作者为 信息： 失败：使用定位器找不到元素：by.model("FiltText")

如何让量角器等到元素出现在 DOM 中？

对应的量角器配置代码为：

  exports.config = {
    allScriptsTimeout:11000,

    specs: [
      'e2e/*.js'
      ],
  capabilities: {
     'browserName': 'chrome'
   },

baseUrl: 'http://localhost:3001/',

 framework: 'jasmine',
 directConnect: true,

 jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
 }
};

包含e2e测试的scenarios.js代码

 describe('menu 0 item', function() {
beforeEach(function() {

  browser.get('index.html#/menu/0');


});

it('should have a name', function() {
      var name = element(by.binding('dish.name'));
      expect(name.getText()).
         toEqual('Uthapizza Hot $4.99');
});

it('should show the number of comments as', function() {

    expect(element.all(by.repeater('comment in dish.comments'))
        .count()).toEqual(5);


});

it('should show the first comment author as', function() {
      element(by.model('FiltText')).sendKeys('author');

      expect(element.all(by.repeater('comment in dish.comments'))
        .count()).toEqual(5);

      var author = element.all(by.repeater('comment in dish.comments'))
                  .first().element(by.binding('comment.author'));

      expect(author.getText()).toContain('25 Cent');

}); 
  }); 

Answer 1

你可以使用 ExpectedConditions：

var EC = protractor.ExpectedConditions;
var timeout = 5000; // in miliseconds
// Waits for the element to be present on the dom.
browser.wait(EC.presenceOf(element(by.model("FiltText"))), timeout);
// Here you can safely use your element, because here it is guaranted to be present.

因为量角器使用控制流，所以直到FiltText可见或时间大于超时，此命令才会完成。

更多信息在这里： http://www.protractortest.org/#/api?view=ProtractorExpectedConditions

Answer 2

有很多方法可以实现这一点，例如：

1. 使用protractor.ExpectedConditions API

2. 等待几秒钟以确保所有内容都已加载，这是示例代码：

utils.js

'use strict';

/**
 * Navigate to an url and wait some seconds
 * @param {string} path The path
 * @param {seconds} [seconds] The number of seconds to wait for
 * @returns {Promise}
 * @see waitSomeSeconds
 */
function navigateAndWait(path, seconds) {
  return browser.get(path)
    .then(function () {
      // Wait some seconds until page is fully loaded
      return waitSomeSeconds(seconds);
    });
}

/**
 * Wait some seconds (default is 3)
 * @param {int} [seconds]
 * @returns {Promise}
 */
function waitSomeSeconds(seconds) {
  return browser.sleep((seconds || 3) * 1000);
}


module.exports = {
  navigateAndWait: navigateAndWait,
  waitSomeSeconds: waitSomeSeconds
}

然后你可以在你的测试中使用它：

**sampleSpec.js**

'use strict';

var util = require('./utils');

describe('Products', function () {

it('should be redirected to products page after login', function (done) {
    util.waitSomeSeconds().then(function() {
      browser.getCurrentUrl().then(function (value) {
        var relativePath = value.substring(value.lastIndexOf('/'));
        expect(relativePath).toEqual('/products');
        done();
      });
    });

it('should navigate to products list', function() {
    return util.navigateAndWait('/products');
  });

  it('should display title with correct data', function() {
    expect(element(by.css('h1')).getText()).toBe('Newest products');
  });

});