DEV Community

Pavan K Jadda
Pavan K Jadda

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();    
});   
});
Enter fullscreen mode Exit fullscreen mode

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

ng e2e
Enter fullscreen mode Exit fullscreen mode


Home Page e2e Test

Manual Initialization

  1. First, Install Cypress using the following command in Angular project
npm i -D cypress
Enter fullscreen mode Exit fullscreen mode

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"  
   }  
}
Enter fullscreen mode Exit fullscreen mode

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  
  }  
}
Enter fullscreen mode Exit fullscreen mode

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();    
});   
});
Enter fullscreen mode Exit fullscreen mode

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

ng e2e
Enter fullscreen mode Exit fullscreen mode

Code uploaded to Github for reference

Discussion (0)