Playwright syntax reference

Common Playwright patterns for automation engineers. Each block mirrors the official-style API; use the playground at the bottom to try locators, navigation, dialogs, frames, downloads, and more against real DOM.

Open action sandbox (click, fill, keyboard, …) · ← UI Practice Examples

1. Import and basic test structure

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

test('test name', async ({ page }) => {
  // test steps
});

2. Hooks

test.beforeAll(async () => {});
test.afterAll(async () => {});
test.beforeEach(async ({ page }) => {});
test.afterEach(async ({ page }) => {});

3. Grouping tests

test.describe('Smoke Suite', () => {
  test('login test', async ({ page }) => {});
});

test.describe.only('Only this suite', () => {});
test.describe.skip('Skip this suite', () => {});

4. Running specific tests

test.only('run only this test', async ({ page }) => {});
test.skip('skip this test', async ({ page }) => {});
test.fixme('mark as fixme', async ({ page }) => {});
test.fail('expected to fail', async ({ page }) => {});
test.slow('mark test as slow', async ({ page }) => {});

5. Navigation

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

6. Browser / page actions

await page.close();
await page.bringToFront();
const title = await page.title();
const url = page.url();
const content = await page.content();

7. Locators

page.locator('css=button');
page.locator('//button');
page.getByText('Login');
page.getByRole('button', { name: 'Login' });
page.getByLabel('Email');
page.getByPlaceholder('Enter email');
page.getByTestId('submit-btn');
page.getByAltText('Logo');
page.getByTitle('Close');

8. Locator chaining and filtering

page.locator('.card').locator('button');
page.locator('.item').first();
page.locator('.item').last();
page.locator('.item').nth(2);
page.locator('.row').filter({ hasText: 'Product 1' });
page.locator('.row').filter({ has: page.locator('button') });

9. Click and input actions (page)

await page.click('text=Login');
await page.fill('#username', 'admin');
await page.type('#search', 'Playwright');
await page.press('#search', 'Enter');
await page.check('#rememberMe');
await page.uncheck('#subscribe');
await page.selectOption('#country', 'USA');
await page.setInputFiles('#upload', 'tests/test-data/file.pdf');
await page.clearCookies();

10. Locator actions

await locator.click();
await locator.dblclick();
await locator.fill('text');
await locator.clear();
await locator.type('hello');
await locator.press('Enter');
await locator.check();
await locator.uncheck();
await locator.hover();
await locator.focus();
await locator.scrollIntoViewIfNeeded();
await locator.selectOption('option1');
await locator.setInputFiles('file.pdf');

11. Keyboard and mouse

await page.keyboard.type('Hello');
await page.keyboard.press('Enter');
await page.keyboard.down('Control');
await page.keyboard.up('Control');

await page.mouse.move(100, 200);
await page.mouse.click(100, 200);
await page.mouse.dblclick(100, 200);
await page.mouse.down();
await page.mouse.up();
await page.mouse.wheel(0, 500);

12. Assertions

await expect(page).toHaveURL(/dashboard/);
await expect(page).toHaveTitle(/Home/);

await expect(locator).toBeVisible();
await expect(locator).toBeHidden();
await expect(locator).toBeEnabled();
await expect(locator).toBeDisabled();
await expect(locator).toBeChecked();
await expect(locator).toBeEditable();
await expect(locator).toHaveText('Welcome');
await expect(locator).toContainText('Welcome');
await expect(locator).toHaveValue('admin');
await expect(locator).toHaveAttribute('type', 'text');
await expect(locator).toHaveCount(3);
await expect(locator).toHaveClass(/active/);

13. Waiting

await page.waitForTimeout(2000);
await page.waitForLoadState('load');
await page.waitForLoadState('networkidle');
await page.waitForSelector('#login');
await page.waitForEvent('popup');
await page.waitForResponse('**/api/users');
await page.waitForRequest('**/api/login');

14. Handling alerts

page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});

page.on('dialog', async dialog => {
  await dialog.dismiss();
});

15. Multiple pages / popups

const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.click('text=Open New Tab')
]);

await newPage.waitForLoadState();

16. Frames / iframe

const frame = page.frame({ name: 'frameName' });
await frame?.click('text=Submit');

const frameLocator = page.frameLocator('#my-frame');
await frameLocator.locator('button').click();

17. Screenshots and videos

await page.screenshot({ path: 'screenshot.png' });
await locator.screenshot({ path: 'element.png' });

18. File download

const [download] = await Promise.all([
  page.waitForEvent('download'),
  page.click('text=Download')
]);

await download.saveAs('downloads/report.pdf');

19. Browser context

const context = await browser.newContext();
const page = await context.newPage();
await context.close();
await context.clearCookies();

20. API testing syntax

const response = await page.request.get('https://api.example.com/users');
const postResponse = await page.request.post('https://api.example.com/login', {
  data: { username: 'admin', password: '1234' }
});

expect(response.ok()).toBeTruthy();
const body = await response.json();

21. Fixtures

test('fixture example', async ({ page, context, request }) => {
  // use built-in fixtures
});

22. Test data / variables

const username = 'admin';
let token: string;

23. Evaluate JavaScript in browser

await page.evaluate(() => document.title);
await page.evaluate(() => {
  localStorage.setItem('token', '123');
});

24. Getting text and attributes

const text = await locator.textContent();
const innerText = await locator.innerText();
const value = await locator.inputValue();
const attr = await locator.getAttribute('href');
const isVisible = await locator.isVisible();
const count = await locator.count();

25. Useful configuration syntax

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

export default defineConfig({
  use: {
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
  retries: 1,
  workers: 2,
});

26. Common CLI syntax

npx playwright test
npx playwright test tests/login.spec.ts
npx playwright test --headed
npx playwright test --project=chromium
npx playwright test --grep "login"
npx playwright show-report
npx playwright codegen https://example.com

27. Example full test

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

test('valid login', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByLabel('Username').fill('admin');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Login' }).click();

  await expect(page).toHaveURL(/dashboard/);
  await expect(page.getByText('Welcome')).toBeVisible();
});

Playground (maps to sections above)

Use these nodes from @playwright/test specs. Ids and labels are stable for page.* and locator.* exercises.

§5–6 Navigation & page info

Title: —

URL: —

Goto sandbox (same origin)

§7 Locators

§8 Chaining & filter

Card without button

item 0
item 1
item 2

Product 1

Product 2

§9 Legacy page.click / fill / …

UsernameSearch

Remember me

CountryUpload

§11 Keyboard & mouse

Move inside the pad — read coordinates for page.mouse.move / click:

0,0

§12 Assertion targets (toggle state)

Now you see me (hidden when toggled)

Toggle for toBeChecked()

Welcome automation engineer

Class toggles with checkbox (syntax-active / syntax-idle)

§13 Waiting

§14 Dialogs

§15 Popup / new page

Open New Tab (example.com)

§16 iframe

§17–18 Screenshot & download

Use page.screenshot in tests. For downloads:

Download sample file

§23 Evaluate / storage

(run button)

§20 API request

Run page.request.get/post from tests against your API base URL. Browser CORS does not apply to Playwright request context.