How to install and configure cucumber and cypress on angular project

cypress.json

{
  "integrationFolder": "./e2e/features",
  "pluginsFile": "./e2e/plugins/index.js"
}

e2e--features--home.feature

Feature: Homepage is working

Our frontend is accesible in a browser.

Scenario: Homepage
    Given go to hompage URL
    Then page title is "project name"

e2e--plugins--index.js

const cucumber = require('cypress-cucumber-preprocessor').default;

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

e2e--step-definitions--home.js

import { Given, Then } from 'cypress-cucumber-preprocessor/steps';

Given('go to hompage URL', () => {
  cy.visit('http://localhost:4200');
});

Then('page title is {string}', (expectedPageTitle) => {
  cy.get('h1')
    .invoke('text')
    .should('contains', expectedPageTitle);
});

howto.md

Create a new angular project

npm i -g @angular/cli
ng new <project_name> --routing=true --style=scss
cd <project-name>

Change protractor for Cypress and install cucumber

rm -rf e2e
mkdir -p e2e/features e2e/plugins e2e/step-definitions e2e/support
yarn remove protractor
yarn add -D cypress cypress-cucumber-preprocessor

Update package.json script to run e2e test as shown below and add cucumber pre-processor configuration:

...
{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "cypress open"
},
...
"cypress-cucumber-preprocessor": {
  "step_definitions": "./e2e/step-definitions"
},
"dependencies": {
...

• Add cypress.json file to root folder (besides angular.json).
• Add index.js file to e2e/plugins/ folder
• Add home.feature to e2e/features folder
• Add home.js to e2e/step-definitions folder