What is Playwright?
Playwright is an open-source framework for reliable end-to-end testing for modern web apps. It's relatively new (released in 2020), but maintains an active release schedule, adding new features and fixing bugs at a rapid pace. The 2022 StateOfJS trends on testing show that Playwright is growing steadily in popularity and retention within the web development community.
Why use Playwright?
There are many reasons to choose Playwright as your test automation framework. Here are four key ones:
Unified API: Playwright works across all modern browser engines (Chromium, WebKit, Firefox) and supports device emulation for mobile coverage. It comprises both headed and headless browser options, allowing developers to prioritize between debugging convenience and CI/Cloud execution.
Resilient Testing: Playwright implements "auto-wait" (no artificial timeouts) and "auto-retry" (web assertions), eliminating key causes for flaky tests. Rich tooling options (tracing, time-travel) make it easy to debug and fix issues if failures occur.
Test Isolation: Every test runs in its own BrowserContext, independent of other tests running at the same time. Tests are run in parallel (for optimization) and one test failure doesn't affect others (for reliability).
Powerful Tooling: Playwright streamlines the developer experience from test authoring to execution, debugging, reporting, and profiling, with options to use a CLI or the Visual Studio Code extension.
Playwright core concepts
In the following exercises, we'll learn how to perform test automation tasks using Playwright. To set the stage, here are a few core terms and concepts to keep in mind. Their purpose and usage becomes clearer when you work through the exercises.
| Concept | Description |
|---|---|
| TestConfig | Configure Playwright Test Runner using File (static) or API (dynamic) |
| TestProject | Logical group of tests running same TestConfig and can be defined using filter. |
| Test Timeout | Global (per test run), Default (per test), Expect timeouts, Fixture timeouts |
| Fixtures | Core to Playwright test isolation. Set environment; see built-in options. |
| Navigation | Using page.goto() options to craft multi-page testing workflows |
| Locators | Core to Playwright auto-wait and auto-retry. Action finds target elements. |
| Assertions | Core to Playwright validation of expected outcomes based on actions. |
| Annotations | Tag tests to provide added context to deal with failures, focus, flakiness. |
| use Options | Configure Browser (project) or BrowserContext (context) within scope. |
| Page Object Models | Represent UI components by "Objects" and associate testing logic for reuse |
Playwright core tools
We'll also learn how to use a few Playwright tools, both from the command line and from within Visual Studio Code. For reference, here are some key developer tools we would explore, with a description of the role they play in testing workflow.
| Tool | Description |
|---|---|
| Playwright Test | The Playwright Test Runner and default CLI. |
| Playwright Extension | The Playwright Extension for Visual Studio Code. |
| Codegen | Playwright Test Generator (for automated authoring). |
| UI Mode | Playwright Time Travel Experience (with Watch Mode). |
| Trace Viewer | Graphical UI for exploring recorded Playwright traces. |
| VS Code Debugger | Powerful debugging support using Visual Studio Code Extension. |
| Playwright Inspector | Powerful debugging support from Playwright Command line. |
| Built-in Reporters | Flexible reporting options, with support for customization. |
| Continuous Integration | Support for wide range of CI providers (with sample config). |
In many cases, the same functionality is available from both the CLI and the VS Code Extension. We'll explore the Playwright Test (CLI) option briefly, but we recommend making Visual Studio Code extension your preferred option due to richer capabilities and a more streamlined developer experience.