Playwright Patterns Reference

Complete guide to Playwright automation patterns, selectors, and best practices.

Table of Contents Selectors Wait Strategies Element Interactions Assertions Test Organization Network Interception Screenshots and Videos Debugging Parallel Execution Selectors Text Selectors

Most readable and maintainable approach when text is unique:

page.click('text=Login') page.click('text="Sign Up"') # Exact match page.click('text=/log.*in/i') # Regex, case-insensitive

Role-Based Selectors

Semantic selectors based on ARIA roles:

page.click('role=button[name="Submit"]') page.fill('role=textbox[name="Email"]', 'user@example.com') page.click('role=link[name="Learn more"]') page.check('role=checkbox[name="Accept terms"]')

CSS Selectors

Traditional CSS selectors for precise targeting:

page.click('#submit-button') page.fill('.email-input', 'user@example.com') page.click('button.primary') page.click('nav > ul > li:first-child')

XPath Selectors

For complex DOM navigation:

page.click('xpath=//button[contains(text(), "Submit")]') page.click('xpath=//div[@class="modal"]//button[@type="submit"]')

Data Attributes

Best practice for test-specific selectors:

page.click('[data-testid="submit-btn"]') page.fill('[data-test="email-input"]', 'test@example.com')

Chaining Selectors

Combine selectors for precision:

page.locator('div.modal').locator('button.submit').click() page.locator('role=dialog').locator('text=Confirm').click()

Selector Best Practices

Priority order (most stable to least stable):

data-testid attributes (most stable) role= selectors (semantic, accessible) text= selectors (readable, but text may change) id attributes (stable if not dynamic) CSS classes (less stable, may change with styling) XPath (fragile, avoid if possible) Wait Strategies Load State Waits

Essential for dynamic applications:

Wait for network to be idle (most common)

page.goto('http://localhost:3000') page.wait_for_load_state('networkidle')

Wait for DOM to be ready

page.wait_for_load_state('domcontentloaded')

Wait for full load including images

page.wait_for_load_state('load')

Element Waits

Wait for specific elements before interacting:

Wait for element to be visible

page.wait_for_selector('button.submit', state='visible')

Wait for element to be hidden

page.wait_for_selector('.loading-spinner', state='hidden')

Wait for element to exist in DOM (may not be visible)

page.wait_for_selector('.modal', state='attached')

Wait for element to be removed from DOM

page.wait_for_selector('.error-message', state='detached')

Timeout Waits

Fixed time delays (use sparingly):

Wait for animations to complete

page.wait_for_timeout(500)

Wait for delayed content (better to use wait_for_selector)

page.wait_for_timeout(2000)

Custom Wait Conditions

Wait for JavaScript conditions:

Wait for custom JavaScript condition

page.wait_for_function('() => document.querySelector(".data").innerText !== "Loading..."')

Wait for variable to be set

page.wait_for_function('() => window.appReady === true')

Auto-Waiting

Playwright automatically waits for elements to be actionable:

These automatically wait for element to be:

- Visible

- Stable (not animating)

- Enabled (not disabled)

- Not obscured by other elements

page.click('button.submit') # Auto-waits page.fill('input.email', 'test@example.com') # Auto-waits

Element Interactions Clicking

Basic click

page.click('button.submit')

Click with options

page.click('button.submit', button='right') # Right-click page.click('button.submit', click_count=2) # Double-click page.click('button.submit', modifiers=['Control']) # Ctrl+click

Force click (bypass actionability checks)

page.click('button.submit', force=True)

Filling Forms

Text inputs

page.fill('input[name="email"]', 'user@example.com') page.type('input[name="search"]', 'query', delay=100) # Type with delay

Clear then fill

page.fill('input[name="email"]', '') page.fill('input[name="email"]', 'new@example.com')

Press keys

page.press('input[name="search"]', 'Enter') page.press('input[name="text"]', 'Control+A')

Dropdowns and Selects

Select by label

page.select_option('select[name="country"]', label='United States')

Select by value

page.select_option('select[name="country"]', value='us')

Select by index

page.select_option('select[name="country"]', index=2)

Select multiple options

page.select_option('select[multiple]', ['option1', 'option2'])

Checkboxes and Radio Buttons

Check a checkbox

page.check('input[type="checkbox"]')

Uncheck a checkbox

page.uncheck('input[type="checkbox"]')

Check a radio button

page.check('input[value="option1"]')

Toggle checkbox

if page.is_checked('input[type="checkbox"]'): page.uncheck('input[type="checkbox"]') else: page.check('input[type="checkbox"]')

File Uploads

Upload single file

page.set_input_files('input[type="file"]', '/path/to/file.pdf')

Upload multiple files

page.set_input_files('input[type="file"]', ['/path/to/file1.pdf', '/path/to/file2.pdf'])

Clear file input

page.set_input_files('input[type="file"]', [])

Hover and Focus

Hover over element

page.hover('button.tooltip-trigger')

Focus element

page.focus('input[name="email"]')

Blur element

page.evaluate('document.activeElement.blur()')

Assertions Element Visibility from playwright.sync_api import expect

Expect element to be visible

expect(page.locator('button.submit')).to_be_visible()

Expect element to be hidden

expect(page.locator('.error-message')).to_be_hidden()

Text Content

Expect exact text

expect(page.locator('.title')).to_have_text('Welcome')

Expect partial text

expect(page.locator('.message')).to_contain_text('success')

Expect text matching pattern

expect(page.locator('.code')).to_have_text(re.compile(r'\d{6}'))

Element State

Expect element to be enabled/disabled

expect(page.locator('button.submit')).to_be_enabled() expect(page.locator('button.submit')).to_be_disabled()

Expect checkbox to be checked

expect(page.locator('input[type="checkbox"]')).to_be_checked()

Expect element to be editable

expect(page.locator('input[name="email"]')).to_be_editable()

Attributes and Values

Expect attribute value

expect(page.locator('img')).to_have_attribute('src', '/logo.png')

Expect CSS class

expect(page.locator('button')).to_have_class('btn-primary')

Expect input value

expect(page.locator('input[name="email"]')).to_have_value('user@example.com')

Count and Collections

Expect specific count

expect(page.locator('li')).to_have_count(5)

Get all elements and assert

items = page.locator('li').all() assert len(items) == 5

Test Organization Basic Test Structure from playwright.sync_api import sync_playwright

with sync_playwright() as p: browser = p.chromium.launch(headless=True) page = browser.new_page()

# Test logic here
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')

browser.close()

Using Pytest (Recommended) import pytest from playwright.sync_api import sync_playwright

@pytest.fixture(scope="session") def browser(): with sync_playwright() as p: browser = p.chromium.launch(headless=True) yield browser browser.close()

@pytest.fixture def page(browser): page = browser.new_page() yield page page.close()

def test_login(page): page.goto('http://localhost:3000') page.fill('input[name="email"]', 'user@example.com') page.fill('input[name="password"]', 'password123') page.click('button[type="submit"]') expect(page.locator('.welcome-message')).to_be_visible()

Test Grouping with Describe Blocks class TestAuthentication: def test_successful_login(self, page): # Test successful login pass

def test_failed_login(self, page):
    # Test failed login
    pass

def test_logout(self, page):
    # Test logout
    pass

Setup and Teardown @pytest.fixture(autouse=True) def setup_and_teardown(page): # Setup - runs before each test page.goto('http://localhost:3000') page.wait_for_load_state('networkidle')

yield  # Test runs here

# Teardown - runs after each test
page.evaluate('localStorage.clear()')

Network Interception Mock API Responses

Intercept and mock API response

def handle_route(route): route.fulfill( status=200, body='{"success": true, "data": "mocked"}', headers={'Content-Type': 'application/json'} )

page.route('**/api/data', handle_route) page.goto('http://localhost:3000')

Block Resources

Block images and stylesheets for faster tests

page.route('*/.{png,jpg,jpeg,gif,svg,css}', lambda route: route.abort())

Wait for Network Responses

Wait for specific API call

with page.expect_response('**/api/users') as response_info: page.click('button.load-users') response = response_info.value assert response.status == 200

Screenshots and Videos Screenshots

Full page screenshot

page.screenshot(path='/tmp/screenshot.png', full_page=True)

Element screenshot

page.locator('.modal').screenshot(path='/tmp/modal.png')

Screenshot with custom dimensions

page.set_viewport_size({'width': 1920, 'height': 1080}) page.screenshot(path='/tmp/desktop.png')

Video Recording browser = p.chromium.launch(headless=True) context = browser.new_context(record_video_dir='/tmp/videos/') page = context.new_page()

Perform actions...

context.close() # Video saved on close

Debugging Pause Execution page.pause() # Opens Playwright Inspector

Console Logs def handle_console(msg): print(f"[{msg.type}] {msg.text}")

page.on("console", handle_console)

Slow Motion browser = p.chromium.launch(headless=False, slow_mo=1000) # 1 second delay

Verbose Logging

Set DEBUG environment variable

DEBUG=pw:api python test.py

Parallel Execution Pytest Parallel

Install pytest-xdist

pip install pytest-xdist

Run tests in parallel

pytest -n auto # Auto-detect CPU cores pytest -n 4 # Run with 4 workers

Browser Context Isolation

Each test gets isolated context (cookies, localStorage, etc.)

@pytest.fixture def context(browser): context = browser.new_context() yield context context.close()

@pytest.fixture def page(context): return context.new_page()