chore: remove type castings (#12322)

docs/api/puppeteer.page.__eval.md

@@ -107,9 +107,7 @@ If you are using TypeScript, you may have to provide an explicit type to the fir
 ## Example 2
 
 ```ts
-// if you don't provide HTMLInputElement here, TS will error
-// as `value` is not on `Element`
-await page.$$eval('input', (elements: HTMLInputElement[]) => {
+await page.$$eval('input', elements => {
   return elements.map(e => e.value);
 });
 ```
@@ -119,10 +117,7 @@ The compiler should be able to infer the return type from the `pageFunction` you
 ## Example 3
 
 ```ts
-// The compiler can infer the return type in this case, but if it can't
-// or if you want to be more explicit, provide it as the generic type.
-const allInputValues = await page.$$eval<string[]>(
-  'input',
-  (elements: HTMLInputElement[]) => elements.map(e => e.textContent)
+const allInputValues = await page.$$eval('input', elements =>
+  elements.map(e => e.textContent)
 );
 ```

packages/puppeteer-core/src/api/Page.ts

@@ -1232,9 +1232,7 @@ export abstract class Page extends EventEmitter<PageEvents> {
    * @example
    *
    * ```ts
-   * // if you don't provide HTMLInputElement here, TS will error
-   * // as `value` is not on `Element`
-   * await page.$$eval('input', (elements: HTMLInputElement[]) => {
+   * await page.$$eval('input', elements => {
    *   return elements.map(e => e.value);
    * });
    * ```
@@ -1246,11 +1244,8 @@ export abstract class Page extends EventEmitter<PageEvents> {
    * @example
    *
    * ```ts
-   * // The compiler can infer the return type in this case, but if it can't
-   * // or if you want to be more explicit, provide it as the generic type.
-   * const allInputValues = await page.$$eval<string[]>(
-   *   'input',
-   *   (elements: HTMLInputElement[]) => elements.map(e => e.textContent)
+   * const allInputValues = await page.$$eval('input', elements =>
+   *   elements.map(e => e.textContent)
    * );
    * ```
    *

test/src/click.spec.ts

@@ -441,8 +441,8 @@ describe('Page.click', function () {
       server.CROSS_PROCESS_PREFIX + '/input/button.html'
     );
     const frame = page.frames()[1];
-    await frame!.$eval('button', (button: Element) => {
-      return (button as HTMLElement).style.setProperty('position', 'fixed');
+    await frame!.$eval('button', button => {
+      return button.style.setProperty('position', 'fixed');
     });
     await frame!.click('button');
     expect(

test/src/elementhandle.spec.ts

@@ -58,7 +58,7 @@ describe('ElementHandle specs', function () {
         '<div style="width: 100px; height: 100px">hello</div>'
       );
       using elementHandle = (await page.$('div'))!;
-      await page.evaluate((element: HTMLElement) => {
+      await page.evaluate(element => {
         return (element.style.height = '200px');
       }, elementHandle);
       const box = await elementHandle.boundingBox();
@@ -260,7 +260,7 @@ describe('ElementHandle specs', function () {
 
       await page.goto(server.PREFIX + '/input/button.html');
       using button = (await page.$('button'))!;
-      await page.evaluate((button: HTMLElement) => {
+      await page.evaluate(button => {
         return button.remove();
       }, button);
       let error!: Error;
@@ -277,7 +277,7 @@ describe('ElementHandle specs', function () {
 
       await page.goto(server.PREFIX + '/input/button.html');
       using button = (await page.$('button'))!;
-      await page.evaluate((button: HTMLElement) => {
+      await page.evaluate(button => {
         return (button.style.display = 'none');
       }, button);
       const error = await button.click().catch(error_ => {
@@ -293,7 +293,7 @@ describe('ElementHandle specs', function () {
 
       await page.goto(server.PREFIX + '/input/button.html');
       using button = (await page.$('button'))!;
-      await page.evaluate((button: HTMLElement) => {
+      await page.evaluate(button => {
         return (button.parentElement!.style.display = 'none');
       }, button);
       const error = await button.click().catch(error_ => {
@@ -478,7 +478,7 @@ describe('ElementHandle specs', function () {
       expect(element2).toBeDefined();
       expect(
         await element2.evaluate(el => {
-          return (el as HTMLElement).innerText;
+          return el.innerText;
         })
       ).toStrictEqual('bar1');
     });

test/src/emulation.spec.ts

@@ -210,7 +210,7 @@ describe('Emulation', () => {
       await page.emulate(iPhone);
       await page.goto(server.PREFIX + '/input/button.html');
       using button = (await page.$('button'))!;
-      await page.evaluate((button: HTMLElement) => {
+      await page.evaluate(button => {
         return (button.style.marginTop = '200px');
       }, button);
       await button.click();

test/src/evaluation.spec.ts

@@ -386,7 +386,7 @@ describe('Evaluation specs', function () {
       await element.dispose();
       let error!: Error;
       await page
-        .evaluate((e: HTMLElement) => {
+        .evaluate(e => {
           return e.textContent;
         }, element)
         .catch(error_ => {

test/src/input.spec.ts

@@ -168,7 +168,7 @@ describe('input tests', function () {
         page.waitForFileChooser(),
         page.waitForFileChooser(),
         page.$eval('input', input => {
-          return (input as HTMLInputElement).click();
+          return input.click();
         }),
       ]);
       expect(fileChooser1 === fileChooser2).toBe(true);
@@ -192,12 +192,12 @@ describe('input tests', function () {
       ]);
       expect(
         await page.$eval('input', input => {
-          return (input as HTMLInputElement).files!.length;
+          return input.files!.length;
         })
       ).toBe(1);
       expect(
         await page.$eval('input', input => {
-          return (input as HTMLInputElement).files![0]!.name;
+          return input.files![0]!.name;
         })
       ).toBe('file-to-upload.txt');
     });
@@ -209,8 +209,7 @@ describe('input tests', function () {
         return chooser.accept([FILE_TO_UPLOAD]);
       });
       expect(
-        await page.$eval('input', async picker => {
-          const pick = picker as HTMLInputElement;
+        await page.$eval('input', async pick => {
           pick.click();
           await new Promise(x => {
             return (pick.oninput = x);
@@ -234,8 +233,7 @@ describe('input tests', function () {
         return chooser.accept([FILE_TO_UPLOAD]);
       });
       expect(
-        await page.$eval('input', async picker => {
-          const pick = picker as HTMLInputElement;
+        await page.$eval('input', async pick => {
           pick.click();
           await new Promise(x => {
             return (pick.oninput = x);
@@ -247,8 +245,7 @@ describe('input tests', function () {
         return chooser.accept([]);
       });
       expect(
-        await page.$eval('input', async picker => {
-          const pick = picker as HTMLInputElement;
+        await page.$eval('input', async pick => {
           pick.click();
           await new Promise(x => {
             return (pick.oninput = x);
@@ -301,8 +298,7 @@ describe('input tests', function () {
         return chooser.accept(['file-does-not-exist.txt']);
       });
       expect(
-        await page.$eval('input', async picker => {
-          const pick = picker as HTMLInputElement;
+        await page.$eval('input', async pick => {
           pick.click();
           await new Promise(x => {
             return (pick.oninput = x);
@@ -325,7 +321,7 @@ describe('input tests', function () {
       const [fileChooser] = await Promise.all([
         page.waitForFileChooser(),
         page.$eval('input', input => {
-          return (input as HTMLInputElement).click();
+          return input.click();
         }),
       ]);
       await fileChooser.accept([]);
@@ -350,7 +346,7 @@ describe('input tests', function () {
       const [fileChooser1] = await Promise.all([
         page.waitForFileChooser(),
         page.$eval('input', input => {
-          return (input as HTMLInputElement).click();
+          return input.click();
         }),
       ]);
       await fileChooser1.cancel();
@@ -358,7 +354,7 @@ describe('input tests', function () {
       await Promise.all([
         page.waitForFileChooser(),
         page.$eval('input', input => {
-          return (input as HTMLInputElement).click();
+          return input.click();
         }),
       ]);
     });
@@ -369,7 +365,7 @@ describe('input tests', function () {
       const [fileChooser] = await Promise.all([
         page.waitForFileChooser(),
         page.$eval('input', input => {
-          return (input as HTMLElement).click();
+          return input.click();
         }),
       ]);
       await fileChooser.cancel();

test/src/locator.spec.ts

@@ -750,7 +750,7 @@ describe('Locator', function () {
       await page.setContent(`<div onclick="window.clicked = true">test</div>`);
       await page
         .locator(() => {
-          return document.getElementsByTagName('div')[0] as HTMLDivElement;
+          return document.getElementsByTagName('div')[0]!;
         })
         .click();
       await expect(

test/src/page.spec.ts

@@ -285,7 +285,7 @@ describe('Page', function () {
       const [popup] = await Promise.all([
         waitEvent<Page>(page, 'popup'),
         page.$eval('a', a => {
-          return (a as HTMLAnchorElement).click();
+          return a.click();
         }),
       ]);
       expect(
@@ -1830,7 +1830,7 @@ describe('Page', function () {
         path: path.join(__dirname, '../assets/injectedstyle.css'),
       });
       using styleHandle = (await page.$('style'))!;
-      const styleContent = await page.evaluate((style: HTMLStyleElement) => {
+      const styleContent = await page.evaluate(style => {
         return style.innerHTML;
       }, styleHandle);
       expect(styleContent).toContain(path.join('assets', 'injectedstyle.css'));
@@ -2144,11 +2144,9 @@ describe('Page', function () {
       await page.select('select');
       expect(
         await page.$eval('select', select => {
-          return Array.from((select as HTMLSelectElement).options).every(
-            option => {
-              return !option.selected;
-            }
-          );
+          return Array.from(select.options).every(option => {
+            return !option.selected;
+          });
         })
       ).toEqual(true);
     });
@@ -2160,11 +2158,9 @@ describe('Page', function () {
       await page.select('select');
       expect(
         await page.$eval('select', select => {
-          return Array.from((select as HTMLSelectElement).options).filter(
-            option => {
-              return option.selected;
-            }
-          )[0]!.value;
+          return Array.from(select.options).filter(option => {
+            return option.selected;
+          })[0]!.value;
         })
       ).toEqual('');
     });

test/src/queryselector.spec.ts

@@ -43,7 +43,7 @@ describe('querySelector', function () {
       const text = await page.$eval(
         'section',
         (e, div) => {
-          return e.textContent! + (div as HTMLElement).textContent!;
+          return e.textContent! + div.textContent!;
         },
         divHandle
       );
@@ -108,7 +108,7 @@ describe('querySelector', function () {
           return (
             sections.reduce((acc, section) => {
               return acc + Number(section.textContent);
-            }, 0) + Number((div as HTMLElement).textContent)
+            }, 0) + Number(div.textContent)
           );
         },
         divHandle
@@ -161,7 +161,7 @@ describe('querySelector', function () {
       const elements = await page.$$('div');
       expect(elements).toHaveLength(2);
       const promises = elements.map(element => {
-        return page.evaluate((e: HTMLElement) => {
+        return page.evaluate(e => {
           return e.textContent;
         }, element);
       });
@@ -330,7 +330,7 @@ describe('querySelector', function () {
       const elements = await html.$$('div');
       expect(elements).toHaveLength(2);
       const promises = elements.map(element => {
-        return page.evaluate((e: HTMLElement) => {
+        return page.evaluate(e => {
           return e.textContent;
         }, element);
       });
@@ -463,7 +463,7 @@ describe('querySelector', function () {
           return (
             sections.reduce((acc, section) => {
               return acc + Number(section.textContent);
-            }, 0) + Number((div as HTMLElement).textContent)
+            }, 0) + Number(div.textContent)
           );
         },
         divHandle

test/src/requestinterception-experimental.spec.ts

@@ -141,7 +141,7 @@ describe('cooperative request interception', function () {
       `);
       await Promise.all([
         page.$eval('form', form => {
-          return (form as HTMLFormElement).submit();
+          return form.submit();
         }),
         page.waitForNavigation(),
       ]);
@@ -631,7 +631,7 @@ describe('cooperative request interception', function () {
       void (page.$eval(
         'iframe',
         (frame, url) => {
-          return ((frame as HTMLIFrameElement).src = url as string);
+          return (frame.src = url as string);
         },
         server.EMPTY_PAGE
       ),

test/src/requestinterception.spec.ts

@@ -70,7 +70,7 @@ describe('request interception', function () {
       `);
       await Promise.all([
         page.$eval('form', form => {
-          return (form as HTMLFormElement).submit();
+          return form.submit();
         }),
         page.waitForNavigation(),
       ]);
@@ -550,7 +550,7 @@ describe('request interception', function () {
       void (page.$eval(
         'iframe',
         (frame, url) => {
-          return ((frame as HTMLIFrameElement).src = url as string);
+          return (frame.src = url);
         },
         server.EMPTY_PAGE
       ),

test/src/utils.ts

@@ -88,12 +88,10 @@ export async function detachFrame(
   pageOrFrame: Page | Frame,
   frameId: string
 ): Promise<void> {
-  await pageOrFrame.evaluate(detachFrame, frameId);
-
-  function detachFrame(frameId: string) {
+  await pageOrFrame.evaluate(frameId => {
     const frame = document.getElementById(frameId) as HTMLIFrameElement;
     frame.remove();
-  }
+  }, frameId);
 }
 
 export async function navigateFrame(
@@ -101,15 +99,17 @@ export async function navigateFrame(
   frameId: string,
   url: string
 ): Promise<void> {
-  await pageOrFrame.evaluate(navigateFrame, frameId, url);
-
-  function navigateFrame(frameId: string, url: string) {
-    const frame = document.getElementById(frameId) as HTMLIFrameElement;
-    frame.src = url;
-    return new Promise(x => {
-      return (frame.onload = x);
-    });
-  }
+  await pageOrFrame.evaluate(
+    (frameId, url) => {
+      const frame = document.getElementById(frameId) as HTMLIFrameElement;
+      frame.src = url;
+      return new Promise(x => {
+        return (frame.onload = x);
+      });
+    },
+    frameId,
+    url
+  );
 }
 
 export const dumpFrames = async (

test/src/waittask.spec.ts

@@ -225,7 +225,7 @@ describe('waittask specs', function () {
           return (resolved = true);
         });
       expect(resolved).toBe(false);
-      await page.evaluate((element: HTMLElement) => {
+      await page.evaluate(element => {
         return element.remove();
       }, div);
       await waitForFunction;