I'm trying to click on '0 - Bootstrapping' under Tutorial after going to , 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('');
    dropdownToggle.click();
    menuItem.click();

    expect(browser.getCurrentUrl()).toEqual('');
    //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(""), 5000);
    expect(browser.getCurrentUrl()).toEqual('');
    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 '' to equal ''.

I'm trying to click on '0 - Bootstrapping' under Tutorial after going to https://docs.angularjs/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');
    dropdownToggle.click();
    menuItem.click();

    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs/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/tutorial/step_00"), 5000);
    expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs/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/tutorial' to equal 'https://docs.angularjs/tutorial/step_00'.

• javascript
• node.js
• angular
• jasmine
• protractor

• Please read the solution, it mentions to use element.all(by.css('.nav-index-listing a')).get(0).click(); and not element.all(by.css('.nav-index-listing')).get(0).click();. You have to also mention the "a" tag in the selector. – Saddam Pojee Commented Nov 26, 2018 at 3:29
• Is it solved? If yes, then please accept the solution. – Saddam Pojee Commented Dec 6, 2018 at 7:09

2 Answers 2

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/tutorial/step_00"), 5000);    
   expect(browser.getCurrentUrl()).toEqual('https://docs.angularjs/tutorial/step_00');  
   

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

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.