What is the right way of clicking an ElementHandle<Node> since v15.3.1

[Qlub53]

I used to use page.$x(expression) and elementHandle.click([options]) with puppeteer v13.4 just fine.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const handles = await page.$x('xpath');
await handles[0].click();

But now since the API signatures have changed ($x(expression) and click(this, options)), the above usage ends up with the following tsc compilation error:

error TS2684: The 'this' context of type 'ElementHandle<Node>' is not assignable to method's 'this' of type 'ElementHandle<Element>'.

7 await handles[0].click();
        ~~~~~~~~~~

How shall I transit from using Element to using Node?

Originally posted by @Qlub53 in #8552 (comment)

[OrKoN]

I think this is expected since XPath selectors might return not only elements. Try the following: await (handles[0] as ElementHandle<Element>).click(); if the selector is guaranteed to contain an element.

[Qlub53]

Yeah, I circumvented it with type casting, too.
But having to type cast every single time makes the code really unpleasant to read.

Maybe this is one of few occasions where javascript is more attractive than typescript. 😂

[OrKoN]

@jrandolf What do you think? Can we do something to be type-correct but also make it easier for xpath users? e.g., maybe infer the type from the selector similar to what we do for CSS selectors?

[jrandolf]

There are no plans to fix this anytime soon. See #8579 for potential alternatives being discussed.