Playwright Cheat Sheet

Bookmark this page. It condenses the full Playwright course into scannable tables for navigation, locators, assertions, network control, auth, config, and CLI — use it while coding instead of reopening every lesson.

How to Use This Cheat Sheet

Tables follow the course order: runner basics, locators, assertions, waiting, network, auth, browsers, debugging, and CI. Jump to the section matching your current task.

Each row links conceptually to a deeper lesson when you need reasoning, not just syntax.

await page.goto('/path')
await page.getByRole('button', { name: 'Save' }).click()
await expect(locator).toBeVisible()
await page.route('**/api/**', handler)

These four lines cover most everyday Playwright test structure.

Quick CLI Commands

npx playwright test
npx playwright test --ui
npx playwright test --project=chromium
npx playwright codegen <url>
npx playwright show-trace trace.zip

playwright test --ui — interactive UI Mode.
playwright test --grep @smoke — filter by title or tag.
playwright install --with-deps — CI browser setup on Linux.
See tables below for locators, assertions, network, and config.

Core Commands Reference

Commands used in nearly every Playwright test.

Command	Example	Purpose
Navigate	`await page.goto('/login')`	Load a page
Role locator	`page.getByRole('button', { name: 'Save' })`	Preferred locator
Label locator	`page.getByLabel('Email')`	Form fields
Click	`await locator.click()`	Auto-waits until actionable
Fill	`await locator.fill('text')`	Clear and type
Assert	`await expect(locator).toBeVisible()`	Web-first assertion
Route	`await page.route('/api/', fn)`	Mock network
Storage	`test.use({ storageState: 'auth.json' })`	Reuse login

Assertions Reference

Assertion	Example
Visible	`await expect(locator).toBeVisible()`
Hidden	`await expect(locator).toBeHidden()`
Text	`await expect(locator).toHaveText('x')`
Count	`await expect(locator).toHaveCount(3)`
URL	`await expect(page).toHaveURL(/dashboard/)`
Title	`await expect(page).toHaveTitle('App')`
Checked	`await expect(locator).toBeChecked()`
Enabled	`await expect(locator).toBeEnabled()`
API OK	`await expect(response).toBeOK()`
Screenshot	`await expect(page).toHaveScreenshot()`

Locators Reference

Locator	Example
Role	`page.getByRole('button', { name: 'X' })`
Label	`page.getByLabel('Email')`
Placeholder	`page.getByPlaceholder('Search')`
Text	`page.getByText('Welcome')`
Test id	`page.getByTestId('submit')`
Alt text	`page.getByAltText('Logo')`
Filter	`page.getByRole('row').filter({ hasText: 'Ada' })`
Nth	`page.getByRole('listitem').nth(2)`

Network Testing Reference

Purpose	Example
Mock JSON	`route.fulfill({ json: [] })`
Mock status	`route.fulfill({ status: 500 })`
Continue	`route.continue()`
Abort	`route.abort()`
Wait response	`page.waitForResponse('**/api/x')`
API test	`await request.get('/api/x')`

Configuration Reference

Setting	Example
baseURL	`use: { baseURL: 'http://localhost:3000' }`
Timeout	`timeout: 30_000`
Retries	`retries: process.env.CI ? 2 : 0`
Workers	`workers: process.env.CI ? 4 : undefined`
Trace	`use: { trace: 'on-first-retry' }`
Projects	`projects: [{ name: 'chromium', use: devices['Desktop Chrome'] }]`

Common Mistakes

Using this cheat sheet without understanding when to prefer roles over test ids.
Copying page.route patterns without matching your app's URL structure.
Setting global timeouts sky-high instead of fixing slow assertions.
Skipping deeper lessons when a cheat sheet row isn't enough context.

Key Takeaways

Tables cover locators, assertions, network, auth, config, and CLI.
Prefer getByRole and expect() as defaults.
Bookmark this page for fast syntax lookup while coding.
Cross-reference deeper lessons for architecture and strategy.

Pro Tip

Print the locators and assertions tables — tape them near your monitor until getByRole and toBeVisible become muscle memory.