Run Cypress e2e Tests in an Angular project on TeamCity

Image for post
Image for post

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.

Image for post
Image for post
Step 1: npm install packages
Image for post
Image for post
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:

Image for post
Image for post
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.

Image for post
Image for post

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store