Playwright Cheat Sheet Quick Guide

Playwright Cheat Sheet

Your go-to reference for Playwright automation with helpful explanations.

Installation & Setup

npm init playwright@latest

Installs Playwright with examples and setup wizard.

npm install -D @playwright/test
npx playwright install

Manual install: adds Playwright and downloads browsers.

Basic Test Structure

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Defines a test that navigates to a page and checks the title.

Launching Browsers

const { chromium } = require('playwright');

const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();

Launches browser in visible mode, creates context and new tab.

Navigating Pages

await page.goto('https://example.com');
await page.reload();
await page.goBack();
await page.goForward();

Performs navigation actions like reload, back, and forward.

Element Interactions

await page.click('text=Login');
await page.fill('#username', 'john');
await page.press('#username', 'Enter');

Clicks elements and simulates user input.

await page.selectOption('select#role', 'admin');
await page.check('#accept');
await page.uncheck('#newsletter');

Handles dropdowns and checkboxes.

Assertions

await expect(page).toHaveURL(/dashboard/);
await expect(page.locator('h1')).toContainText('Welcome');

Checks page URL and text content to validate state.

Selectors

page.locator('text=Login');
page.locator('input[name="email"]');
page.locator('[data-testid="submit"]');
page.locator('//button[contains(text(), "Submit")]');

Flexible options for locating elements via text, attributes, or XPath.

Screenshots & Videos

await page.screenshot({ path: 'screenshot.png', fullPage: true });
await page.locator('#chart').screenshot({ path: 'chart.png' });

Captures full-page or element screenshots for debugging or visual validation.

Waiting & Timing

await page.waitForSelector('#loaded');
await page.waitForTimeout(3000);
await page.locator('#submit').waitFor();

Ensures elements are present or waits a set time before continuing.

Test Hooks

test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com');
});

Runs this setup before every test.

Configuration

import { defineConfig } from '@playwright/test';

export default defineConfig({
  retries: 1,
  use: {
    headless: true,
    baseURL: 'https://example.com',
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
});

Default Playwright settings like retries, base URL, screenshots, and trace collection.

Parallel Testing & Projects

projects: [
  { name: 'Chromium', use: { browserName: 'chromium' } },
  { name: 'Firefox', use: { browserName: 'firefox' } },
]

Runs the same test across multiple browsers in parallel.

Debugging

PWDEBUG=1 npx playwright test

Enables debug mode with step-by-step control.

await page.pause();

Pauses the test at runtime for live inspection using Playwright Inspector.

API Testing

const requestContext = await request.newContext();
const response = await requestContext.get('/api/users');
expect(response.status()).toBe(200);

Sends a request to an API endpoint and checks the response status.

File Uploads & Downloads

await page.setInputFiles('input[type="file"]', 'file.txt');

Simulates a file upload.

const [ download ] = await Promise.all([
  page.waitForEvent('download'),
  page.click('#download-button'),
]);
await download.saveAs('file.zip');

Waits for a file download event and saves the file locally.

Useful CLI Commands

npx playwright test
npx playwright codegen
npx playwright show-report

Run tests, auto-generate test scripts, and open test reports.

Conclusion

This cheat sheet covers the most essential Playwright commands with clear examples. Use it to build reliable, maintainable end-to-end tests.