fix: extends ElementHandle to Nodes

[jrandolf]

This PR adjusts some incorrect types within Puppeteer:

• The base type parameter for ElementHandle is now Node instead of Element.
• The default type parameter for ElementHandle is still Element.
• QueryHandlers now use Node types.

[OrKoN]

In what cases can an ElementHandle contain a Node?

[jrandolf]

In what cases can an ElementHandle contain a Node?

See _createJSHandle. Basically, ElementHandles are created from Nodes (not Elements). For example, evaluateHandle(() => document) will return a valid ElementHandle. Similarly for queries involving ShadowRoots.

[OrKoN]

are any updates needed for api.md for these changes?

[jrandolf]

are any updates needed for api.md for these changes?

There are a lot of updates for api.md, but DocLint doesn't support the advanced typings made in previous stages. I propose we merge this and hold on release until we get some documentation (should be complete by next week).

[OrKoN]

@jrandolf wdyt about doing a release now (I assume previous PRs don't need api.md changes) and postponing landing this until the documentation is ready? Today or tomorrow we also need to roll M104 which would be nice to release as soon as possible too so I would not like to block a release on anything.

[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?

[Qlub53]

I was able to get away with this problem by type casting.

await (handles[0] as ElementHandle<Element>).click();

Turns out it in fact still works at runtime and only bugs me during compile time.

It's not pretty, but it works. :/