protractor :don't wait for elements to appears in Dom

Question

I do end to end test using protractor.When I start up the test this message appears to me

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

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

}); 
  }); 

Answer 1

You can use 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.

Because protractor uses control flow, this command will not finish until the FiltText is visible or the time is greater than timeout.

More information here: http://www.protractortest.org/#/api?view=ProtractorExpectedConditions

Answer 2

there are many ways to achieve this, for example :

1. Use protractor.ExpectedConditions API

2. Wait for some seconds to ensure everything is loaded, here is a sample code :

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
}

Then you can use it in your tests :

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

});