Angular Academy · Lesson

E2E Testing Overview

Understand the role of end-to-end tests.

E2E Testing Overview is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What End-to-End Testing Means

End-to-end (E2E) tests exercise your application the way a real user does: they launch the app in a real browser, navigate pages, click buttons, type into forms, and assert what is visible. They verify the whole stack works together, not just one unit.

The Testing Pyramid

A healthy suite has many fast unit tests, fewer integration tests, and a small set of slow but high-value E2E tests. E2E sits at the top: most coverage per test, but also the most expensive to run and maintain.

Unit: a function/component in isolation
Integration: several units together
E2E: the running app end to end

What E2E Catches That Units Miss

E2E tests catch problems only visible when real pieces connect: routing bugs, broken API integration, missing DOM after a deploy, CSS that hides a button, or an auth redirect loop. Unit tests with mocked dependencies can pass while the real app is broken.

Angular and E2E History

Older Angular shipped Protractor for E2E. Protractor was deprecated and removed from new projects. Today the Angular CLI lets you pick a third-party E2E runner; Playwright and Cypress are the most popular choices.

Why Playwright

Playwright is a modern, fast E2E framework from Microsoft. It drives Chromium, Firefox, and WebKit, auto-waits for elements, isolates tests with fresh browser contexts, and has excellent debugging tools. This course uses Playwright.

Adding Playwright to Angular

You can scaffold Playwright with its own installer. It creates a playwright.config.ts and an example test folder.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomy of an E2E Test

An E2E test starts the app, performs user actions, and asserts on the page. The flow is: arrange (navigate), act (interact), assert (verify visible result).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E Runs Against a Real Server

E2E needs your Angular app actually running. Typically the config starts ng serve (or serves a production build) and points the tests at that URL via baseURL and a webServer entry.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Keep E2E Suites Small and Critical

Because E2E tests are slow and can be flaky, cover only critical user journeys: login, checkout, the main happy path. Push detailed edge cases down to unit and integration tests where they run faster and more reliably.

Flakiness and Determinism

The biggest E2E challenge is flakiness, tests that fail intermittently. Avoid fixed sleep delays; rely on Playwright's auto-waiting assertions. Control test data so each run starts from a known state.

E2E vs Component Testing

Angular component tests (TestBed) check a component in a synthetic environment. E2E checks the deployed app in a real browser. They are complementary: use TestBed for fast logic/DOM checks, E2E for confidence that the whole product works.

Quick Check

What distinguishes E2E from unit tests?

Recap

E2E tests run the whole app in a real browser to catch integration and routing bugs unit tests miss. They sit atop the testing pyramid: few, slow, high-value. Angular projects now use runners like Playwright, which start your server and drive critical user journeys.

Frequently asked questions

Is the “E2E Testing Overview” lesson free?

Yes — the full text of “E2E Testing Overview” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “E2E Testing Overview”?

Understand the role of end-to-end tests. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “E2E Testing Overview” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy