Run Cypress for Angular End-to-End Testing | Step-by-Step Guide

End-to-end (E2E) testing is an essential part of the software development lifecycle, ensuring that applications function correctly from the user’s perspective. Cypress is a modern JavaScript-based testing framework designed for efficient and reliable E2E testing. It is particularly powerful when used with Angular applications due to its ability to execute tests in a real browser environment with fast execution and simple syntax.

This article will provide a comprehensive guide on how to set up and run Cypress for E2E testing in Angular projects, covering:

✅ Installing Cypress CLI ✅ Writing E2E tests for Angular applications ✅ Automating UI tests using the Cypress Dashboard

By the end of this guide, you will be able to implement robust automated tests for your Angular application.

---

1. Installing Cypress CLI

Before writing Cypress tests, you need to install Cypress CLI in your Angular project.

1.1 Prerequisites

Ensure that you have the following installed:

• Node.js (LTS version recommended)
• Angular CLI (@angular/cli)
• A working Angular application

1.2 Install Cypress

Navigate to your Angular project root directory and install Cypress as a development dependency:

npm install cypress --save-dev

Once installed, open Cypress for the first time using:

npx cypress open

This will create a default Cypress folder structure inside your project:

/cypress
  ├── fixtures/
  ├── integration/
  ├── plugins/
  ├── support/
  ├── cypress.json

These files provide the necessary configuration for running E2E tests.

---

2. Writing End-to-End Tests for Angular

2.1 Creating a Test

Navigate to the cypress/integration folder and create a new test file, e.g., login.spec.js.

describe('Login Page', () => {
  it('should allow a user to log in', () => {
    cy.visit('/login');
    cy.get('input[name=email]').type('testuser@example.com');
    cy.get('input[name=password]').type('password123');
    cy.get('button[type=submit]').click();
    cy.url().should('include', '/dashboard');
  });
});

2.2 Running the Test

Run Cypress in headless mode using:

npx cypress run

For interactive mode:

npx cypress open

This will launch the Cypress Test Runner, where you can select and execute your tests in a browser.

---

3. Automating UI Tests Using Cypress Dashboard

Cypress provides a dashboard service to record and monitor test results in CI/CD pipelines.

3.1 Setting Up Cypress Dashboard

Create a Cypress account and log in. Then, run:

npx cypress cloud

This will generate a projectId in cypress.json. Now, you can configure your CI/CD pipeline to execute Cypress tests and send reports to the dashboard.

3.2 Running Tests in CI/CD

Add Cypress to your CI/CD pipeline (e.g., GitHub Actions, GitLab CI/CD, or Jenkins). Example GitHub Actions workflow:

name: Cypress Tests

on: [push]

jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run Cypress tests
        run: npx cypress run --record --key YOUR_CYPRESS_RECORD_KEY

With this setup, Cypress will automatically run tests and upload results to the Cypress Dashboard.

---

Conclusion

Using Cypress for E2E testing in Angular applications simplifies automated testing with powerful features like real-time execution, UI testing, and integration with CI/CD pipelines. We covered:

• Installing Cypress CLI
• Writing and running E2E tests
• Automating tests using the Cypress Dashboard

Start integrating Cypress into your Angular projects today to improve reliability and efficiency in your testing workflows!