New Toronto Group
 - New Toronto Group

AngularJS Protractor and External Link

| Posted on April 17th, 2014 by Alain Thibodeau


Protractor is the new end to end testing framework for AngularJS applications. For those who have worked in the past with the old Angular Scenario Runner you know Protractor is great news!

This post is a little reminder: When targeting a page with no Angular on it, you must use the browser’s underlying driver.

Example:

I want to test one link in a list of items that open in a new window. The list is part of an Angular application, but the new window is not an Angular application.

Steps:

  1. Click on first item of the list (opens external link in new window)
  2. Get new browser window handle
  3. Switch to this new window
  4. Perform expectation

 So, the test would look something like this:

  it('Should verify new window url', function () {
    page.list.get(0).click().then(function () {
        browser.getAllWindowHandles().then(function (handles) {
            newWindowHandle = handles[1];
            browser.switchTo().window(newWindowHandle).then(function () {
                expect(browser.getCurrentUrl()).toMatch(/\/url/);
            });
        });
    });
});

Running this gives the error:  Error while waiting for Protractor to sync with the page: {}

The error is not telling us what is really going on…What is happening is that the external link in the new window is NOT an Angular application. Therefore we need to use the webdriver directly. Protractor’s browser wraps webdriver, so we can get access to driver directly from browser.

The test now looks like this:

  it('Should verify new window url', function () {
    page.list.get(0).click().then(function () {
        browser.getAllWindowHandles().then(function (handles) {
            newWindowHandle = handles[1];
            browser.switchTo().window(newWindowHandle).then(function () {
                expect(browser.driver.getCurrentUrl()).toMatch(/\/url/);
            });
        });
    });
});

Once this is fixed, we will notice another issue. That is the next tests are now running in the new window. There are several ways of fixing this, one is to close the new window and switch back to the original application window. In most cases Protractor should switch back to the application window upon closing the new window, but it is better to not assume.

Our final test now looks like this:

  it('Should verify new window url', function () {
    var appWindow = browser.getWindowHandle();
    page.list.get(0).click().then(function () {
        browser.getAllWindowHandles().then(function (handles) {
            newWindowHandle = handles[1];
            browser.switchTo().window(newWindowHandle).then(function () {
                expect(browser.driver.getCurrentUrl()).toMatch(/\/url/);
                browser.driver.close().then(function () {
                     browser.switchTo().window(appWindow);
                 });
            });
        });
    });
});

 

Posted in AngularJS, protractor  | Comments (2)

Comments (2)

  1. Levi:
    Dec 05, 2014 at 12:19 AM

    Awesome documentation and explanation, helped me a lot. Levi-Scratch-It Inc Dev

  2. Larry:
    Apr 14, 2016 at 06:03 PM

    Thank you!


Add a Comment





To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey

Allowed tags: <b><i><br>Add a new comment: