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

Question

我使用量角器进行端到端测试。我没有使用 Selenium WebDriver。我直接连接到魅力浏览器。当我启动测试时发生了 2 个错误。第一个：

conFusion App E2E 测试菜单 0 项应显示 cmets 的数量为 信息： 预期 0 等于 5。 堆： 错误：预期失败

第二个：

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

我使用 JSON 服务器提供 REST API 以通过我的 Angular 应用程序访问 JSON 数据。有五个 cmets 和过滤器来订购 cmets。 我还使用 gulp 来提供 Angular 应用程序。当我输入终端 gulp 时，一切正常。但是量角器失败了。

如何让量角器等到元素出现在 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');

 }); 
 }); 

我要测试的Html页面部分代码：

<h4> Customer Comments &nbsp; 
                <span style="font-size:15px;">sorted by:<input type="text" ng-model="FiltText"></span></h4><blockquote ng-repeat="commet in dish.comments |orderBy:FiltText">
         <h5>{{commet.rating}} Stars</h5>
         <h5>{{commet.comment}}</h5>
         <footer>{{commet.author}}, <span>{{commet.date|date}}</span>. </footer>

            </blockquote>

Answer 1

您使用 protractor.ExpectedConditions.visibilityOf 或 presentOf() 方法等待元素在 UI 上可见或出现在 DOM 中。按照下面的代码：

var EC=protractor.ExpectedConditions;
var targetEle=element(locator);

browser.wait(EC.visibilityOf(targetEle),10000,'NOT VISIBLE'); //wait until 
//ele visible
browser.wait(EC.presenceOf(targetEle),10000,'NOT PRESENT');//wait until 
//present in dom