? Automation Testing with Angular

? Quick Overview

Automation testing in Angular uses tools like Protractor (legacy) and Cypress (recommended) to simulate real user interactions in a browser. These tests run your Angular app end-to-end (E2E) and verify that routing, forms, buttons, and other UI flows work as expected.

Instead of manually clicking through the app after every change, automation tests act as a robot user, helping catch regressions early and keeping the application stable.

E2E Testing Cypress Angular CLI

? Key Concepts

End-to-End (E2E) Testing: Tests the full user flow from the browser to the backend and back.
Cypress: A modern E2E testing framework with a powerful interactive test runner.
Test Runner: A tool that opens the browser, runs your test scripts, and shows results.
Selectors: CSS-like queries (e.g., cy.get('button')) used to find DOM elements.
Assertions: Checks that verify expected behavior, like text visibility or URL changes.

? Syntax & Theory

Angular CLI historically used Protractor for E2E tests. In modern Angular projects, Cypress is preferred due to its:

Interactive dashboard and time-travel debugging.
Simple API for visiting pages, clicking buttons, and asserting content.
Fast feedback loop while developing tests.

Basic Cypress commands used in Angular E2E tests:

cy.visit('/') – loads your Angular app in a browser.
cy.contains('Text') – asserts that some text is visible on the screen.
cy.get('selector') – finds DOM elements to click, type into, etc.
cy.url() – inspects the current browser URL for routing checks.

⚙️ Setting Up Automation Testing (Cypress)

In a modern Angular project, you can add Cypress as a development dependency and start its interactive test runner using the following commands:

? View Code Example

// Install and open the Cypress test runner in an Angular project
npm install cypress --save-dev
npx cypress open

? What This Does

npm install cypress --save-dev adds Cypress as a dev dependency.
npx cypress open launches the Cypress UI so you can pick and run tests.
Cypress creates a default folder structure like cypress/e2e for your test files.

? Sample E2E Test with Cypress

Below is a simple Cypress test file that checks the home page message and navigation to an About page in an Angular application.

? View Code Example

// cypress/e2e/app.spec.js - basic Angular E2E tests with Cypress
describe('Angular App', () => {
it('should display welcome message', () => {
cy.visit('http://localhost:4200');
cy.contains('Welcome to Angular!');
});
it('should navigate to About page', () => {
cy.get('a[href="/about"]').click();
cy.url().should('include', '/about');
cy.contains('About Us');
});
});

? Explanation

describe('Angular App', ...): Groups related tests for your Angular application.
cy.visit('http://localhost:4200') opens the app on the default Angular dev server.
cy.contains('Welcome to Angular!') asserts that the welcome text appears on the page.
cy.get('a[href="/about"]').click() clicks the About navigation link.
cy.url().should('include', '/about') confirms the route changed to /about.
cy.contains('About Us') verifies that the About page content loaded correctly.

✅ Tips & Best Practices

Focus E2E tests on critical user journeys like login, checkout, and key forms.
Keep tests independent; one test failing should not break the others.
Use data-test attributes (e.g., data-test="submit-btn") for stable selectors.
Combine unit tests (for components/services) with E2E tests for full coverage.
Run E2E tests in your CI pipeline to catch regressions before deployment.

? Try It Yourself / Practice Tasks

Create an E2E test that fills out a form in your Angular app, submits it, and verifies that a success message appears.
Write tests to navigate between multiple routes (e.g., Home → About → Contact) and assert that each page shows expected content.
Experiment with Cypress commands like cy.type(), cy.select(), and cy.check() to test various form controls.
Add a negative test: intentionally enter invalid data and assert that validation messages are displayed.