What are the best practices for using locators in Playwright?


Question: how to use locators


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.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.