Cypress & Angular Integration

A walk through of the steps required to get Cypress integrated into an Angular project.

Install Cypress

npm install cypress --D

Use Nrwl Cypress builder

Use the Nrwl Cypress builder to get ng e2e to run Cypress tests, instead of Protractor tests. @nrwl/cypress depends on @nrwl/workspace.

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

Do the following changes to the angular.json.

• Change the e2e builder from @angular-devkit/build-angular:protractor to @nrwl/cypress:cypress.

• Remove the protractorConfig option.

• Set the cypressConfig option to ./cypress.json.

• Set the tsConfig option to ./tsconfig.json.

Your e2e config should end up looking something like the following:

{
  "e2e": {
    "builder": "@nrwl/cypress:cypress",
    "options": {
      "devServerTarget": "PROJECT_NAME:serve",
      "cypressConfig": "./cypress.json",
      "tsConfig": "./tsconfig.json"
    },
    "configurations": {
      "production": {
        "devServerTarget": "PROJECT_NAME:serve:production"
      }
    }
  }
}

Add npm scripts

Add npm scripts to facilitate running Cypress

{
  "cypress:open": "./node_modules/.bin/cypress open",
  "cypress:run": "./node_modules/.bin/cypress run"
}

Setup initial Cypress directory scaffolding

Run npm run cypress:open to run Cypress for the first time, which does initial scaffolding under a /cypress directory.

Create Cypress config file

Create a cypress.json config file at the root level with the following.

{
  "baseUrl": "http://localhost:4200/",
  "integrationFolder": "./cypress/integration/"
}

Add support for TypeScript test files

Technically, this is optional since you could just write the tests in JavaScript, but TypeScript is awesome :D, so let's leverage it. It will require installing the following 2 dependencies.

npm install @cypress/webpack-preprocessor --D
npm install ts-loader --D

Create the following plugin file

cypress/plugins/ts-preprocessor.js

const wp = require('@cypress/webpack-preprocessor');

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
    ],
  },
};

const options = {
  webpackOptions,
};

module.exports = wp(options);

Update cypress/plugins/index.js to the following to use the plugin.

const tsPreprocessor = require('./ts-preprocessor');

module.exports = on => {
  on('file:preprocessor', tsPreprocessor);
};

Create a tsconfig.json file for Cypress

Create the following file inside the /cypress directory.

cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": ["integration/*.ts", "support/*.ts", "../node_modules/cypress"]
}

Update your .gitignore

Add the following to your .gitignore to prevent checking in videos & screenshots Cypress takes during tests.

cypress/videos/
cypress/screenshots/

Do some Protractor cleanup

If you decide to completely replace Protractor with Cypress, don't forget to remove Protractor as a dependency and delete any Protractor config files.

Well that's it! Now you should be all set up and ready to start writing tests using Cypress! Good luck!