tezvyn:

Playwright: E2E Tests That Aren't Flaky

AI-drafted, machine-checkedSource: playwright.devintermediate

Playwright makes E2E tests reliable by automatically waiting for UI elements to be ready. Use it to test critical user journeys across Chrome, Firefox, and WebKit. The footgun is using brittle CSS selectors instead of user-facing locators like `getByRole`.

WHY IT EXISTS End-to-end tests traditionally suffer from flakiness. Tests fail not because the app is broken, but because of timing issues, like a script trying to click a button before it's visible or enabled. This erodes trust in the test suite. Playwright was built to solve this reliability problem from the ground up.

THE MENTAL MODEL Think of Playwright as a patient, multi-lingual robot QA tester. It drives a real browser (Chrome, Firefox, or WebKit) just like a user would, but it has superpowers. Its main power is "auto-waiting": it won't try to click a button until the button is actually visible, enabled, and not covered by something else. It doesn't rely on clumsy, arbitrary sleep commands.

HOW IT WORKS Playwright launches a browser instance for each test, ensuring total isolation. You write scripts in TypeScript, Python, or Java that command the browser. For example, page.getByRole('button', { name: 'Sign in' }).click() finds a button with the text "Sign in" and clicks it. Playwright's engine automatically waits for that button to be actionable before executing the click. If an assertion fails, it automatically retries for a short period, giving the app time to update.

WHEN TO USE IT Use Playwright for testing critical, multi-step user flows that are the backbone of your application. Examples include the complete user registration and login flow, the shopping cart and checkout process, or a complex data submission form. It's also excellent for verifying that your app's core functionality works consistently across different browsers from a single test suite.

WHEN NOT TO USE IT Do not use Playwright for testing individual components in isolation or for unit-testing business logic. Those are jobs for faster, more focused tools like Jest or Vitest. Using slow E2E tests for everything is expensive and unnecessary; reserve them for integrated flows that unit tests cannot cover.

ONE CANONICAL EXAMPLE A test to verify a login flow. The script navigates to the login page, fills the username and password fields using user-facing locators like getByLabel, clicks the sign-in button using getByRole, and then asserts that the URL has changed to the user's dashboard. This single test confirms that the frontend form, backend authentication, and routing all work together. The Trace Viewer tool can then show a full recording of this flow, making debugging trivial.

Read the original → playwright.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.