Run Cypress e2e Tests in an Angular project on TeamCity

With a few simple steps you can run your Cypress e2e Tests headless on TeamCity.


Configure app

In your Angular 4/5/6+ app, install Cypress, then serve the app on localhost and run cypress in a seperate terminal window.

$ npm i cypress --save-dev
$ ng serve
<new terminal>
$ .\node_modules\.bin\cypress open
(note: I added this script to package.json to avoid having to type the absolute path to cypress)
"cypress": "cypress open"
you can now run
$ npm run start cypress

A window will appear informing you of some examples that cypress has created in your project. You should be able to run the generated examples now.

Cypress first run

So far so good. But we want to run this headless on TeamCity, let’s set up the build scripts in package.json. First a bit of explanation:

When using ng-serve, the process blocks and does not allow running further scripts. That’s why I used http-server together with start-server-and-test. This starts a http server in a given directory, starts the server and waits for the url to respond, then starts cypress. Let’s install these to the Angular project.

npm i http-server && npm i start-server-and-test --save-dev

Add these scripts to package.json

"ci:serve": "ng build --prod && http-server dist -p 4200",
"cypress:run": "cypress run --reporter teamcity",
"cypress:ci": "start-server-and-test ci:serve http://localhost:4200 cypress:run",
  • The first script builds the app and serves it on localhost:4200.
  • The second script starts cypress headless with the teamcity reporter thats already built into cypress.
  • The third script combines everything and makes sure the tests are started only after the server is running.

On to the fun part.


TeamCity config

In Teamcity, create a project for your Angular app, add two build steps. 
The first build step should install the packages, the second should run cypress:ciYou could also merge both steps, but I like to separate.

Step 1: npm install packages
Step 2: build and test

You can even set up your artifact paths in the build configuration to grab the generated mp4 files of your tests:

Artifacts

Run the build!

So there you have it! Cypress e2e tests with TeamCity reports and generated mp4 Videos as build artifacts that you can watch right in the browser.