The Complete Guide to Web Application Testing
A hands-on, nine-chapter tutorial covering Jest, React Testing Library, Playwright, and Cypress — all tested against a realistic full-stack Next.js + SQLite online store.
Get the Full Source Code on GitHub
This article is a summary. The full, runnable tutorial —
nine chapters covering Jest, React Testing Library,
Playwright, Cypress, visual regression testing, and
Test-Driven Development — lives in the audoir/webapp-testing-tutorial repository.
Introduction
This tutorial teaches web application testing from the ground up using a realistic subject application: a full-stack online store built with Next.js and SQLite. The store has a product catalog, user authentication, a shopping cart, checkout, and order history — exactly the kind of CRUD app you encounter in real projects.
The webapp-testing-tutorial repository walks through nine chapters, each introducing a different testing tool or concept, building hands-on experience with Jest, React Testing Library, Playwright, and Cypress — and a clear mental model for when to use each one. This post summarizes the tool comparison and what each chapter covers — head to the repo for the full, runnable code.
The Subject Application
- 🛍️Product Catalog — publicly viewable product listing
- 🔐Authentication — register and sign in with username/password
- 🛒Shopping Cart — add, update, and remove items (requires login)
- 📦Checkout — enter a shipping address and place an order
- 📋My Orders — view past orders, edit shipping address, or cancel
Testing Tool Comparison
The tools covered in this tutorial serve different purposes and complement each other. Use this table to decide which tool is right for a given situation.
| Jest | RTL | Playwright | Cypress | Selenium | |
|---|---|---|---|---|---|
| What it tests | Pure functions, utilities, API logic | React component rendering & interaction | Full user journeys in a real browser | E2E journeys; component tests in real browser | Full user journeys in a real browser |
| Runs in | Node.js (no browser) | Node.js with jsdom | Real browser (Chromium, Firefox, WebKit) | Real browser (Chromium, Firefox, WebKit) | Real browser (Chrome, Firefox, Safari, Edge, IE) |
| Speed | ⚡ Very fast | ⚡ Fast | 🐢 Slow | 🐢 Slow for E2E; 🟡 Medium for component | 🐢 Slow |
| Auto-waiting | ✗ No | Partial | ✓ Yes | ✓ Yes | ✗ No — manual waits required |
| Catches CSS bugs | ✗ No | ✗ No | ✓ Yes | ✓ Yes | ✓ Yes |
Nine Tutorial Chapters
Each chapter introduces a different testing tool or concept, building on the one before it.
Unit Testing with Jest
Test pure functions, database access with mocking, and HTTP client functions. Learn describe/it/expect, jest.mock(), and global.fetch mocking.
Component Testing with React Testing Library
Render React components in jsdom, query by role and text, simulate user interactions, and handle async state updates.
End-to-End Testing with Playwright
Write your first E2E test against a real browser. Configure playwright.config.ts, use the webServer option, and understand auto-waiting.
Playwright — Locators, Network Interception, Auth Flows & API Testing
Accessible locators, network interception with page.route, session persistence with storageState, and direct API testing with the request fixture.
Playwright — Visual Regression Testing, Codegen
Capture pixel-perfect screenshots with toHaveScreenshot, mask dynamic content, stabilise visual tests, and generate tests with Codegen.
E2E and Component Testing with Cypress
Write E2E tests with cy.visit/cy.get, mount React components in a real browser with cy.mount, and understand Cypress's auto-retry model.
Playwright vs Cypress: A Deep Dive
Architecture differences, async model, browser support, multi-tab testing, parallel execution, API testing speed, and when to choose each tool.
Playwright vs Selenium: Why You Should Choose Playwright
WebDriver vs CDP architecture, auto-waiting vs manual waits, setup complexity, parallel execution, and the Trace Viewer advantage.
Test-Driven Development in Web Apps
The Red-Green-Refactor loop, where TDD works well (utility functions, bug fixes), where it struggles (rapidly changing UI), and how it is actually used in industry.
Getting Started
Clone the repo, run npm install and npm run dev, and open localhost:3000 to see the online store running. Each chapter's test suite runs independently — see the repository README for the exact commands for Jest, Playwright, and Cypress.
Conclusion
This tutorial covers the full spectrum of web application testing — from fast, isolated unit tests with Jest to pixel-perfect visual regression tests with Playwright, from component tests in a real browser with Cypress, to the principles of Test-Driven Development.
The key insight is that no single tool does everything. Each layer of the testing pyramid serves a different purpose, and the best testing strategy uses all of them together:
storageState to avoid logging in for every test. Add visual regression tests for key pages.Ready to Build It Yourself?
Clone the repository and run the Jest, Playwright, and Cypress test suites against a real online store to see all nine chapters in action.
Clone webapp-testing-tutorial on GitHubAbout the Author
Wayne Cheng is the founder and AI app developer at Audoir, LLC. Prior to founding Audoir, he worked as a hardware design engineer for Silicon Valley startups and an audio engineer for creative organizations. He holds an MSEE from UC Davis and a Music Technology degree from Foothill College.
Further Exploration
Explore the webapp-testing-tutorial repository and experiment with extending the test suites. Consider adding CI pipeline integration, coverage thresholds, or accessibility testing to deepen your understanding of production-grade testing strategies.
For more AI-powered development tools and tutorials, visit Audoir .