Playwright Common Elements Test Page
getByRole('button')
getByRole('button', { name: 'Submit' })
Primary submit button
getByRole('button', { name: 'Cancel' })
Secondary cancel button
getByRole('button', { name: 'Save Changes' })
Save action button
getByRole('button', { name: 'Delete' })
Delete action button
getByRole('button', { name: "Don't click me" })
Button with apostrophe
getByRole('button', { name: 'Create New Account' })
Multi-word button text
getByRole('button')
Button without accessible name (Playwright may use this)
locator('button').filter({ hasText: 'Click Me' })
Button with text filter (alternative Playwright approach)
getByRole('link')
getByRole('link', { name: 'Home' })
Simple navigation link
getByRole('link', { name: 'test-loggia-ai/MyNewTestRepo' })
GitHub-style link
getByRole('link', { name: 'Home > Products > Details' })
Breadcrumb navigation
getByRole('heading')
getByRole('heading', { name: 'Main Heading' })
H1 heading element
Main Heading
getByRole('heading', { name: 'Section Title' })
H2 heading element
Section Title
getByLabel() - Text inputs
getByLabel('Username:')
Text input with label (Playwright prefers getByLabel)
getByLabel('Email Address:')
Email input with label
getByRole('textbox') - Without label
getByRole('textbox')
Text input without label (Playwright uses getByRole)
getByRole('checkbox')
getByRole('checkbox', { name: 'I agree to terms' })
Checkbox with label
getByLabel() - Select dropdowns
getByLabel('Country:')
Select dropdown with label (Playwright prefers getByLabel)
getByRole('combobox') - Without label
getByRole('combobox')
Select dropdown without label
getByText()
getByText('Sign in')
Simple text content
getByText('Price: $99.99')
Text with special characters
getByText("O'Connor, John")
Text with apostrophe
getByText('Product details', { exact: true })
Text with exact option (Playwright common pattern)
getByText('Loading...')
Loading text
Loading...
locator('span').filter({ hasText: 'Error occurred' })
Text in span with filter (Playwright alternative)
Error occurred
getByPlaceholder()
getByPlaceholder('Enter your email')
Email placeholder
getByPlaceholder('Search...')
Search placeholder
getByPlaceholder("Enter your name's value")
Placeholder with apostrophe
getByLabel() - Additional examples
getByLabel('Full Name:')
Form label with colon
getByLabel("User's Email")
Label with apostrophe
locator().filter({ hasText: ... })
locator('div').filter({ hasText: 'Product details' })
Div with text filter (Playwright common pattern)
Product details
iPhone 15 Pro Max - 256GB
locator('.notification').filter({ hasText: 'Your changes have been saved' })
Notification with text (CSS selector + filter)
Your changes have been saved
locator('.error').filter({ hasText: 'Field "email" is required' })
Error with escaped quotes
Field "email" is required
locator('div').filter({ hasText: "Let's Create Your Account" })
Text with apostrophe
Let's Create Your Account
getByRole('button').filter({ hasText: 'Save changes' })
Button with text filter (alternative pattern)
locator('div').filter({ hasText: /^For one person/ })
Filter with regex pattern
locator().filter({ has: ... })
locator('div').filter({ has: page.getByText('Required') })
Div containing child text element
Required
This field is required
locator('div').filter({ hasNot: page.getByText('Hidden') })
Div not containing text (hasNot filter)
Visible
This should be visible
Chained Locators
locator('div').filter({ hasText: 'Click here' }).getByRole('button')
Filter then getByRole (common Playwright pattern)
locator('section').filter({ hasText: /^Welcome/ }).getByRole('heading')
Filter with regex then getByRole
locator() - CSS Selectors
locator('#submit-button')
ID selector (Playwright fallback when role/text not available)
locator('.btn-primary')
Class selector
locator('input[type="text"]')
Attribute selector
getByTestId()
getByTestId('submit-button')
Button with test ID