Playwright Selectors

Selectors are used in Playwright to locate and interact with elements on a web page. Playwright provides multiple selector strategies that make tests more reliable and maintainable.

What is a Selector?

A selector identifies an element on a webpage so that Playwright can perform actions such as clicking, typing, verifying text, or extracting data.

Example:

await page.locator('#username').fill('admin');

Why Use Playwright Selectors?

  • Reliable element identification
  • Improved test stability
  • Better readability and maintenance
  • Supports modern web applications
  • Auto-waiting for elements

1. CSS Selectors

CSS selectors are commonly used to target elements using IDs, classes, attributes, and element names.

Select by ID

await page.locator('#loginBtn').click();

Select by Class

await page.locator('.submit-btn').click();

Select by Attribute

await page.locator('[type="submit"]').click();

Select by Element Name

await page.locator('button').click();

2. Text Selectors

Text selectors locate elements based on visible text. 

await page.getByText('Login').click();

Exact Match:

await page.getByText('Submit', { exact: true }).click();

3. Role Selectors (Recommended)

Role selectors use accessibility roles and are considered one of the best practices in Playwright. 

await page.getByRole('button', { name: 'Login' }).click();

Examples:

page.getByRole('link', { name: 'Home' });

page.getByRole('textbox', { name: 'Username' });

page.getByRole('checkbox');

page.getByRole('button');

4. Label Selectors

Used for form fields associated with labels. 

await page.getByLabel('Username').fill('admin');
await page.getByLabel('Password').fill('password');

5. Placeholder Selectors

Select elements using placeholder text. 

await page.getByPlaceholder('Enter username').fill('admin');

6. Alt Text Selectors

Used to locate images by their alt text. 

await page.getByAltText('Company Logo').click();

7. Title Selectors

Select elements using the title attribute. 

await page.getByTitle('Settings').click();

8. Test ID Selectors

Test IDs are highly recommended because they are stable and unaffected by UI changes.

HTML Example:

<button data-testid="login-button">Login</button>

Playwright:

await page.getByTestId('login-button').click();

9. XPath Selectors

Playwright supports XPath selectors, although CSS and role selectors are generally preferred. 

await page.locator('//button[text()="Login"]').click();

Using XPath with Attributes:

await page.locator('//input[@id="username"]').fill('admin');

10. Chained Selectors

Chaining helps narrow down element searches. 

await page
  .locator('.login-form')
  .locator('button')
  .click();

11. Filter Selectors

Filters help locate specific elements among multiple matches. 

await page
  .getByRole('listitem')
  .filter({ hasText: 'Product 1' })
  .click();

12. Parent and Child Selection

Child Element:

await page.locator('.container button').click();

Direct Child:

await page.locator('.container > button').click();

13. Multiple Attributes

await page.locator(
'input[type="text"][name="username"]'
).fill('admin');

14. nth() Selector

Select a specific element from multiple matches. 

await page.locator('.item').nth(0).click();

await page.locator('.item').nth(1).click();

15. First and Last Selectors

await page.locator('.item').first().click();

await page.locator('.item').last().click();

Best Practices for Selectors

  1. Prefer getByRole() whenever possible.
  2. Use getByTestId() for stable automation.
  3. Avoid long and complex XPath expressions.
  4. Use meaningful data-testid attributes.
  5. Keep selectors simple and maintainable.
  6. Leverage accessibility-based selectors.

Selector Priority Recommendation

Priority Selector Type
1 getByRole()
2 getByLabel()
3 getByPlaceholder()
4 getByTestId()
5 CSS Selectors
6 XPath Selectors

Conclusion

Playwright offers a rich set of selector strategies that make web automation more reliable and efficient. While CSS and XPath selectors are supported, accessibility-based selectors such as getByRole(), getByLabel(), and getByTestId() are recommended for creating robust and maintainable test scripts.

```