Testing Courses

by Talking About Testing

Complete Course

Advanced Playwright Web Testing

Level up Playwright on a real web app: control the network (mocking and delays), test browser state, cookies, and downloads, and apply advanced test design, accessibility, and CI.

Start Course View Lessons

Course Content

14 comprehensive lessons covering everything you need to know

Introduction

Course Structure

Learn how the course is organized and make the most of the content.

Introduction

Prerequisites

Systems and knowledge required to complete the course.

Introduction

Getting to know the application under test

Meet EngageSphere, the customers app and its GET /customers API you will test.

Lesson

Lesson 1

Project Clone

Fork and clone the project, then install and configure Playwright to get started.

Controlling the network

Lesson

Lesson 2

Intercepting network requests with page.route()

Observe and take control of the network with page.route() to test independently from the backend.

Lesson

Lesson 3

Mocking API responses with mock data

Isolate the frontend from the backend by fulfilling requests with static mock data.

Lesson

Lesson 4

Testing empty states by mocking data

Mock an empty customers response to reliably test the empty state and its side effects.

Lesson

Lesson 5

Simulating slow responses and loading states

Delay a response to reliably test the intermediate loading state.

Lesson

Lesson 6

Asserting requests and waiting for responses

Wait for and assert on the actual request the app sends with waitForResponse().

Lesson

Lesson 7

Simulating network failures with route.abort()

Fail the request with route.abort() to verify the app falls back to the empty state.

Browser state, cookies, and downloads

Lesson

Lesson 8

Reading the browser's localStorage

Assert that the theme and pagination limit persist by reading localStorage with page.evaluate().

Lesson

Lesson 9

Testing cookie consent

Read and seed cookies with the browser context to test the cookie-consent flow.

Lesson

Lesson 10

Verifying the CSV download

Catch the downloaded file and assert its contents from the frontend while mocking the API.

Advanced test design

Lesson

Lesson 11

Custom fixtures with test.extend()

Remove duplication by extracting setup into reusable Playwright fixtures.

Lesson

Lesson 12

Organizing tests with the Page Object Model

Encapsulate selectors and actions in page objects for readable, maintainable tests.

Quality and tooling

Lesson

Lesson 13

Accessibility testing with @axe-core/playwright

Catch accessibility issues automatically by running axe against your pages.

Lesson

Lesson 14

Running tests in CI with GitHub Actions

Run your Playwright suite on every push and publish the HTML report as an artifact.

Bonus & Conclusion

Bonus

Code Review with AI

Review Playwright test code with AI, grounded in Playwright's official agents, skills, and documentation.

Bonus

Practice on Your Own: Test the Remaining Features

Cement what you learned by testing the EngageSphere features the course did not cover.

Conclusion

Congratulations!

You've completed the Advanced Playwright Web Testing course!