From a54dbaae881aee5ea33281bfbf3e838cc6872ef4 Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Thu, 3 Nov 2022 08:48:05 -0400 Subject: [PATCH] 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 https://github.com/puppeteer/puppeteer/pull/8547. --- package.json | 2 +- src/sys/node/node-sys.ts | 4 ++-- src/testing/puppeteer/puppeteer-element.ts | 18 +++++++++--------- src/testing/puppeteer/puppeteer-page.ts | 10 +++++----- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 5178d0c47bd..8578fd0a35f 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "postcss": "^8.2.8", "prettier": "2.7.1", "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", diff --git a/src/sys/node/node-sys.ts b/src/sys/node/node-sys.ts index 5dfeaed8606..e9385eab02b 100644 --- a/src/sys/node/node-sys.ts +++ b/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' }, }); diff --git a/src/testing/puppeteer/puppeteer-element.ts b/src/testing/puppeteer/puppeteer-element.ts index 0c90093f393..6fe957012f1 100644 --- a/src/testing/puppeteer/puppeteer-element.ts +++ b/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((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( - (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(); diff --git a/src/testing/puppeteer/puppeteer-page.ts b/src/testing/puppeteer/puppeteer-page.ts index 70ec2b96c3e..8eafbe562b7 100644 --- a/src/testing/puppeteer/puppeteer-page.ts +++ b/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 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()));