Talking testing, automation... and anything else.


Protractor: Navigating Pages Without Angular

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:

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

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:

In the beforeEach block, we call qsHomePage.to(), 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

Plusone Linkedin Facebook Twitter Digg Email

2 comments

  1. This was awesome! Thank you! I’ve always struggled with how to marry the navigate to action with the “am I on the right page” check and this illustrates it nicely. Plus I’m also pretty new to javascript, protractor, and angular as well so am up against a bit of a learning curve.

    And I only came here to get a better grasp of EC’s in Protractor but got so much more. Thanks again!

Leave a Reply to brine Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.