How to setup Angular e2e tests on VSTS CI Builds using Puppeteer

  • Sun Feb 25 2018
  • angular
  • e2e
  • vsts
  • ci

I’ve recently been working on an Angular 4 project, using Visual Studio Team Services to manage our sprints, builds and deployments. Compared to other solutions (e.g. Atlassian Suite .etc), I think VSTS brings a bunch of functionality to the table.

As mentioned, we’re able to manage our sprints, git repos, test plans, tests, continuous integration & deployment all through the one service. This is pretty nifty, and works great. Before I sound even more like a covert advertisement for VSTS, it has its downsides; unless you’re operating directly in the land of something like .NET, information on setup for CI/CD processes can be a little hard to come by. I did find a couple of great articles on unit test setup, but not much on protractor e2e tests. That’s why I decided I’d share my setup for running Angular e2e tests on VSTS CI…. See where I went with that rambling segue?

Get on with it… (otherwise known as ‘setup protractor.conf.js’)

I’ll presume that you’re familiar with a standard Angular cli project. That being the case, jump in to your Angular project and whip up a command line.

npm i -D jasmine-reporters puppeteer protractor-console-plugin

What we need to do first is (using the command above) install the required packages; for reporting we’ll need jasmine-reporters, puppeteer (because, well, it’s in the article name) and the bonus package, protractor-console-plugin. The last package, protractor-console-plugin, isnt acutally a requirement… but it can be useful having tests flag when a console error occurs on the client.

Once you’ve got the packages installed, we then need to throw a couple of new lines into the file protractor.conf.js (found in the project root directory).

* if you want less mucking around… the full protractor.conf.js.file containing the below changes is available here.

First up, add the new reporter + the path to the puppeteer chrome executable to the import declarations at the top of the file:

Then, within the exports.config object, add a new property (chromeOptions) to the chrome capability that defines a binary path for chrome:

still within exports.config — in the onPrepare() function — add the junit xml reporter from jasmine-reporters:

And for the final bonus round… you can (optionally) add the handy console plugin as an additive to the exports.config:

Having done all that hard work, now lets run our super exhaustive test suite.

npm run e2e

and we should have the below pop up on the commandline:

angular-e2e-vsts-ci-example App
 √ should display welcome message

Executed 1 of 1 spec SUCCESS in 1 sec.

Excelsior! we now have our Angular e2e tests using puppeteer. You should also notice the output of an xml file:

e2e/results/e2e-results-junit.xml

VSTS will use this xml file in its build task to grab the test results.

Setup VSTS Build

With our Angular project now running e2e puppeteer tests, lets setup our build definition.

VSTS Build UI

Jump in to whichever build definition you want to use the tests in, and add a task to run the e2e tests. Following the e2e test run, add a Publish Test Results task. This task will use the JUnit xml file produced from the protractor reporter to inform VSTS of the e2e test results.

With the new test tasks in place, run the build. You should now see e2e tests appear in the build results:

VSTS Test Success UI

Voila! We now have VSTS CI builds integrated with our Angular e2e tests. Happy testing times!

* If you want an in-depth look at the code for this project, it can be found on github.com/dan-harris/angular-e2e-vsts-ci-example

* As always - constructive feedback, opinions and comments are all welcome. Thanks for reading!