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

Question

I do end to end test using protractor. I don't used Selenium WebDriver .I connected directly to charm browser. When I start up the test 2 errors occurred.the first one:

conFusion App E2E Testing menu 0 item should show the number of comments as Message: Expected 0 to equal 5. Stack: Error: Failed expectation

the second one:

conFusion App E2E Testing menu 0 item should show the first comment author as Message: Failed: No element found using locator: by.model("FiltText") Stack:

I used JSON server serve up the REST API for accessing the JSON data by my Angular application.there are five comments and filter to order the comments. also I used gulp to serve up the Angular application. When I type in a terminal gulp watch every-things worked right.but protractor is failed.

How can I make the protractor wait until element appears in the DOM?

the corresponding protractor configuration code is :

exports.config = {
allScriptsTimeout:11000,

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

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

   framework: 'jasmine',
   directConnect: true,

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

scenarios.js code that contain e2e test

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

 }); 
 }); 

The partial code of Html page that I want to test :

<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

You use protractor.ExpectedConditions.visibilityOf or presenceOf() methods for waiting until element visible on UI or present in DOM. Follow the below code:

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