Cypress in Angular Projects – Complete Guide

1. What is Cypress?

Cypress is a JavaScript end-to-end testing framework that runs directly in the browser.
It has an interactive test runner that shows your application while the tests run, letting you debug visually.

Unlike WebDriver-based tools, Cypress runs in the same run loop as your application, giving it direct access to DOM elements and network requests.

---

2. Why Use Cypress?

Benefits:

• Excellent developer experience with a real-time GUI.
• Time-travel debugging: Inspect the state of the app at each test step.
• Automatic waiting for DOM elements, requests, and assertions.
• Easy network stubbing for API calls.
• Rich error messages and screenshots/video recordings out-of-the-box.
• Strong Angular ecosystem support (many examples & plugins).

---

3. When to Choose Cypress

• You want a visual runner to watch tests execute step-by-step.
• Your team is UI-focused and values fast feedback loops.
• You mostly target modern browsers (Chrome, Edge, Firefox).
• You need easy API mocking alongside UI testing.
• You want minimal setup to start writing tests.

---

4. How to Use Cypress in Angular

Step 1 – Install Cypress

Using Angular CLI schematics:

ng add @cypress/schematic

This will:

• Install cypress.
• Create cypress.config.ts (or cypress.json for older versions).
• Generate example tests in cypress/e2e/.
• Update angular.json with an "e2e" target.

Manual install:

npm install -D cypress

---

Step 2 – Understand Project Structure

After adding Cypress, you’ll see:

cypress/
  e2e/
    spec.cy.ts        # Example test file
  support/
    commands.ts       # Custom commands
    e2e.ts            # Global setup
cypress.config.ts     # Cypress configuration

---

Step 3 – Writing a Test

Example (cypress/e2e/app.cy.ts):

describe('Angular App', () => {
  it('should display welcome message', () => {
    cy.visit('http://localhost:4200');
    cy.contains('Welcome').should('be.visible');
  });
});

---

Step 4 – Running Tests

Run via Angular CLI:

ng e2e

Or directly with Cypress:

npx cypress open    # Opens the interactive GUI
npx cypress run     # Runs tests headlessly

---

Step 5 – Debugging & Screenshots

• Time-travel debugging: Click on any command in the GUI to see the DOM snapshot at that moment.
• Screenshots: Taken automatically on failures.
• Videos: Recorded automatically in headless mode.
• Network stubbing:

  cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
  cy.visit('/');
  cy.wait('@getData');

---

Step 6 – Angular-Specific Tips

• Start the Angular app before tests:

  • Terminal 1:

    ng serve
  • Terminal 2:

    npx cypress open

  Or configure the "e2e" target in angular.json to start the dev server automatically.

• Component testing:
  Cypress now supports Angular component testing using @cypress/angular.

• Waiting for Angular rendering:
  Cypress waits for DOM changes automatically, so you usually don’t need extra waits.

---

7. Cypress CLI Commands

Command	Description
npx cypress open	Open interactive runner
npx cypress run	Run tests headlessly
npx cypress run --browser firefox	Run in a specific browser
npx cypress verify	Check installation
npx cypress cache clear	Clear Cypress cache

---

8. When Cypress Might Not Be Ideal

• If you need Safari/WebKit support (not supported).
• If you want true multi-tab testing (Cypress runs in a single tab).
• If you require cross-origin testing (Cypress has limitations here, though it’s improving).

---

9. Summary

Cypress is ideal if you want:

• Fast setup.
• Visual debugging with real-time feedback.
• Easy network mocking.
• Great developer UX.

It’s less ideal if you must cover all browsers including Safari, or if you need multi-tab/multi-page automation.

---