Playwright Cheat Sheet

Updated 2026-04-29

Next Topic: pnpm Package Manager Cheat Sheet

Playwright is a modern end-to-end testing framework developed by Microsoft for testing web applications across Chromium, Firefox, and WebKit browsers. Built on a multi-browser, multi-platform architecture, Playwright enables reliable automation through features like auto-waiting, web-first assertions, and browser context isolation. Unlike older tools that rely on polling and explicit waits, Playwright's actionability checks and parallel execution capabilities make it a top choice for creating fast, stable, and maintainable test suites that scale with modern CI/CD pipelines. As of v1.59, Playwright extends into AI-assisted workflows with Test Agents, MCP server integration, and agentic video receipts for automated test authoring and repair.

What This Cheat Sheet Covers

This topic spans 24 focused tables and 254 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Locator StrategiesTable 2: Actions and InteractionsTable 3: Web-First AssertionsTable 4: Navigation and WaitingTable 5: Browser Contexts and IsolationTable 6: Authentication PatternsTable 7: Fixtures and Dependency InjectionTable 8: Network Interception and MockingTable 9: API TestingTable 10: Test Configuration and OrganizationTable 11: Test Hooks and LifecycleTable 12: Test Annotations and ControlTable 13: Page Object ModelTable 14: Debugging and ToolingTable 15: Parallelization and ShardingTable 16: Visual TestingTable 17: File HandlingTable 18: Dialogs and PopupsTable 19: Advanced SelectorsTable 20: Accessibility TestingTable 21: CI/CD IntegrationTable 22: Mobile and EmulationTable 23: Parameterization and Environment VariablesTable 24: AI Agents and MCP

Table 1: Core Locator Strategies

Method	Example	Description
getByRole	`page.getByRole('button', { name: 'Submit' })`	• Finds elements by ARIA role — most accessibility-friendly and recommended strategy • supports `name`, `checked`, `pressed`, `expanded` options.
getByText	`page.getByText('Welcome back')`	• Matches elements by visible text content • supports exact match, substring, or regex.
getByLabel	`page.getByLabel('Email address')`	• Finds form inputs by their associated label text • works with `<label>`, `aria-label`, and `aria-labelledby`.
getByPlaceholder	`page.getByPlaceholder('Search...')`	Locates inputs by their placeholder attribute — convenient for search fields without labels.
getByTestId	`page.getByTestId('user-profile')`	• Finds elements by data-testid attribute (configurable) • provides stable, framework-agnostic selectors.
getByAltText	`page.getByAltText('Company logo')`	Finds `<img>` or `<area>` elements by their alt attribute — essential for image and accessibility testing.
getByTitle	`page.getByTitle('Close dialog')`	Matches elements by their title attribute — typically used for tooltips or icon buttons.
filter by text	`page.getByRole('button').filter({ hasText: 'Save' })`	Narrows locator results by filtering on text content for precise targeting.
filter by child/descendant	`page.getByRole('article').filter({ has: page.locator('.new-badge') })`	Filters elements that contain a specific child or descendant — powerful for nested structures.
filter by not having text	`page.getByRole('listitem').filter({ hasNotText: 'Out of stock' })`	Filters elements that do not contain specified text — useful for inventory checks.

Table 1: Core Locator Strategies

Method	Example	Description
getByRole	`page.getByRole('button', { name: 'Submit' })`	• Finds elements by ARIA role — most accessibility-friendly and recommended strategy • supports `name`, `checked`, `pressed`, `expanded` options.
getByText	`page.getByText('Welcome back')`	• Matches elements by visible text content • supports exact match, substring, or regex.
getByLabel	`page.getByLabel('Email address')`	• Finds form inputs by their associated label text • works with `<label>`, `aria-label`, and `aria-labelledby`.
getByPlaceholder	`page.getByPlaceholder('Search...')`	Locates inputs by their placeholder attribute — convenient for search fields without labels.
getByTestId	`page.getByTestId('user-profile')`	• Finds elements by data-testid attribute (configurable) • provides stable, framework-agnostic selectors.
getByAltText	`page.getByAltText('Company logo')`	Finds `<img>` or `<area>` elements by their alt attribute — essential for image and accessibility testing.
getByTitle	`page.getByTitle('Close dialog')`	Matches elements by their title attribute — typically used for tooltips or icon buttons.
filter by text	`page.getByRole('button').filter({ hasText: 'Save' })`	Narrows locator results by filtering on text content for precise targeting.
filter by child/descendant	`page.getByRole('article').filter({ has: page.locator('.new-badge') })`	Filters elements that contain a specific child or descendant — powerful for nested structures.
filter by not having text	`page.getByRole('listitem').filter({ hasNotText: 'Out of stock' })`	Filters elements that do not contain specified text — useful for inventory checks.