DEV Community

Pavan K Jadda
Pavan K Jadda

Posted on • Edited 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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️