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

}); 
  });

Possible duplicate of [Protractor waiting for element to be in DOM](http://stackoverflow.com/questions/30205235/protractor-waiting-for-element-to-be-in-dom) — Sudharsan Selvaraj, Apr 09 '17 at 14:14
The name of the test in the error is not anywhere in the spec you have provided. Where is that code? — Gunderson, Apr 09 '17 at 19:30

score 2 · Answer 1 · edited Apr 09 '17 at 14:13

2

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

edited Apr 09 '17 at 14:13

Sudharsan Selvaraj

4,792
3
14
22

answered Apr 09 '17 at 13:59

FCin

3,804
4
20
49

I did what you suggest .but didn't work. this message appears to me: Failed: Wait timed out after 5001ms – munirah Apr 10 '17 at 04:51
I actual add your code before this code: element(by.model('FiltText')).sendKeys('author'); because when I put after it the the first problem again appears – munirah Apr 10 '17 at 04:55
You get timed out because either your elements take more than 5 seconds to spawn or your elements don't spawn at all. You have to measure how long it takes for `FiltText` to appear on screen. If it takes 10 seconds then you will get timeout error – FCin Apr 10 '17 at 07:13
how can I measure how long it takes for FiltText? – munirah Apr 10 '17 at 12:03
open the page the same as if it was a test. Just type the url, open page and count approximately how many seconds passed. Or just increase your timeout to e.g. 60 seconds. If you get timeout then it means that your elements probably don't load at all. – FCin Apr 10 '17 at 14:36

Stephane Janicaud · Answer 2 · 2017-04-09T15:24:48.343

there are many ways to achieve this, for example :

Use protractor.ExpectedConditions API
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');
  });

});

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

2 Answers2