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 usethem. Next, we’ll put them to practice by testing a simple Angular 4application, 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 auser 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 checkout 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 upyour 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 thatcan 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 andrun:
webdriver-manager update && webdriver-manager start
In case you’re wondering where webdriver-manager came from, it’s installed aspart 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 HeadlessMode 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 specSUCCESS”. 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!
