E2E Testing in the Browser
|
This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production. The reference material consulted while preparing these pages is listed in the section bibliography. |
End-to-end (E2E) browser testing drives a real browser, or at least a real browser engine, against a running application the way a user would: it types, clicks, navigates and then checks what is on the screen. A single test exercises the whole stack — UI, network, backend, database and third-party integrations — so it gives the most confidence per test and costs the most in speed and maintenance. This section is the tool-focused reference for the three dominant tools, Playwright, Cypress and Selenium, and for the newest way to drive a browser: an AI agent that reads the page and acts on it, with or without a test script.
All version statements in this section were checked on 25 October 2026 against the tools' official documentation and package registries. The baseline is:
-
Playwright 1.64 (Node.js and TypeScript), with the Python, Java and .NET bindings exercised at 1.63. Node.js 22, 24 or 26 is required.
-
Cypress 16.2, which uses
cy.env()andCypress.expose()instead of the removedCypress.env(). -
Selenium 4.51, with Selenium Manager resolving drivers automatically.
-
W3C WebDriver BiDi, Working Draft of 8 October 2026, and the Model Context Protocol revision 2026-07-28.
-
Chrome DevTools MCP 1.x and Claude’s
computer_toolset_20260801computer-use toolset for the agent pages.
Every page states its own baseline and check date, repeats nothing that the linked reference sections already teach, and says in plain prose when an example could not be executed for a given page and why.
Where E2E tests sit
The test pyramid puts many fast, isolated tests at the bottom and few slow, broad tests at the top. E2E browser tests are the top: they should cover the critical journeys a user cannot do without, not every branch of the logic.
Pages such as Test Design & Page Objects explain what to put at the top of the pyramid and how to keep those tests independent and readable.
Who this section is for
It is written for developers and testers who can already write a web application and want automated confidence in it: front-end and full-stack developers choosing a first tool, teams migrating between tools, QA engineers who need cross-browser and visual checks in CI, and anyone who wants to put an AI agent in front of a browser safely. It assumes HTTP, HTML and one programming language; every other concept has its own page.
The Bookshelf example
Every example runs against Bookshelf, a small original demo application: a catalogue with search and pagination, a
book detail page with a cover image, reader and admin sign-in, an "add review" form with an optimistic user interface,
test-only seed and reset endpoints, light and dark themes and a responsive layout. Elements carry data-testid
attributes. Playwright and Cypress examples are TypeScript; Selenium examples are Java with JUnit 5 and Python with
pytest, plus other bindings where their behaviour differs. See
Example Application & Test Layout for the routes, roles,
seed API and project layouts.
Section map
- Foundations
-
-
How Browser Automation Works — WebDriver Classic, WebDriver BiDi, CDP, and the architectures of Playwright and Cypress.
-
Choosing a Tool — a full comparison, a decision flowchart, other tools, migration guides, and why E2E is not load testing.
-
Example Application & Test Layout — the Bookshelf app and the project layout for each tool.
-
Test Design & Page Objects — scope, isolation, locator strategy and page objects in every tool.
-
- Playwright
-
-
Getting Started — install, first test, headed and headless runs, reports.
-
Locators, Actions & Auto-Waiting — finding elements, actionability, frames, dialogs and downloads.
-
Assertions — web-first, soft and polling assertions, and aria snapshots.
-
Configuration, Fixtures & Projects — config, fixtures, projects and dependencies, tags and parameterization.
-
Authentication & Isolation — contexts, saved storage state and roles.
-
Network Mocking, Clock & API Testing — routing, HAR, WebSockets, the clock and API requests.
-
Debugging, Tracing & Codegen — UI Mode, Inspector, trace viewer, codegen and reporters.
-
Parallelism, Sharding & Retries — workers, sharding, merged reports and retries.
-
Component Testing — the built-in mount fixture and its stories model.
-
Python, Java & .NET — the same test in the other language bindings.
-
Advanced Topics — extensions, Electron, Android, Grid, screencast and custom selectors.
-
- Cypress
-
-
Getting Started — install, Launchpad, first test, run modes and configuration.
-
Core Concepts — the command queue, retry-ability, aliases and test isolation.
-
Queries, Assertions & Custom Commands — selecting, asserting and extending.
-
Network, Stubs, Spies & Clocks — intercepting traffic, fixtures, stubs and time control.
-
Sessions, Authentication & Cross-Origin — cached sessions, login strategies and multi-origin tests.
-
Debugging, Studio, Plugins & Reporters — time travel, Studio, Node events and reporting.
-
Component Testing — mounting React, Angular, Vue and Svelte components.
-
Cypress Cloud — recording, Test Replay, orchestration, analytics and plans.
-
- Selenium
-
-
Getting Started — install per language, components, test runners and Selenium Manager.
-
Drivers, Browsers & Options — options, services, remote drivers and each browser.
-
Locating & Interacting — locators, interactions, the Actions API, windows and frames.
-
Waits & Expected Conditions — implicit, explicit and fluent waits.
-
WebDriver BiDi — events, logging, network interception and scripts.
-
Selenium Grid — modes, components, configuration and docker-selenium.
-
Selenium IDE & Legacy — record and playback, legacy APIs and upgrading to Selenium 4.
-
- Cross-cutting concepts
-
-
Cross-Browser Testing — engines, branded browsers, devices and matrix runs.
-
Screenshots, Videos & Traces — evidence capture in each tool.
-
Visual Regression Testing — comparing screenshots against baselines and expected designs.
-
Accessibility Checks in E2E Tests — axe and aria snapshots in each tool.
-
Running in CI/CD — GitHub Actions, Docker images, caching, artifacts and secrets.
-
Flaky Tests & Reliability — causes, defences, retries and quarantine.
-
- AI agents in the browser
-
-
How AI Agents Drive Browsers — snapshots, vision and DOM tools, transports and cost.
-
Playwright MCP & CLI — full browser control for agents.
-
Chrome DevTools for Agents — performance traces, network, console and emulation for agents.
-
AI Features in Cypress & Selenium —
cy.prompt, Studio AI, Cloud MCP and Selenium’s agent guidance. -
Playwright Test Agents — planner, generator and healer.
-
Agents That Control the Browser — computer use and open-source agent frameworks compared.
-
Script-less Testing with AI Agents — worked examples, prompt patterns and limits.
-
Securing Browser Agents — prompt injection and practical hardening.
-
- Closing
-
-
What’s Changed and Upgrading — the recent release history of the three tools and service changes.
-
Cheat Sheet (PDF) — a one-page summary of the whole section.
-
Related comparisons
Comparing programming languages and comparing backend and web frameworks are covered by separate planned reference sections (the language comparison tracked as #196 and the backend and web framework comparison tracked as #263); this section stays on the browser-testing tools themselves.
Bibliography
Every source used to prepare this section is listed here, each linked to its official documentation. Individual pages
list the subset they derive from under their own == References heading. No books are used.