[Feature]: Add native locator helpers for DOM traversal

[cctui-dev]

🚀 Feature Request

The addition of locator helpers such as .parent(), .parents(), .child(), .children(), .sibling() .next() and .prev() would provide the ability to traverse the DOM using native Playwright functionality.

Example

page.getByTestId('my-component').child().locator('input');

page.getByTestId('my-component').parent('foo');

Motivation

Working on large multi-language sites, I need to either flood pages with test IDs, rely on css selectors or use xpath.

Having extra locators to traverse the DOM natively with Playwright would be incredibly powerful, cut down on time spent talking to development teams to add test IDs and reduce flakiness using xpath or css selectors.

[Skn0tt]

I think both of your examples can already be expressed with existing Playwright locators:

• page.getByTestId('my-component').child().locator('input') -> page.getByTestId('my-component').locator('input')
• page.getByTestId('my-component').child().locator('input') -> page.locator('input').filter({ has: page.getByTestId('my-component') })

Seems similar to #23718, which we just closed yesterday. Let's collect feedback to see how much customer need there is for these helpers - please leave thumbs up on this issue if you agree that Playwright should add it.

[PsiKai]

Seems similar to #23718, which we just closed yesterday. Let's collect feedback to see how much customer need there is for these helpers - please leave thumbs up on this issue if you agree that Playwright should add it.

@Skn0tt that issue was closed by @mxschmitt for being too wide of scope, hence why @cctui-dev here has made a separate ticket.

---

I am here because I feel strongly that the native CSS selector operators + and ~ should have corresponding locator methods.

I test apps who use UI libs that do not pass through custom properties to DOM elements, nor do they provide good semantic DOM organization, so the traditional and best-practices approach to locating elements does not apply. I live with these issues and work around them, but the sibling selectors of all things should be supported, IMO.

If I've derived a locator with getBy* or other playwright-based locator methods, it is not possible to select siblings of these locators with out-of-the-box functionality, and I would be forced to select elements with raw CSS selectors, which often means refactoring many areas to be less than optimal/best-practice. I think this would be a quick win for the library. (of course I can do all sorts of things that fall out of the scope of best practice, so what I'm asking for is a codified way to handle these cases).

---

Since my use case is even narrower than the issue I'm commenting on, I'm happy to make a feature request for just a set of sibling locator methods. I am not as concerned about parents and children, because I already know how to make those work with out-of-the-box functionality.

Please let me know!