CODEWITHSUNDEEP
javascriptnode.jsangularjasmineprotractor
Kedel Mihail
Kedel Mihail

Reputation: 151

Protractor wait for the page to fully load

I'm trying to click on '0 - Bootstrapping' under Tutorial after going to https://docs.angularjs.org/tutorial, but Protractor is not waiting for the page to fully load, so I get an Error

Failed: Cannot read property 'click' of undefined

I tried manually waiting for the page to load using

browser.driver.sleep(10000);

but I still get the same Error.

conf.js

exports.config = {
// seleniumAddress: 'http://localhost:4444/wd/hub',
getPageTimeout : 12000000,
capabilities: {
    'browserName': 'chrome'
},
specs: ['todo-spec.js'],
jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 1440000,
}
};

todo-spec.js

describe('angularjs homepage', function () {
it('should greet the named user', function () {
    var dropdown = element.all(by.css('.dropdown')).first(),
        dropdownToggle = dropdown.element(by.css('.dropdown-toggle')),
        dropdownMenu = dropdown.element(by.css('.dropdown-menu')),
        menuItem = dropdownMenu.all(by.tagName('li')).first();

    browser.get('http://www.angularjs.org');
    dropdownToggle.click();
    menuItem.click();

    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial');
    //waiting 10 seconds for the page to fully load
    browser.driver.sleep(10000);
    browser.waitForAngular();
});
it('', async function () {

    /*  tried waiting for the element to be present
    var EC = protractor.ExpectedConditions;
    var e = element.all(by.css('.nav-index-listing'))[0];
    browser.wait(EC.presenceOf(e), 10000);

    Failed: Cannot read property 'isPresent' of undefined
    */

    //clicking '0 - Bootstrapping' under Tutorial
    element.all(by.css('.nav-index-listing'))[0].click();
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);
    // Failed: Cannot read property 'click' of undefined

});
});

Edit

Replaced 

element.all(by.css('.nav-index-listing'))[0].click();
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);

by

        element.all(by.css('.nav-index-listing')).get(0).click();
    browser.wait(protractor.ExpectedConditions.urlIs("https://docs.angularjs.org/tutorial/step_00"), 5000);
    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial/step_00');
    expect(element(by.cssContainingText('.pln', 'npm install')).isEnabled()).toBe(true);

And got an Error

Failed: Wait timed out after 5001ms

If I remove browser.wait I get

Expected 'https://docs.angularjs.org/tutorial' to equal 'https://docs.angularjs.org/tutorial/step_00'.

Upvotes: 1

Views: 8379

Answers (2)

Madhan Raj
Madhan Raj

Reputation: 1442

Try using waitForAngualarEnabled(true) instead of expected wait which makes the protractor to wait until all the angular elements are loaded and add await in every line of your test.

Upvotes: 0

Saddam Pojee
Saddam Pojee

Reputation: 1588

First of all browser.driver.sleep(10000) is not required. For page load, you can use protractor.ExpectedConditions. It will reduce unnecessary waiting for 10 seconds, if the page is already loaded.

Secondly, there is a minor mistake in your code which is the root cause of your problem.

Change this line

element.all(by.css('.nav-index-listing'))[0].click();

To this 

 element.all(by.css('.nav-index-listing')).get(0).click();

UPDATE:

  1. element.all(by.css('.nav-index-listing')) will only give you li elements which will pass the test. But clicking it, will not lead you to the desired page.
    Change it to: 

    element.all(by.css('.nav-index-listing a')).get(0).click();

  2. In this case, [0] will not work since the returned value is not an array. It is of type ElementArrayFinder. So, that's why .get(0) is required.

  3. It will be better if you check for below conditions too, for your test. 

    browser.wait(EC.urlIs("https://docs.angularjs.org/tutorial/step_00"), 5000);    
expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs.org/tutorial/step_00');

    These conditions checks whether your current URL is https://docs.angularjs.org/tutorial/step_00 or not.

Upvotes: 7

Related Questions