How can I iterate over a list of elements using Playwright in C# and return information from child elements too

Question

I am trying to iterate over a list of elements and extract information from that element and its child elements.

<div id="parent-content-div">
   <a title="BBC" href="www.bbc.co.uk">
      <div class="category">News</div>
   </a>
   <a title="Google" href="www.google.com">
      <div class="category">Search</div>
   </a>
   <a title="YouTube" href="www.youtube.com">
      <div class="category">Entertainment</div>
   </a>
</div>

I have created a locator to identify the <a> elements within the parent div as follows:

ILocator Websites = _page.Locator("div[id='parent-content-div']").Locator("a");

This is what I've got so far (and allows me to extract the title and href).

foreach(var element in Websites.ElementHandlesAsync())
{
    Console.WriteLine(element.GetAttributeAsync("title"));
    Console.WriteLine(element.GetAttributeAsync("href"));
}

But how do I then query for further sub elements? Something like?

foreach(var element in Websites.ElementHandlesAsync())
{
    ...
    
    Console.WriteLine(element.GetInnerElement("div[class='category']")).Text;
}

Except that last line is pseudo code rather than something real!

Answer 1

OK, I got there..

foreach(var element in Websites.ElementHandlesAsync())
{
    Console.WriteLine(await element.EvalOnSelectorAsync<string>("div[class='category']), "sel => sel.innerText);
}

Answer 2

This is language agnostic solution using CSS:

Locator for getting all a's titles:

'div[id="parent-content-div"] a[title]'

Locator for getting all a's hrefs:

'div[id="parent-content-div"] a[href]'

Locator for getting all a's divs:

'div[id="parent-content-div"] a[title] div[class="category"]'

And so on..similarly you can find any locator in the tree as long you can identify an unique locator path to reach that locator.

#playwright #CSS