End-to-End Testing with Cypress and Angular

End-to-End Testing using Cypress and Angular - A Beginner’s Guide to Flawless Apps

The Importance of End-to-End Testing for Angular Apps

E2E testing is the ultimate functionality test, simulating user interactions from start to finish. This is crucial for Angular apps because:

• Complex behaviors: Angular handles dynamic UIs (forms, routers, APIs) that need careful inspection.
• High user expectations: 88% of users will abandon an app after two failures
• Faster releases: Teams using E2E testing see fewer production errors 

Cypress excels here with rapid reloading, real-time automatic waits, and a clear syntax, making it a top choice for Angular developers.

Setting Up Cypress in Your Angular Project

Prerequisites

1. Angular CLI installed.
2. A basic understanding of Angular components and services.

Step 1: Install Cypress

Run the following in your project directory:

npm install cypress --save-dev  

Step 2: Open Cypress

Initialize Cypress and generate boilerplate files:

npx cypress open  

Cypress creates a cypress folder with example tests.

Step 3: Configure Cypress for Angular

Update cypress.config.ts:

import { defineConfig } from 'cypress';  
export default defineConfig({  
  e2e: {  
    baseUrl: 'http://localhost:4200', // Your Angular dev server URL  
    setupNodeEvents(on, config) {},  
    specPattern: 'cypress/e2e/**/*.spec.ts',  
  },  
});  

Writing Your First E2E Test

Let's create an E2E test for a todo list app where users can add or delete tasks.

1. Create the Test File

Write cypress/e2e/todo.spec.ts:

describe('Todo List', () => {  
  beforeEach(() => {  
    cy.visit('/'); // Navigate to the app homepage  
  });  
  it('can enter a new item', () => {  
    cy.get('[data-cy=todo-input]').type('Learn Cypress{enter}');  
    cy.get('[data-cy=todo-list] li').should('have.length', 1);  
  });  
  it('will remove an item', () => {  
    cy.get('[data-cy=todo-input]').type('Delete this{enter}');  
    cy.get('[data-cy=delete-btn]').click();  
    cy.get('[data-cy=todo-list] li').should('not.exist');  
  });  
});  

2. Run the Test

npx cypress open  

Click the test file and watch Cypress execute in real-time!

5 Pro Tips for Effective Cypress Tests

1. Use custom data attributes (data-cy=xyz) to avoid brittle selectors.
2. Mock API Responses using cy.intercept() to test without backend dependency.
3. Use Hooks like beforeEach to reset state between tests.
4. Accessibility Testing: Use cy.injectAxe() and cy.checkA11y() from the cypress-axe plugin.
5. CI/CD Integration: Run tests in headless mode:

npx cypress run --headless --browser chrome  

Most Common Cypress Pitfalls (And How to Avoid Them)

• Dynamic elements: Use .contains() or .find() to handle changing elements.
• Flaky tests: Ensure stable selectors, avoid timing issues, and use cy.wait() wisely.
• Modifying app code to fit tests: Never change real code just to pass tests!

Real-World Example: Testing an Angular Auth Flow

Imagine a login process with error handling.

describe('Login Flow', () => {  
  it('should log in successfully', () => {  
    cy.visit('/login');  
    cy.get('[data-cy=email]').type('user@test.com');  
    cy.get('[data-cy=password]').type('password123{enter}');  
    cy.url().should('include', '/dashboard');  
  });  
  it('should show error message if login fails', () => {  
    cy.intercept('POST', '/api/login', { statusCode: 401 });  
    cy.visit('/login');  
    cy.get('[data-cy=username]').type('wrong@test.com');  
    cy.get('[data-cy=password]').type('wrong{enter}');  
    cy.get('[data-cy=message]').should('contain', 'Invalid username or password.');  
  });  
});  

Using Cypress for E2E testing ensures that your Angular app functions smoothly for real users. Early bug detection saves time, reduces stress, and builds user trust.

External Links:

• Cypress Documentation
• Angular Testing Best Practices