Adding New Angular Modules to Protractor Tests

This post is part of a ten-part series on how to write better Protractor tests. You can find the rest of the series here

From your Protractor test you can write javascript code that will be added as new Angular modules into your client side app. This is a little weird because Protractor runs on node.js (e.g. “server” side, or your laptop) whereas your Angular app is running within the browser (e.g. “client” side).

For a reminder, here’s a diagram about how Protractor works:

protractor-components

Our Protractor test runs as javascript in Node.js on our “laptop” but our Angular app runs in our browser. But what if we want to run code in our browser, but only when we’re running our Protractor tests?

Adding_New_Angular_Modules_to_Protractor_Tests_«_ng-book_com_–_blog

But Protractor makes it easy to write new modules in our Protractor test that will be adding to the client side app. Say we have a test like this:

Why would you ever want to do this? The major reason is that this allows you to configure your application for testing. As much as we want our E2E tests to have 100% parity with a real environment, the fact is, sometimes there are subtle tweaks we want to make when running our tests vs. the production app.

One important configuration you can setup in this manner is mocking HTTP requests, which we cover here.

Learn Protractor in a few hours with our online course

Protractor is a one of the best ways to ensure your app is working correctly because you can write code that acts like a real user. But Protractor can also be confusing and difficult to work with when you're just starting out. We've put together an online course that will help you become a master at Protractor.

You'll save tons of time and frustration learning Protractor because we've worked out everything you need to know. Become a Protractor testing master today!