AngularJS testing using Protractor- how to close a dialog that opens automatically in order to continue with tests?

Question

I am developing a test suite for one of my company's products- the product has been written in AngularJS, and I am using Protractor as the testing tool.

Having never really used automated testing before, I am still getting to grips with how it works, but have successfully designed and implemented a few tests which pass/ fail correctly based on the criteria.

I am currently writing a number of tests for testing the navigation across all pages of the application, but have encountered an issue when navigating to one particular page.

The page in question is titled 'Charts', and the issue I'm having is this:

When the user/ test script navigates to this page, a dialog is automatically opened presenting options for creating/ editing a chart- obviously, as a user, I can just click the 'cancel' button on this dialog and be taken to the page I was intending to go to, however, I'm having a bit of trouble getting the test script to replicate this...

What I've written so far for this test is:

it('should navigate to the Charts page', function() {
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts');
    // Get the Chart config form's cancel button, in order to close the config form when it opens automatically when browsing to this page, so that other menu buttons are then accessible
    var editGraphForm = element(by.id('chartConfigForm'));
    //var formCancelBtn = element(by.id(
    //dialogMgr.closeAll();
    browser.executeAsyncScript(
        closeDlg());
    expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts')
});

and the closeDlg() function called within this test is defined with:

function closeDlg(){
    //currentOpenDlg = browser.findElement(By.id('chartConfigForm'));
    browser.waitForAngularEnabled(true);
    var editGraphForm = element(by.id('chartConfigForm'));
    var closeDlgBtn = editGraphForm.element(By.id('editGraphCancelBtn'));
    browser.actions().mouseMove(closeDlgBtn).perform();
    closeDlgBtn.click();
}

However, when I run the test, and get to the point where the browser navigates to the 'Charts' page, the dialog box opens automatically, and then, as I'm stepping through the test (I have called browser.pause(); between each step of the test, so that I have to manually tell it to continue after each step), I get a message in the console where I'm running the test from that says:

A Jasmine spec timed out. Resetting the WebDriver Control Flow.

and as I try to continue to step through the test, it appears to be running each of the steps, but the dialog box is never closed, and I eventually get to the end of the test, and a message is displayed stating:

9 specs, 5 failures

If I scroll back up through the console, I can see that the reasons given for the failures are things like:

Failed: unknown error: Element ... is not clickable at point (40, 373). Other element would receive the click: ... (Session info: chrome=61.0.3163.100) (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64)

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Failed: element not visible (Session info: chrome=61.0.3163.100) (Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 10.0.15063 x86_64)

It appears that my tests are trying to continue running, despite the fact that the dialog has not yet been closed, and so none of the required elements are visible... How can I automate clicking the 'Cancel' button on the dialog as part of my test script, so that the rest of the tests can continue running? I am expecting this to be done by the closeDlg() function that I'm calling from within the script, but it doesn't appear to actually be closing the dialog... any suggestions why?

Answer 1

browser.executeAsyncScript() expects a function to execute a callback when it is done. In your case, it never does - hence the timeout-ing test.

And, you don't need executeAsyncScript() here at all - you don't want your closeDlg() function to be executed in the browser, you want it to be executed in Protractor, just call it:

var editGraphForm = element(by.id('chartConfigForm'));
closeDlg();
expect(browser.getCurrentUrl()).toBe('http://192.168.1.212:8080/#/charts')

Answer 2

Per your failure logs, you are using Chrome version 61+ and Chromedriver version 2.33.

I wonder if this is impacted by this bug in Chromedriver, where the element which is not on the viewport was not being scrolled in. I was impacted by this issue and updating to 2.34 resolved this issue. Can you try this one.

Answer 3

What I actually ended up doing to resolve this, was to put my call to closeDlg() inside a browser.call(), i.e. changed my test case to:

it('should navigate to the Charts page', function() {
    browser.waitForAngularEnabled(false);
    browser.actions().mouseMove(chartsMenuBtn).perform();
    chartsMenuBtn.click();
    browser.waitForAngularEnabled(true);
    browser.call(closeDlg);
    expect(browser.getCurrentUrl()).toBe(VM + '/#/charts/');
});