Playwright Locators Demo

Practice Playwright locator strategies with this interactive demo. Each section demonstrates a different locator method from the Playwright documentation. Use this page to learn and test different ways to locate elements.

1. getByRole()

Locate elements by their ARIA role and accessible name. This is the most resilient locator strategy.

I agree to the terms and conditions

Basic Plan Pro Plan Enterprise Plan

2. getByText()

Locate elements by their text content. Useful for finding elements with specific visible text.

This is a paragraph with specific text content that can be located.

Welcome to Testing

Playwright Makes Testing Easy

First list item with unique text
Second list item for testing
Third item in the list
Final list item here

3. getByLabel()

Locate form controls by their associated label text. Best for form inputs.

Full Name

Email Address

4. getByPlaceholder()

Locate input elements by their placeholder text.

5. getByAltText()

Locate images and elements by their alt text attribute.

6. getByTitle()

Locate elements by their title attribute, often used for tooltips.

Hover over this text to see the title attribute in action.

7. getByTestId()

Locate elements by their data-testid attribute. Useful for elements that change frequently.

User Profile Card

This card has a data-testid attribute for reliable testing.

Dynamic content area: Loading...

8. CSS Locator (Fallback)

Use CSS selectors as a last resort when semantic locators aren't available.

⚠️ Use CSS locators sparingly! They're brittle and break easily when the DOM structure changes. Always prefer semantic locators (role, label, text) first.

This element is deliberately hard to target semantically