Sure, let's dive into how you can extend a locator in Playwright.
You can chain locators together using
getByRole() and filter them by text or another locator. This helps you create more specific locators that can withstand changes in the DOM. Here's an example:
const button = page.locator('button').withText('Submit');
When creating locators, it's better to use user-facing attributes instead of XPath or CSS selectors. This is because your DOM structure may change, causing your tests to fail if they depend on specific CSS classes or XPath expressions.
Playwright's test generator tool can help you generate locators. This tool analyzes your page and generates tests with prioritized locators based on role, text, and test id attributes.
Playwright's new Locators API provides even more flexibility for extending locators. A Locator represents a view of one or more elements on a page and captures the logic needed to retrieve those elements at any given moment.
const locator = page.locator('.my-class');
In summary, there are several ways in which you can extend a locator in Playwright. For more information, check out Understanding the Difference Between Locators and Selectors in @playwright/test.
If you still have questions, please ask a question and I will try to answer it.
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 email@example.com.