What are the best practices for using locators in Playwright?

Answer

Question: how to use locators

Answer:

Locators are key in web automation testing. They help identify webpage elements for automated tests to interact with. Here's how you can use locators effectively in @playwright/test.

Chaining and Filtering Locators

You can chain and filter locators to narrow down the search for a specific element. For instance, you can filter locators by text or another locator using the filter() method.

const locator = page.locator('.my-element').filter('[disabled]');

Prefer User-Facing Attributes

Avoid XPath or CSS selectors. Your DOM structure can change, causing tests to fail. Instead, use locators that are resilient to DOM changes.

Use Playwright's Test Generator

Playwright's test generator can generate tests and pick locators for you. It prioritizes role, text, and test ID locators.

// Run this command to pick a locator
npx playwright codegen https://ray.run

Leverage the Locators API

Playwright's new Locators API provides a powerful way of working with elements. Locators represent views of element(s) and capture logic sufficient to retrieve those elements at any given moment.

In summary, you can use locators in Playwright by chaining and filtering them, preferring user-facing attributes, generating them automatically, picking them manually, or using the Locators API.