feat(e2e): support puppeteer v15

this commit increments the supported version of puppeteer from v14 to
v15.

starting with puppeteer v15, the library performs type
inference/deduction for the `evaluate()` function. this commit updates
the types (often removing them) at the advice spelled out in
puppeteer/puppeteer#8547.

package.json

@@ -116,7 +116,7 @@
     "postcss": "^8.2.8",
     "prettier": "2.8.0",
     "prompts": "2.4.2",
-    "puppeteer": "^14.4.1",
+    "puppeteer": "^15.5.0",
     "rollup": "2.42.3",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "semver": "^7.3.7",

src/sys/node/node-sys.ts

@@ -607,8 +607,8 @@ export function createNodeSys(c: { process?: any } = {}): CompilerSystem {
     '@types/jest': { minVersion: '24.9.1', recommendedVersion: '27.0.3', maxVersion: '27.0.0' },
     jest: { minVersion: '24.9.1', recommendedVersion: '27.0.3', maxVersion: '27.0.0' },
     'jest-cli': { minVersion: '24.9.0', recommendedVersion: '27.4.5', maxVersion: '27.0.0' },
-    puppeteer: { minVersion: '1.19.0', recommendedVersion: '14' },
-    'puppeteer-core': { minVersion: '1.19.0', recommendedVersion: '14' },
+    puppeteer: { minVersion: '1.19.0', recommendedVersion: '15' },
+    'puppeteer-core': { minVersion: '1.19.0', recommendedVersion: '15' },
     'workbox-build': { minVersion: '4.3.1', recommendedVersion: '4.3.1' },
   });
 

src/testing/puppeteer/puppeteer-element.ts

@@ -1,4 +1,4 @@
-import type { EventInitDict, HostElement, SerializedEvent } from '@stencil/core/internal';
+import type { EventInitDict, SerializedEvent } from '@stencil/core/internal';
 import { cloneAttributes, MockHTMLElement, parseHtmlToFragment } from '@stencil/core/mock-doc';
 import type * as puppeteer from 'puppeteer';
 
@@ -74,7 +74,7 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
     try {
       const executionContext = this._elmHandle.executionContext();
 
-      isVisible = await executionContext.evaluate((elm: HostElement) => {
+      isVisible = await executionContext.evaluate((elm) => {
         return new Promise<boolean>((resolve) => {
           window.requestAnimationFrame(() => {
             if (elm.isConnected) {
@@ -359,7 +359,7 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
 
   async getComputedStyle(pseudoElt?: string | null) {
     const style = await this._page.evaluate(
-      (elm: HTMLElement, pseudoElt: string) => {
+      (elm: Element, pseudoElt: string) => {
         const rtn: any = {};
 
         const computedStyle = window.getComputedStyle(elm, pseudoElt);
@@ -403,8 +403,8 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
 
     const executionContext = this._elmHandle.executionContext();
 
-    const rtn = await executionContext.evaluate<unknown>(
-      (elm: HTMLElement, queuedActions: ElementAction[]) => {
+    const rtn = await executionContext.evaluate(
+      (elm: Element, queuedActions: ElementAction[]) => {
         // BROWSER CONTEXT
         // cannot use async/await in here cuz typescript transpiles it in the node context
         return (elm as any).componentOnReady().then(() => {
@@ -472,7 +472,7 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal
   async e2eSync() {
     const executionContext = this._elmHandle.executionContext();
 
-    const { outerHTML, shadowRootHTML } = await executionContext.evaluate((elm: HTMLElement) => {
+    const { outerHTML, shadowRootHTML } = await executionContext.evaluate((elm) => {
       return {
         outerHTML: elm.outerHTML,
         shadowRootHTML: elm.shadowRoot ? elm.shadowRoot.innerHTML : null,
@@ -557,7 +557,7 @@ async function findWithCssSelector(
 
   if (shadowSelector) {
     const shadowHandle = await page.evaluateHandle(
-      (elm: HTMLElement, shadowSelector: string) => {
+      (elm: Element, shadowSelector: string) => {
         if (!elm.shadowRoot) {
           throw new Error(`shadow root does not exist for element: ${elm.tagName.toLowerCase()}`);
         }
@@ -587,7 +587,7 @@ async function findWithText(
   contains: string
 ) {
   const jsHandle = await page.evaluateHandle(
-    (rootElm: HTMLElement, text: string, contains: string) => {
+    (rootElm: Element, text: string, contains: string) => {
       let foundElm: any = null;
 
       function checkContent(elm: Node) {
@@ -670,7 +670,7 @@ export async function findAll(
       await shadowJsHandle.dispose();
 
       for (const shadowJsProperty of shadowJsProperties.values()) {
-        const shadowElmHandle = shadowJsProperty.asElement();
+        const shadowElmHandle = shadowJsProperty.asElement() as puppeteer.ElementHandle;
         if (shadowElmHandle) {
           const elm = new E2EElement(page, shadowElmHandle);
           await elm.e2eSync();

src/testing/puppeteer/puppeteer-page.ts

@@ -1,5 +1,5 @@
 import type { E2EProcessEnv, EmulateConfig, HostElement, JestEnvironmentGlobal } from '@stencil/core/internal';
-import type { ConsoleMessage, ConsoleMessageLocation, JSHandle, Page, WaitForOptions } from 'puppeteer';
+import type { ConsoleMessage, ConsoleMessageLocation, ElementHandle, JSHandle, Page, WaitForOptions } from 'puppeteer';
 
 import type {
   E2EPage,
@@ -77,7 +77,7 @@ export async function newE2EPage(opts: NewE2EPageOptions = {}): Promise<E2EPage>
         docPromise = page.evaluateHandle(() => document);
       }
       const documentJsHandle = await docPromise;
-      return documentJsHandle.asElement();
+      return documentJsHandle.asElement() as ElementHandle;
     };
 
     page.find = async (selector: FindSelector) => {
@@ -353,10 +353,10 @@ async function waitForChanges(page: E2EPageInternal) {
     }
 
     if (typeof (page as any).waitForTimeout === 'function') {
-      // https://github.com/puppeteer/puppeteer/issues/6214
-      await (page as any).waitForTimeout(100);
+      await page.waitForTimeout(100);
     } else {
-      await page.waitFor(100);
+      // in puppeteer v15, `waitFor` has been removed. this is kept only for puppeteer v14 and below support
+      await (page as any).waitFor(100);
     }
 
     await Promise.all(page._e2eElements.map((elm) => elm.e2eSync()));