fix(types): enable type errors w. $x() empty array

[karlhorky]

First of all, thanks for all of your continued effort on Puppeteer, really amazing project!

What kind of change does this PR introduce?

Bugfix - if page.$x returns an empty array, throw type error when runtime error possible.

For example, the runtime error below would also become a type error:

// Non-existent button selected below, causing runtime error but no type error
const [button] = await page.$x("//button[text()='non-existent']");
button.click(); // 💥 TypeError: Cannot read properties of undefined (reading 'click')

It would require code to guard against undefined:

const [button] = await page.$x("//button[text()='non-existent']");
if (button) {
  button.click(); // ✅
}

Did you add tests for your changes?

No, but I can update tests if necessary

If relevant, did you update the documentation?

I'm hoping the documentation is auto-generated from the TS types, but if necessary I can update the docs manually.

Summary

Motivation is described above.

Does this PR introduce a breaking change?

Yes, this is a breaking change for the types.

Other information

Alternatives considered

A workaround that we've explored for now (although not as nice as the destructuring in the original post above):

const buttons = await page.$x("//button[text()='non-existent']");
if (buttons.length > 0) {
  buttons[0].click(); // ✅
}

The reason why the destructuring + simple guard at the top of this post doesn't work for us is because of @typescript-eslint/no-unnecessary-condition, which recognizes this as an unnecessary condition:

This is because TypeScript will return the type of ElementHandle<Element> for the first destructured element, which will always be truthy.

[OrKoN]

Hey, thanks for PR! I think you want to use --noUncheckedIndexedAccess TS flag (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#checked-indexed-accesses---nouncheckedindexedaccess) instead of changing the types here. The proposed change implies that the following [undefined, undefined] is a valid response from Puppeteer but it's not the case.

Also, I have created an example in TS playground that demonstrates how the flag checks for array index access: https://www.typescriptlang.org/play?&noUncheckedIndexedAccess=true#code/KYDwDg9gTgLgBAYwDYEMDOa4EE4G8BQcRcAJhABQCUehxdCEAdmhEsAHRIQDm5A5GUbA+lANy0iAX3zT86AJ6MEcAGYBXJTACWTODGBoYVAFxwAClAgBbLWmAAeLFCgp5jgHzua9JobhQDNSR4AF44AG0AXXEJf2AYNShGCOiZfHwGZnhw4CRIuDCUAHcULXh9QypxXPYyKrgAega4ABV5MGBEAAtgBABrdK0VOHJc6gI6GrqxGSA

We currently not even running TypeScript in the strict mode but we should also enable this flag for Puppeteer itself after we finish the strict mode support: #6769 (cc @jrandolf)

[karlhorky]

I think you want to use --noUncheckedIndexedAccess TS flag

Ah yes indeed! I remember reading these release notes, but somehow missed how this could be useful to us

I'll turn it on, thanks!

Sorry for the PR noise!