Mastering Cypress with Angular: Easy Setup & Testing Guide for Beginners

End-to-end (E2E) testing is essential for delivering high-quality web applications. If you're building an Angular app and want a painless, reliable, and fast E2E testing experience, Cypress is your best friend.

In this blog, we'll walk you through how to set up and use Cypress with Angular, even if you're just getting started.

🔍 What is Cypress?

Cypress is a modern, open-source end-to-end testing framework built for the web. It runs tests in the browser and gives you an intuitive UI to see your tests running live, making debugging incredibly easy.

Why Cypress?

• Fast and reliable test execution

• Easy to install and use

• Real-time reloads and detailed error messages

• Time-travel debugging

• No need for Selenium/WebDriver

🛠️ Prerequisites

Before we start, make sure you have:

• Node.js (v14+)

• Angular CLI (v14+)

• An Angular project

🚀 Step 1: Install Cypress in Your Angular Project

Open your terminal and run:

npm install cypress --save-dev

Once installed, open Cypress:

npx cypress open

This will:

• Create a cypress/ folder

• Create the cypress.config.js file

📁 Project Structure Overview

After running npx cypress open, you’ll see folders like:

/cypress
  /e2e
  /support
cypress.config.js

This is where your tests and support files will live.

🧪 Step 2: Add a Simple Test

Let’s create a basic test for your Angular home page.

Create a file in cypress/e2e/home-page.cy.js:

describe('Home Page', () => {
  it('should load the homepage and contain title', () => {
    cy.visit('http://localhost:4200');
    cy.contains('Welcome'); // Replace with actual text from your home page
  });
});

🧪 Step 3: Update Scripts in package.json

Add a script for easier test running:

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

🌐 Step 4: Running Cypress with Angular

Start your Angular app:

ng serve

In a separate terminal, run:

npm run cypress:open

You’ll see Cypress open in a GUI where you can run your test.

🛡️ Step 5: Improve with Test Selectors

Avoid flaky tests by using data-testid attributes in your Angular components:

<button data-testid="login-button">Login</button>

Then in Cypress:

cy.get('[data-testid="login-button"]').click();

🔄 Optional: Use Cypress Component Testing (Advanced)

If you want to test Angular components in isolation, Cypress now supports Component Testing (experimental with Angular). You can explore this in future updates.

✅ Pro Tips for Smooth Cypress + Angular Testing

• Use baseUrl in cypress.config.js:

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
  },
});

• Mock APIs using cy.intercept()

• Use beforeEach() for repeated setups

• Group tests using describe() blocks

🌍 Final Thoughts

Cypress makes E2E testing fast, fun, and frustration-free—especially with Angular. With just a few steps, you can start testing your Angular components and flows like a pro.

🔗 Useful Links

• Cypress Docs

• Angular CLI

• Cypress GitHub