Protractor: Navigating Pages Without Angular

Aug 8, 2015

compassI'm currently using Protractor to build e2e test automation for my team. And while Protractor is especially helpful for Angular applications, my app is non-angular. This has presented some challenges... and because of it's asynchronous nature, some truly maddening challenges at that :)

Case in point: page loads.

Because I don't have Angular telling Protractor when a page has finished loading, I need to handle it myself. Thus I stole some ideas from my work with Geb, namely, the to() and at() methods. These two methods navigate to, wait for, and verify all page changes. Here's how it works...

First, in my basePage (that is extended from all other pages), we have two friendly methods: = function() {
    var that = this;
    return browser.wait(function() {
        // call the page's pageLoaded method
        return that.pageLoaded();
    }, 5000);
}; = function() {
    browser.get(this.url, 5000);
    // wait and verify we're on the expected page

These methods rely on each page having the properties url and pageLoaded. For example, the page object could include:

var QsHomePage = function() { this.url = ''; // pageLoaded uses Expected Conditions `and()`, that allows us to use // any number of functions to wait for, and test we're on a given page this.pageLoaded = this.and( this.hasText($(''), 'Quality Shepherd') ); ...

The url property is just a string. It can be fully qualified, or relative (which then gets appended to the baseUrl). The pageLoaded property uses Protractor's [Expected Conditions]( and() method, that allows you to use any number of functions to both wait for the page, and test that we're on the correct page.

In this example, I only need one EC function, hasText, but you can add as many as necessary, separated by commas (eg. you could wait for a spinner to NOT be displayed, for a header to be displayed, AND check the page title). Each function need only return true.

Finally, we can call these in our specs thusly:

describe('Quality Shepherd blog', function() { beforeEach(function() {; });

it('home link should navigate home', function() {;


In the beforeEach block, we call, which calls both the to() method to navigate to the page, and the at() method to wait/verify the page.

Then in the spec, we click on the home page link, and use at() inside an expect() to verify we're on the right page. We can do this because we return the result of the Expected Conditions. If all are true, the test passes; if even one returns false, the test fails.

The result is a clean way to navigate pages without Angular.

I use this in my protractor_example code up on the GitHub...