E2E TESTS WITH CYPRESS 

Are you looking for a developer friendly end-to-end framework for your Angular projects? Create your e2e tests with Cypress! In this post we will get started with Cypress and create our first e2e test for an example angular project.

For a more information on all the features of cypress you can go to their website cypress.io.

We build from an example angular project from a previous post on unit testing with Jest. The complete code can be found on github here.

Setup

First of all we need cypress as a (dev) dependency.

npm i cypress -D

We now define two useful commands in our package.json.

"scripts": {
    ...
    "cypress": "concurrently \"npm run serve.mock\" \"cypress run\"",
    "cypress:open": "cypress open"
  },

Where cypress starts our local environment and runs the tests against it and cypress:open opens the Cypress Test Runner. In the test runner we can run individual tests and see what happens in the test browser. (More on the test runner later in this post)

We also want to remove Protractor as the e2e runner of our project. Remove the protractor dependency and add the following.

npm i @nrwl/cypress @nrwl/workspace -D

These are used as the e2e runner in the angular.json file.

"e2e": {
    "builder": "@nrwl/cypress:cypress",
    "options": {
        "cypressConfig": "cypress.json",
        "tsConfig": "cypress/tsconfig.json"
    }
}

In the cypress/tsconfig.json file we have to include our tests. We will put them in the integration folder.

"include": [
      "integration/*.ts",
      "../node_modules/cypress"
]

The cypress.json file contains configuration to override the defaults.

{
    "baseUrl": "http://localhost:4200",
    "integrationFolder": "cypress/integration",
    "supportFile": false,
    "video": false
}

Here we see that we will not talk about video or support files in this post and specify where our tests can be found. We are now all set for the first run… (with no tests)

Our first e2e test

With end-to-end tests we try to simulate user behaviour. Mostly they are heavy and expensive to run so you should try to test only the critical functionality. In our app we want to test the user getting the status.

Start off with creating a file get-status.spec.ts in the cypress/integration folder.

describe('Get status', () => {
    it('should visit the homepage', () => {
        cy.visit('/home');
    });
});

Here we see that we describe the scenario of “Get status”. It starts by navigating to our homepage. The cy object is used to make calls to the cypress api.

Now run the cypress:open command and click on our test.

The next step would be that the user clicks on ‘Get status’. The Cypress Test Runner helps with selecting the button without going back to the code. Click on the target symbol (on the left of the url) and select the button.

We can even copy the cypress selector and paste it into our test.

describe('Get status', () => {
    it('should visit the homepage', () => {
        cy.visit('/home');
    });

    it('should start with showing no status', () => {
        cy.get('.status').contains('no status');
    });

    it('should get status OK when clicking Get status', () => {
        cy.get('button').click();
        cy.get('.status').contains('OK');
    });
});

We click and check if the status is updated correctly. All the steps are green!

Further steps

This was just a simple test. You can also write in input fields or set reusable test data into fixtures. Cypress has a rich api but this is our of scope for this post.

The Cypress Test Runner also has more features that we have mentioned here. Like clicking through your test step by step while inspecting DOM elements and the console at every selected moment. The goal was to get you started.

Hopefully you can now get up and running and create e2e tests with Cypress for your own Angular project. Happy Cypressing!