[Question] How to get direct descendant from a locator

[A-ZC-Lau]

How do I target only direct children from a locator that already has a target?

Example:

import { test, expect, Page } from "@playwright/test";

test("direct descendant", async ({ page }) => {
    await page.goto("http://www.uitestingplayground.com/sampleapp");

    const containerLocator = page.locator("div.container");
    const immediateChildren = containerLocator.locator("> div");

    const count = await immediateChildren.count();
    expect(count).toBe(4);
});

I get the error locator.count: Unexpected token ">" while parsing selector "> div"

Even css="> div" doesn't work

[dgozman]

@A-ZC-Lau Does the following work for you? If it does, we'll look into improving the story here.

const immediateChildren = containerLocator.locator(":root > div");

[A-ZC-Lau]

@dgozman No. Did it work for you when you used it in my example code? I get 0 results

[A-ZC-Lau]

@dgozman I had to change to xpath, i.e. xpath=/div

[dgozman]

@A-ZC-Lau My bad, it should be containerLocator.locator(":scope > div"). Anyway, your xpath solution is also nice!

Overall, let us think whether we can improve the locators story.

[A-ZC-Lau]

closing this as there's a commit