Cypress Library e2e with Angular Project

End-to-end tests require a testing environment that closely resembles the production environment. You need to deploy the full application, including the front-end and the relevant back-end parts. For that purpose, back-end frameworks typically support configurations for different environments, like development, testing and production.

The database needs to be filled with pre-fabricated fake data. With each run of the end-to-end tests, you need to reset the database to a defined initial state.

The back-end services need to answer requests with deterministic responses. Third-party dependencies need to be set up so they return realistic data but do not compromise production data.

Since this guide is not about DevOps, we will not go into details here and focus on writing end-to-end tests.

Introducing Cypress

Cypress is an end-to-end testing framework that is not based on WebDriver. There are no Angular-specific features. Any web site can be tested with Cypress.

Reproducible tests

WebDriver-based testing solutions are flexible and powerful but turned out to be slow and unreliable. Cypress aims to improve both the developing experience and the reliability of end-to-end tests

Installing Cypress

In your Angular project directory, run this shell command:

ng add @cypress/schematic

This command does four important things:

1. Add Cypress and auxiliary npm packages to package.json.
2. Add the Cypress configuration file cypress.json.
3. Change the angular.json configuration file to add ng run commands.
4. Create a sub-directory named cypress with a scaffold for your tests.

Writing an end-to-end test with Cypress

In the project directory, you will find a sub-directory called cypress. It contains:

• A tsconfig.json configuration for all TypeScript files in the directory,
• an integration directory for the end-to-end tests,
• a support directory for custom commands,
• a plugin directory for Cypress plugins,
• a fixtures directory for test data.

The test files in integration are TypeScript files with the extension .ts.

As a start, let us write a minimal test that checks the document title. In the project directory, we create a file called cypress/integration/counter.ts. It looks like this:

describe('Counter', () => {
  beforeEach(() => {
    cy.visit('/');
  });
  it('has the correct title', () => {
    cy.title().should('equal', 'Angular Workshop: Counters');
  });
});

Running the Cypress tests

Save the minimal test from the last chapter as cypress/integration/counter.ts.

Cypress has two shell commands to run the end-to-end tests:

Test runner

• npx cypress run – Non-interactive test runner. Runs the tests in a “headless” browser. This means the browser window is not visible.
• The tests are run once, then the browser is closed and the shell command finishes. You can see the test results in the shell output.
• This command is typically used in a continuous integration environment.
• npx cypress open – Interactive test runner. Opens a window where you can select which tests to run and which browser to use. The browser window is visible and it remains visible after completion.
• You can see the test results the browser window. If you make changes on the test files, Cypress automatically re-runs the tests.
• This command is typically used in the development environment.

The cypress open command will open the test runner: