Protractor: Tips for better End-to-End Tests



So last year I shared my initial experiences of getting started with Protractor. Here are some things i’ve learnt since then.

1. Use testSuites

As your Protractor tests grow you are undoubtably going to make use of testSuites. This allows a specific group of tests to be run by passing in the testSuite name into the run parameters.

2. Use only one protractor configuration file

Protractor uses a configuration file which contains various settings for your tests such as baseUrl, tests to run, web driver port etc. When running tests in different places it is tempting to have multiple configuration files. For example a local config and one for your CI server. Avoid this temptation and only have one config file.

3. Manage your Protractor package and dev dependencies

Keeping Protractor up-to-date as well as other packages, such Screenshot Reporter, which you depend upon is really important. If you don’t manage your packages they will quickly become out of date. Luckily using a package.json to store all your packages makes this super easy. You can declare if you want to auto update or use a specific package version when you run npm install.

4. Use a Task Runner such as Gulp

Your protractor tests will just be a small part of your JavaScript eco system. Using a Task runner can help to keep all your tasks in a single place. It also means it’s very simple for anyone in the team to run the Protractor Tests.

5. Learn how to Debug Protractor Tests

My experience is that writing E2E WebDriver tests in Java or C# is a lot easier because the IDE, such as Visual Studio, gives you lots of guidance. As Protractor Tests are JavaScript you get less help so need to understand how to debug. The two main options are browser.pause() and browser.debugger(). Aside from the Protractor debug commands I’d also recommend learning how to use browser development tools such as Chrome Dev tools to help debug JavaScript.

6. Use Protractor for non-angularJs sites only when necessary

Protractor can be used to test non-AngularJS sites but i’d only recommend this when testing a user-flow which jumps out of your AngularJS site, for example page redirects. I would suggest not using this capability to mean you can test non-Angular sites using Protractor.

7. Use other node packages to do stuff

The joy of using Node is that Node Package Manager allows you to do loads of stuff. An example is http-request which you can use to call API’s in your test flow. This is particularly useful if you want to setup some data via a direct API call.

8. Use Page Object Model

Just do it.

9. Multi Thread your Tests

In Protractor it’s so easy to run your tests in parallel and across multiple browsers. Even with a handful of tests you are going to have to look at running tests in parallel for time saving benefits. Running tests in parallel also forces you to have independent tests which is a good way to keep tests maintainable.

10. Handling Cookies and Sessions

Protractor by design does not open/close the browser between specs. This is useful in one way because it speeds up your tests. Closing and Opening browsers between tests has a significant footprint. There are cases though when you need to potentially close a browser to at least clear cookie or session history. In this case you have a couple of options. Firstly WebDriver can interact with cookies or alternatively you can add restartBrowserBetweenTests: true to your protractor config file.

11. Learn AngularJS

Having an understanding of the underlying technology is a huge help in writing good tests. As you’ll probably be using Protractor to tests AngularJS sites then you should definitely learn Angular. Build your own site in Angular and write some tests for it. There are tonnes of great sessions on Pluralsight to help. Learn also how to unit test AngularJS code as this will give you a better appreciation of where to place your test efforts.

12. Use ES6 Generators

At AngularConnect Uri Shaked did a great talk on how to use ES6 generators to control the flow of your Protractor Tests. This is particularly useful if you need certain tasks to occur in a  particular sequence.

13. Understand what Protractor does

Protractor is a wrapper around WebDriver specifically designed for AngularJS apps. This means most of the benefit will come when using AngularJS apps. The two primary benefits i’ve found are:

  • Page synchronisation – As protractor hooks into the angular digest cycle it makes one of the typical problems with E2E tests, When has the page loaded?, problems a lot easier to manage.
  • Angular Specific Locators – by.Binding, by.Model, by.Repater gives you more options for finding stuff on a page.

With this in mind i wouldn’t ever consider using Protractor for a site which isn’t built in AngularJS.

Thats more than enough tips for now.

Enjoy Protractor.


One thought on “Protractor: Tips for better End-to-End Tests

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s