⚡ What’s Inside
- → Setup commands, locators (
getByRole,getByText,getByLabel), assertions, and page actions - → Claude AI prompts for generating Playwright tests automatically
- → All code is TypeScript/JavaScript, copy-paste ready — use Ctrl+F / Cmd+F to jump to the section you need
1 Playwright Setup Commands
Every command you need to initialize, run, and debug Playwright tests.
| Command | What it does |
|---|---|
| npm init playwright@latest | Scaffold a new Playwright project with config, example tests, and browsers |
| npx playwright test | Run all tests across all configured projects |
| npx playwright test --ui | Open the interactive UI Mode for watching and debugging tests |
| npx playwright codegen url | Launch Codegen — record browser actions and generate test code |
| npx playwright show-report | Open the HTML test report in your default browser |
| npx playwright test --debug | Run tests with the Playwright Inspector (step-through debugger) |
| npx playwright test --project=chromium | Run tests on Chromium only (skip Firefox and WebKit) |
| npx playwright test file.spec.ts | Run a single test file |
Tip: Add --headed to any test command to watch the browser run visually. Combine with --workers=1 to slow things down for debugging.
2 Essential Locators
Playwright recommends user-facing locators first. Fall back to CSS/XPath only when necessary.
| Locator | Use case |
|---|---|
| page.getByRole('button', { name: 'Submit' }) | Best practice — matches accessible role + name |
| page.getByText('Welcome') | Find element by visible text content |
| page.getByLabel('Email') | Target form inputs by their associated label |
| page.getByPlaceholder('Enter email') | Target inputs by placeholder text |
| page.getByTestId('login-form') | Use data-testid attribute (stable, refactor-safe) |
| page.locator('.class-name') | CSS selector — use when semantic locators aren't available |
| page.locator('#id') | ID selector — fast but brittle if IDs are auto-generated |
| page.locator('css=div >> text=hello') | Chained locator — CSS parent with text child filter |
3 Common Assertions
All assertions auto-wait and retry until timeout. No sleep() needed.
// Page-level assertions await expect(page).toHaveTitle(/Playwright/); await expect(page).toHaveURL(/dashboard/); // Element visibility & text await expect(locator).toBeVisible(); await expect(locator).toHaveText('Hello'); await expect(locator).toBeEnabled(); // Count & attributes await expect(locator).toHaveCount(3); await expect(locator).toHaveAttribute('href', '/about'); // Visual regression await expect(locator).toHaveScreenshot();
Tip: Negate any assertion with .not — e.g. await expect(locator).not.toBeVisible();
4 Page Actions
The most-used page interactions, copy-paste ready.
// Navigation await page.goto('https://example.com'); // Click & fill await page.click('button'); await page.fill('#email', 'test@test.com'); // Form interactions await page.selectOption('select', 'value'); await page.check('#agree'); // Waiting await page.waitForSelector('.loaded'); // Screenshots await page.screenshot({ path: 'screenshot.png' }); // Execute JS in browser context await page.evaluate(() => document.title);
5 Claude AI + MCP Prompts
Real prompts you can paste into Claude to generate production-ready Playwright tests instantly.
"Write a Playwright test that logs in with email/password and verifies the dashboard loads"
"Generate a POM class for the checkout page with methods for addToCart, applyCoupon, and placeOrder"
"Create a data-driven test that validates form validation for 5 invalid email formats"
"Write an API test that creates a user via POST, then verifies the user appears in the UI"
"Fix this broken locator: [paste locator] — the button text changed from 'Submit' to 'Send'"
How it works: The Playwright MCP Server connects Claude directly to your browser. Claude can navigate pages, inspect elements, and generate tests based on the live DOM — not just guessing from documentation. Learn the full MCP setup here.
6 playwright.config.ts Quick Reference
A production-ready config with the most common options annotated.
import { defineConfig, devices } from '@playwright/test'; export default defineConfig({ testDir: './tests', timeout: 30_000, // per-test timeout (ms) retries: 2, // retry failed tests on CI workers: '50%', // use half of CPU cores fullyParallel: true, // parallelize within files reporter: [ ['html', { open: 'never' }], // HTML report ['allure-playwright'], // Allure (optional) ], use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry', // capture trace on failures screenshot: 'only-on-failure', video: 'retain-on-failure', // save video only if test fails }, projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, { name: 'firefox', use: { ...devices['Desktop Firefox'] }, }, { name: 'webkit', use: { ...devices['Desktop Safari'] }, }, { name: 'mobile-chrome', use: { ...devices['Pixel 7'] }, }, { name: 'mobile-safari', use: { ...devices['iPhone 14'] }, }, ], });
Asim Noaman
Senior QA Automation Engineer & AI Testing Specialist
With years of hands-on experience building test automation frameworks for production applications, Asim specializes in combining traditional QA methodologies with cutting-edge AI tools. He has helped teams adopt Playwright and AI-driven testing workflows to ship faster with fewer bugs.