playwright find child element(s) within locator

Question

I'm trying to write a function to find child(ren) element(s) within a locator something like:

async findElements(locator: Locator){
  return locator.querySelector(some/xpath/or/css);
}

However, I'm seeing the querySelector is not available in Locator. What is the equivalent of querySelector?

Answer 1

I figured it out,

locator.locator(some/xpath/)

or

locator.locator(some_locator)

Or, if you don't already have a variable called "locator"

page.locator(parent_selector).locator(child_selector)

where parent_selector and child_selector are strings that contain selectors

https://playwright.dev/docs/api/class-locator#locator-locator

Answer 2

You may use Filter by child/descendant:

Simple Example:

await page
    .getByRole('listitem')
    .filter({ has: page.getByRole('heading', { name: 'Product 2' }) })
    .getByRole('button', { name: 'Add to cart' })
    .click();