Cypress with Angular and TypeScript

Cypress is a popular end-to-end (E2E) testing framework, and it works very well with Angular applications written in TypeScript. Here’s a complete overview of how to set up and use Cypress with an Angular + TypeScript project.

1. Install Cypress in Your Angular Project

First, install Cypress via npm:

npm install cypress --save-dev

You may also want to install @types/cypress for TypeScript support:

npm install --save-dev @types/cypress

2. Configure Angular Project for Cypress

Step A: Add a new cypress folder

Inside your Angular project root:

/cypress
  /e2e
    spec.cy.ts
  /support
    e2e.ts
    commands.ts
cypress.config.ts

If you use Angular CLI v14 or later, you can skip Protractor and create Cypress scaffolding manually or via the CLI.

3. Create Cypress Configuration File

Create or update the cypress.config.ts file at the root:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    supportFile: 'cypress/support/e2e.ts',
    specPattern: 'cypress/e2e/**/*.cy.ts',
  },
});

4. Add Scripts to package.json

"scripts": {
  "start": "ng serve",
  "cypress:open": "cypress open",
  "cypress:run": "cypress run",
  "e2e": "ng serve & cypress run"
}

5. Write a Simple Test

Create a file cypress/e2e/app.cy.ts:

describe('My First Test', () => {
  it('should load the homepage', () => {
    cy.visit('/');
    cy.contains('Welcome'); // Adjust according to your app
  });
});

6. Run Cypress Tests

In GUI mode:

npm run cypress:open

In headless mode:

npm run cypress:run