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 isavailable 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:
√ should display welcome message
Executed 1 of 1 spec SUCCESS in1 sec.
Excelsior! we now have our Angular e2e tests using puppeteer. You should also notice the output of an xml file:
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.
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:
Voila! We now have VSTS CI builds integrated with our Angular e2e tests. Happy testing times!