Protractor and Headless Chrome

By Tyler Korff

BugReplay Guest Blog Written by Matthew Lilley
=
Following our previous article Up and Running with Headless Chrome, this article will briefly explore both Protractor and Headless Chrome, what they are, and when and why you should use them. Next, we’ll put them to practice by testing a simple Angular 4 application, end-to-end, with Protractor, which will use Headless Chrome.

First, what’s Protractor? From the Protractor site: “Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.”

It’s used to simulate actions you expect users to take within your application, and test the outcomes against your expected outcomes.

And Headless Chrome? To put it simply, it’s a reference to using Google Chrome with Headless Mode enabled. Headless Mode allows Chrome to run without a graphical user interface (GUI), so it doesn’t need to render the browser for humans.

But Why? In a word, performance.

For a small application, you might not initially see the benefit of using Headless Chrome with Protractor, but as your application grows, and you amass a large collection of complex tests, performance can quickly become a factor. Waiting around for your tests to finish isn’t fun, and as always, time is money.

Want to know more? If you haven’t already, you should check out our previous article Up and Running with Headless Chrome, which is a thorough write up of using Headless Chrome natively, and with various 1st and 3rd party libraries.

Let's get started:

There are a few requirements that are needed to complete this tutorial.

Requirements

NodeJS (nodejs.org)
Angular CLI (cli.angular.io)
Protractor (protractortest.org)

Now that you’ve installed the requirements, we can get started by creating a new Angular application using the Angular CLI. Open up your terminal of choice and run:

ng new protractor-headless

This will create a new Angular project in a folder called protractor-headless. Let’s enter this folder:

cd protractor-headless

And lastly serve the app:

ng serve

Navigate to http://localhost:4200/, you should see your app.

For the purpose of this tutorial, the Angular CLI starting project is perfect, as it comes with a simple spec for the landing page that can be found in /src/app/app.component.spec.

So let’s try it out…

For this to work correctly we need to ensure firstly that both the application is being served at http://localhost:4200/, and we have a selenium web server is running. We already know our app is being served, so let's start a selenium server. Open up another terminal window and run:

webdriver-manager update && webdriver-manager start

In case you’re wondering where webdriver-manager came from, it’s installed as part of the Angular CLI. Here we’re simply updating the webdriver manager, and starting it.

Now that we know that the app is being served and a selenium server is running, we can start out test suite. Open up another terminal in the app root directory (protractor-headless), and run:

protractor protractor.conf.js

You’ll see the Chrome GUI briefly and close, and you’ll then see in your terminal “Executed 1 of 1 spec SUCCESS”.

So we know our test passed. But we clearly aren’t using Headless Chrome, as we saw the Chrome GUI briefly. We need to make Protractor use Chrome with Headless Mode enabled.

Open up the protractor.conf.js, you’ll see:

capabilities: {
 'browserName': 'chrome'
},

We’re going to modify it to:

capabilities: {
 browserName: 'chrome',
 chromeOptions: {
    args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
  }
},

And we’ll rerun the test suite:

protractor protractor.conf.js

Again, you’ll see in your terminal “Executed 1 of 1 spec SUCCESS”. But notice you didn’t see the Chrome GUI briefly like before? That’s our confirmation that we’re indeed using Chrome with Headless Mode enabled.

It’s really that easy!

No comments :

Post a Comment