Getting Started with Cypress e2e Testing in Angular

Automating e2e tests is an important aspect of software engineering. It helps shipping updates often while quickly being able to see that the software is most likely still working properly. Unfortunately such tests are usually time consuming in creation and execution.
We have a look at how cypress.io can be used for front-end testing in an Angular app to see how it compares to Selenium, Protractor and co. The Cypress website tells us it’s “A Test runner built for humans”. Let’s see if this claim is true.

We go through the process of integrating Cypress into an Angular project followed by writing and running a test. The example project we are using comes from the heroes tutorial that you probably know. After downloading the tutorial’s sources and installing it’s dependencies via npm, we add the Cypress package:

npm i cypress --save-dev

This command not only installs the Cypress node package but also creates a “cypress” directory in our Angular project. Within that directory we find examples for fixtures and tests amongst other stuff. The “integration” directory is the one wherein we write our tests later.

Next we create a cypress open command in the scripts section of our package.json alongside the `ng` command and others (that are omitted below):

It allows us to fire up the Cypress Electron app by executing `npm run cypress:open`. Once started, the Cypress app shows us the example tests that we can explore.
Before we use this app further though, we should write our own test. For that we create a new test file from our project directory:

touch cypress/integration/sample_spec.js

The Cypress app has auto reloading. So, if we switch back to it we can see the sample_spec.js file listed.

A click on the sample_spec.js opens the Chrome browser, where we have the following view:

So, Cypress notifies us that our test file does not contain a test yet. Let’s change that by putting content into sample_spec.js:

Probably this looks quite familiar to you. What you see is the BDD syntax of mochajs with its expressions “describe”, “it”, and so on. Cypress itself offers a lot of test methods that we can access through the cy object.
No servers, drivers or other dependencies are needed. Only one thing is left to run the test. Of course we need to start the Angular app now to give Cypress a website to test:

npm start

Back on the Cypress app’s test browser the test has already run. We have the following result:

On the left hand side the test results are displayed. While on the right hand side the page under test is shown. The test is green since the page contains the word “Heroes”. You could even inspect the right hand side and debug. In the end it’s a browser.

Let’s compare our Cypress test browser view to the protractor output of a similar test:

I don’t know about you, but I prefer the Cypress view.

To conclude, the Cypress installation is straight-forward. There is zero configuration needed. Most importantly the test runs quickly and a nice interface shows exactly what went well or wrong. Cypress appears way more user friendly than for example Protractor. So, after this first steps, Cypress seems to be really the “Test runner built for humans”.

This is all it needs to get started with Cypress in Angular. For further steps and information to all the great features the excellent Cypress website https://www.cypress.io/ should be consulted.