Protractor wait for the page to fully load

Question

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'.

Answer 1

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.