How do I locate a parent element using Playwright?

Answer

To locate a parent element in @playwright/test, you can chain locators and use filters. First, use the getByRole method to find an element with a specific role. Then, chain the filter method to narrow down the search based on the parent element's text.

Here's an example:

const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });

This code locates a list item with the text "Product 2". Once you have the parent element, use another locator method like getByRole or getByTestId to find its child elements. If you need multiple child elements, use filter instead of chaining locators.

Remember to use user-facing attributes for selecting elements, as relying on XPath or CSS selectors can lead to failing tests if the DOM structure changes.

Playwright offers tools to generate locators, like the test generator tool that suggests locator methods based on role, text content, and test id attributes. In VS Code's testing sidebar, the Pick Locator button lets you select an element and copy its locator into your code file.

Using Playwright's locator methods and tools, you can easily locate parent elements for your tests.