Playwright Selecting Elements that Contain Other Elements

This article will cover an exciting topic on selecting elements that contain another element. This means we will be selecting a parent element containing the child element.

With the help of playwright CSS pseudocode, we will be handling this.

For example, we will be automating the ivagus site.

Open codegen using the command with your site name.

npx playwright codegen https://www.ivagus.com

The site is open now. Let us inspect and work on some cool stuff.

Let us try to fetch all of the texts from this link footer place alone.

Now how shall we do this?

When hovering over this part, we see that this parent contains all the texts inside.

Let us move to the console part and write our personalized locator.

div#block-gavias-vitaco-linkfooter:has(a[href='#'])

We can see this in the console using this pseudo locator. It has fetched the parent part of the element.
We simply used div and id followed by ':' and 'has' within the child element CSS locator bracket.

This is the child.

await page.goto("https://www.ivagus.com/");

const linkFooter = await page.locator("div#block-gavias-vitaco-linkfooter:has(a[href='#'])").allInnerTexts();
for await (const Texts of linkFooter){
   console.log(Texts)
}

Using the allInnerTexts method, we managed to get the texts of the texts present within this parent using its great-grandchild present within it.

Conclusion:

In the same way, we can select all elements which contain another element.