Handling Different Selectors in Playwright

Understanding Locators in Playwright

When automating web applications using Playwright, one of the most important concepts to master is locators. Locators help your script identify and interact with elements on a web page, such as buttons, input fields, or links. Playwright provides a powerful and reliable way to handle locators, making your test scripts more stable and efficient.

✅ What is a Locator in Playwright?

A locator is an object in Playwright that allows you to interact with a specific DOM element on the page. Unlike traditional approaches that find elements immediately, Playwright locators wait for the element to be ready before performing actions like clicking or typing, reducing the risk of flaky tests.

🔍 Common Locator Strategies in Playwright

Playwright supports multiple strategies to locate elements:

Strategy Example Use Case

Text Selector page.getByText("Login") Matches by visible text

Role Selector page.getByRole("button", { name: "Submit" }) Uses ARIA roles for accessibility

CSS Selector page.locator(".btn-primary") Matches based on CSS classes

XPath Selector page.locator("//div[@id='main']") Useful for complex DOM hierarchies

Attribute Selector page.locator('[data-test="email"]') Matches based on custom attributes

Nth Element page.locator("li").nth(2) Targets a specific item in a list

🛠️ Using Locators in Tests (Example in TypeScript)

typescript

Copy

Edit

const loginButton = page.getByText("Login");

await loginButton.click();

const emailInput = page.locator('#email');

await emailInput.fill("test@example.com");

💡 Best Practices for Locators

Prefer role and text-based locators: They're readable and less likely to break.

Use data attributes (data-testid) for more stable targeting.

Avoid brittle selectors: Like long XPath or complex class chains.

Use getByRole for accessibility: Ensures you're testing real user interactions.

🔄 Locator vs ElementHandle

locator() gives you a smart reference to the element and retries automatically.

elementHandle() grabs a snapshot of the element at that moment—less flexible and riskier for dynamic pages.

🧠 Conclusion

Locators in Playwright are designed for speed, reliability, and maintainability. Mastering them helps you write tests that are cleaner, less flaky, and easier to understand. Whether you’re a beginner or an experienced QA engineer, using the right locator strategy is key to successful test automation.

Would you like a quick cheatsheet of the most commonly used Playwright locators?

You said:

Handling Different Selectors in Playwright

Please write in English language.

ChatGPT said:

Handling Different Selectors in Playwright

In Playwright, selectors are essential for identifying and interacting with elements on a webpage. Since modern web applications are often dynamic and complex, Playwright supports a variety of selectors to make automation scripts more reliable and readable.

Here’s a guide to the different types of selectors in Playwright and how to use them effectively.

✅ 1. Text Selector

Used to select elements by their visible text.

typescript

Copy

Edit

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

Best for: Buttons, links, and labels

Tip: It matches visible text, so it’s intuitive and user-friendly.

✅ 2. Role Selector (ARIA)

Targets elements based on their accessibility role and name.

typescript

Copy

Edit

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

Best for: Accessible and semantic HTML

Benefits: More resilient and readable; mimics user interaction

✅ 3. CSS Selector

Uses standard CSS syntax to locate elements.

typescript

Copy

Edit

await page.locator('.form-input');

await page.locator('#username');

Best for: Precise targeting with class, ID, or element names

Tip: Keep CSS selectors short and stable (avoid long, chained selectors)

✅ 4. XPath Selector

Selects elements based on XPath expressions.

typescript

Copy

Edit

await page.locator('//input[@type="email"]');

Best for: Navigating complex or deeply nested DOM trees

Caution: XPath can be fragile and hard to maintain

✅ 5. Attribute Selector

Matches elements based on specific attributes like name, type, or custom data-* attributes.

typescript

Copy

Edit

await page.locator('[data-test="email-field"]');

Best for: Custom attributes intended for test automation

Tip: Use data-testid or data-qa for cleaner test code

✅ 6. nth Selector (Index-Based)

Used to target a specific element when multiple matches are found.

typescript

Copy

Edit

await page.locator('li').nth(2).click(); // clicks the third item

Best for: Lists, tables, or repeated elements

✅ 7. Chained Selectors

You can chain selectors to navigate within elements.

typescript

Copy

Edit

await page.locator('.form-section').locator('input[type="password"]').fill('secret');

Best for: Scoping actions within specific containers

🧠 Best Practices

Prefer role and text selectors for clarity and resilience.

Use data- attributes* to make your tests more robust and independent of UI changes.

Avoid overusing XPath unless necessary.

Keep selectors short, meaningful, and maintenance-friendly.

🔍 Conclusion

Handling different selectors in Playwright gives you the flexibility to write stable, readable, and maintainable tests. Choosing the right selector depends on your application’s structure and the purpose of the test. The key is to prioritize readability and robustness over quick fixes.

Learn Playwright Training Course in Hyderabad

Read More

Understanding Locators in Playwright

Exploring Playwright’s Auto-Waiting Mechanism

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions