Recursive $/$$

[notgne2]

Maybe add the ability to get child elements on ElementHandle instances, using $, and $$, syntax should work like:

let $header = await page.$("div.header")
let $homeLink = await $header.$("a.home")

await $homeLink.click()

Along with $$, this would make iterating pages with recursive structures so much more easier, no longer requiring it all to be kept inside of .evaluate callbacks.

Such as:

let $results = await page.$$(".result")

for (let $result of $results) {
    let $title = await $result.$(".title")

    let title await $title.evaluate(($) => $.innerText)
    console.log(`Title: ${title}`)

    let resUrl = await $title.evaluate(($) => $.href)
    console.log(`Result URL: ${resUrl}`)
    
    let $sourceLinks = await $result.$$(".sources")

    for (let $sourceLink of $sourceLinks) {
        let sourceUrl = await $sourceLink.evaluate(($) => $.href)
        console.log(`Source URL: ${sourceUrl}`)
    }
}

Don't think this would be too hard to implement, and work make automation a lot easier

[aslushnikov]

This gonna be a part of object handles story: #382

[kidwm]

@aslushnikov So when can we use something like ElementHandle.$()?

[aslushnikov]

@kidwm I'd be happy to review a pull request with tests and documentation. This should be easy to do similarly to the Frame.$ and Frame.$$. Check out the CONTRIBUTING.md for the tips on development and running tests.