Add Cypress to New/Existing Angular Project

This blog post demonstrates steps to setup Cypress with Angular. Cypress can be initialized using @briebug/cypress-schematic or manually. See the source code uploaded to Github

Automatic Initialization @briebug/cypress-schematic

1. First, Install Cypress using the following command in Angular project

npm i -D cypress

2. Initialize and Configure the Cypress with @briebug/cypress-schematic plugin. This will generate cypress directory, cypress.json, and updates package.json file

ng add @briebug/cypress-schematic

This will ask to remove Protractor from project with prompt “Would you like to remove Protractor from the project?”, enter Y if want to do so.

4. Create new test under cypress/integration directory

describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          

    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});

3. Now run tests created under cypress/integration using the following command

ng e2e

Home Page e2e Test

Manual Initialization

1. First, Install Cypress using the following command in Angular project

npm i -D cypress

2. Create minimal cypress.json file under project home directory as shown below

{    
   "integrationFolder": "cypress/integration",     
   "baseUrl": "http://localhost:4200",  
   "env": {  
     "username": "username",  
     "password": "password"  
   }  
}

3. Create cypress, cypress/integration directories in the project directory. And create tsconfig.json file under cypress directory

{  
  "extends": "../tsconfig.json",  
  "include": \["../node\_modules/cypress", "\*\*/\*.ts"\],  
  "compilerOptions": {  
    "sourceMap": false  
  }  
}

4. Create new test under cypress/integration directory

describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          

    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});

5. Now run tests created under cypress/integration using the following command

ng e2e

Code uploaded to Github for reference