React End-to-End Testing with Playwright

Do you know this feeling when you finally trust your tests? When running them no longer makes you brace for impact, but instead gives you the confidence to ship without second-guessing every deploy. End-to-end tests rarely earn that trust. They’ve earned a reputation for being expensive, slow, and unreliable, and most of the time, that reputation is deserved.

Today, I want to change that for you with Playwright.

In this workshop, my goal is to make you rethink what end-to-end testing can be. That means stepping beyond the cargo-culted patterns that gave E2E tests their bad reputation in the first place. That means getting so good at Playwright that you would feel confident writing tests that are meaningful and performant, and, dare I say, a pleasure to maintain.

What You’ll Learn
End-to-end tests can get really complex really fast. I will teach you how to deal with that complexity by making intentional choices throughout the workshop: from configuring Playwright to arranging your test setup to reduce flakiness and get the test suite that you can trust.

On top of that, you will be crafting your own test experience through custom fixtures, disposable test data, and reproducible authentication snapshots. This will help you orchestrate tests for complex, real-world applications.

Fundamentals
In the first block, you will get comfortable with Playwright. From installing it and covering the essential configuration options for a great testing experience both locally and on CI, to getting familiar with the test structure, the page object, and why it gives you element locators instead of direct DOM references. You will wrap up by writing your own custom fixture for type-safe page navigation in your end-to-end tests.

Authentication
You will learn the difference between testing authentication as a feature and testing features that are behind authentication. Yes, those require entirely different approaches. Then, you will write tests for the most common authentication methods in web applications. With basic auth, you will create a disposable createUser() utility that creates a test user in the database and deletes it when the test is done. With two-factor authentication, you will create test OTP tokens and store their verification records in the database for your test user. And with passkeys, you will leverage a Chrome Developer Protocol session to create a web authentication client with the passkey you provide and use it in your test.

After that, you will explore how to create and manage authentication in your test setup using Personas, reproducible snapshots of different authentication states that bridge the DX gap of setStorageState in Playwright.

Guides
Next, you will dive straight into practical tips for writing end-to-end tests: from provisioning mock databases and test data to mocking client-side requests. As a bonus, I will show you how to write tests by recording your interactions in the browser using Playwright’s extension for Visual Studio Code.

Debugging
And yes, I’ve saved the best for last. Debugging.

It’s become somewhat of a tradition to include debugging techniques in my workshops, and this one will be no different. You will master the UI mode to preview and debug your tests visually, and after that, learn how to debug failed CI tests with the Trace Viewer. This is, seriously, such a time-saver. No more guessing why a test failed three commits ago on a machine you don’t have access to. You will have the entire test run at your fingertips.

Who Is This Workshop For
This workshop is for any developer who wants to write end-to-end tests they can actually rely on. For everyone who has watched a CI pipeline turn red because of a flaky test that passes locally. For everyone who has been told that end-to-end tests are inherently slow and unreliable, and refused to accept that as the answer.

You don’t need prior Playwright experience to get the most out of these exercises, but a working familiarity with modern web applications and a healthy skepticism toward the current state of E2E testing will serve you well.