AngularJS testing with Protractor- Cannot read property 'click()' of undefined, even though 'undefined' element has already been used

问题

I am developing a test suite for an AngularJS app, and have hit a strange problem while writing one of the test scripts which I can't seem to work out.

The test is:

it('should navigate to the Charts page', function() {
    console.log("Start Charts page test");
    browser.waitForAngularEnabled(false);
    browser.wait(EC.elementToBeClickable(chartsMenuBtn), 5000).then(
        browser.actions().
        mouseMove(chartsMenuBtn).
        chartsMenuBtn.click().
        browser.wait(EC.urlIs(site + '/#/charts'), 5000).
        perform()
    );
})

When I run the test, it fails, giving the reason:

Failed: Cannot read property 'click' of undefined

The element that click() is being called on is chartsMenuBtn, which I have defined globally with:

var chartsMenuBtn = element(by.linkText("Charts"));

So the element clearly is defined. On top of that, Protractor only seems to think that it's undefined at the point at which a call to click() is called on it- but it was actually used twice directly preceding that, so if it was undefined at the point that Protractor is claiming it is, it would surely have been undefined in the two prior uses too...?

I actually put a browser.call(console.log("chartsMenuBtn: ", chartsMenuBtn)); line in just before the browser.wait(EC.elementToBeClickable(chartsMenuBtn), 5000).then( line, just to make sure that it was not undefined, and this prints the following in my console:

chartsMenuBtn:  ElementFinder {
browser_:
 ProtractorBrowser {
   controlFlow: [Function],
   schedule: [Function],
   setFileDetector: [Function],
   getExecutor: [Function],
   getSession: [Function],
   getCapabilities: [Function],
   quit: [Function],
   actions: [Function],
   touchActions: [Function],
   executeScript: [Function], ...

showing that the element clearly is defined at the point at which it is used.

Anyone have any ideas what the actual reason why this test is failing is? How can I get it to run correctly?

回答1:

As already pointed in the comments your then() looks a bit strange. Also you actually don't need it in your case.

Here my suggestion:

it('should navigate to the Charts page', function() {
    console.log("Start Charts page test");
    browser.waitForAngularEnabled(false);
    browser.wait(EC.elementToBeClickable(chartsMenuBtn), 5000);
    //browser.wait(EC.invisibilityOf(blockingElement), 5000);
    chartsMenuBtn.click(); //works, if the element is defined as you said
    browser.wait(EC.urlIs(site + '/#/charts'), 5000);
})

If (as you say) your button is not clickable, when you click() it, try to do browser.wait(EC.invisibilityOf(blockingElement), 5000).

That "isNotClickable" Message is bytheway less wrong than "cannot read property of undefined". "isNotClickable" says it's valid code, but the webpage currently does not let you execute this action. "cannot read property" tells you, your code is wrong.

In general you find your solutions usually, if you just check the Protractor API here. All useful commands are listed there.

来源：https://stackoverflow.com/questions/47219952/angularjs-testing-with-protractor-cannot-read-property-click-of-undefined

标签

angularjs

protractor

automated-tests

undefined