From a1f88626ede3c53829c639937e11c887e57aceea Mon Sep 17 00:00:00 2001 From: Ryan Waskiewicz Date: Tue, 29 Nov 2022 11:16:39 -0500 Subject: [PATCH] feat(e2e): add support for puppteer v19 (#3810) this commit adds support for puppeteer v19. it is added to the stencil v3.0.0 development branch, as puppeteer v14 no longer supports node v12, which stencil v2 still does. each section below describes the work done for each version of puppeteer. # Puppeteer v11, v12, v13 v11, v12, v13 all did not require any changes to the stencil codebase. # Puppeteer v14 the package is now declared in `package.json` using a caret ("^") instead of a tilde ("~"). the author (rwaskiewicz) was being cautious at the time when making the change to support v10 of stencil in https://github.com/ionic-team/stencil/pull/2934, to a degree that is no longer necessary (it their early days on Stencil, and was being conservative) v14 of puppeteer introduced private fields in their source code. this affected stencil's validation scripts for type declaration files, as the default settings would create a TypeScript `program` that could not be properly compiled/validated. the `moduleResolution` and `target` fields needed to be explicitly set to allow the transpiled `.d.ts` to pass validation. this is a result of cascading defaults where for the `createProgram` call: - the `target` field defaults to "ES3" - the `target` default causes the `module` field to default to "CommonJS" - the `module` default causes `moduleResolution` to default to "classic", which can't resolve the new type declaration file. as a result, we explicitly set this field - the `target` field is set to support the private identifiers in puppeteer # 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. # Puppeteer v16 v16 did not require any changes in the codebase. # Puppeteer v17 puppeteer v17 made accessing a puppeteer `ExecutionContext`, an entity used to run javascript, an internal entity. previously, stencil would directly access retrieve an `ExecutionContext` from a helper function that is no longer exposed. to work around this in puppeteer v17+, two different strategies for getting access to this entity have been added. Each strategy is dependent on how we were previously accessing the `ExecutionContext`. 1. `ElementHandle` Scenario in this scenario, an `ExecutionContext` was being pulled off an `ElementHandle` instance. the suggested way of getting an `ExecutionContext` in puppeteer v17+ for an `ElementHandle` is through the `frame` getter on the `ElementHandle` instance. doing so does not work in puppeteer v16 and below. for those versions of puppeteer v16 and below, stencil will default to the original `executionContext()` behavior. otherwise, the return value of the `frame` getter is returned from a new utility method. in order to determine which version of puppeteer is used, a mechanism for reading the puppeteer `package.json#version` field has been added. this avoids clunky prototype lookups that have been used in the past, and are not always the safest way to detect the version of puppeteer being used (e.g. a field may exist on the prototype chain of an object in 2 different versions of puppeteer, but do very different things). 2. `JSHandle` Scenario accessing a `JSHandle`'s `ExecutionContext` is necessary in `puppeteer-event.ts`. because this is the only instance where stencil would get an `ExecutionContext` from a `JSHandle`, no utility function for retrieving an `ExecutionContext` was created. rather, the same effect can be achieved in a backwards compatible way by calling `evaluate()` directly on the `JSHandle` instance. we do not call `.asElement()` on the `JSHandle` instance and subsequently use the "`ElementHandle` Scenario" described above as a `JSHandle` does not always have an element associated with it, making it impossible to get an `ExecutionContext` in such instances # Puppeteer v18 puppeteer v18 did not include any breaking changes that required major breaking changes to stencil # Puppeteer v19 puppeteer v19 did not include any breaking changes that required major breaking changes to stencil # Node, NPM versions this pr increments the versions of node & npm used to run our karma tests. the newest version of puppeteer requires use to upgrade these. consumers of stencil and puppeteer should refer to the puppeteer breaking changes guides (owned by the puppeteer team) to verify they are using the correct minimum versions of node/npm --- BREAKING_CHANGES.md | 11 +- package-lock.json | 397 +++++++++++---------- package.json | 2 +- scripts/test/validate-build.ts | 6 +- src/declarations/stencil-private.ts | 1 + src/sys/node/node-sys.ts | 4 +- src/testing/puppeteer/puppeteer-browser.ts | 13 + src/testing/puppeteer/puppeteer-element.ts | 74 ++-- src/testing/puppeteer/puppeteer-events.ts | 5 +- src/testing/puppeteer/puppeteer-page.ts | 10 +- test/karma/package.json | 4 +- 11 files changed, 299 insertions(+), 228 deletions(-) diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md index c134c1983010..917d5b4b8873 100644 --- a/BREAKING_CHANGES.md +++ b/BREAKING_CHANGES.md @@ -30,7 +30,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver * [Flag Parsing, `parseFlags()`](#flag-parsing-parseflags) * [Destroy Callback, `addDestroy()`, `removeDestroy()`](#destroy-callback-adddestroy-removedestroy) * [End-to-End Testing](#end-to-end-testing) - * [Puppeteer v10 Required](#puppeteer-v10-required) + * [Puppeteer v10+ Required](#puppeteer-v10-required) ### General #### New Configuration Defaults @@ -267,15 +267,18 @@ Replace all instances of `addDestory` with `addDestroy` and all instances of `re The functionality of these methods remains the same. ### End-to-End Testing -#### Puppeteer v10 Required +#### Puppeteer v10+ Required Versions of Puppeteer prior to Puppeteer version 10 are no longer supported. In newer versions of Puppeteer, the library provides its own types, making `@types/puppeteer` no longer necessary. -Ensure that Puppeteer v10 is installed, and that its typings are not: +Ensure that Puppeteer v10 or higher is installed, and that its typings are not: ```bash -$ npm install puppeteer@10 +$ npm install puppeteer $ npm uninstall @types/puppeteer ``` +To see which versions of Puppeteer are supported by Stencil, please see our [support matrix](https://stenciljs.com/docs/support-policy#puppeteer) + + ***** ## Stencil Two diff --git a/package-lock.json b/package-lock.json index 6639b4fe6357..94338d915f88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,7 +71,7 @@ "postcss": "^8.2.8", "prettier": "2.8.3", "prompts": "2.4.2", - "puppeteer": "~10.0.0", + "puppeteer": "^19.3.0", "rollup": "2.42.3", "rollup-plugin-sourcemaps": "^0.6.3", "semver": "^7.3.7", @@ -82,7 +82,7 @@ "ws": "8.12.0" }, "engines": { - "node": ">=12.10.0", + "node": ">=14.10.0", "npm": ">=6.0.0" } }, @@ -701,23 +701,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "node_modules/@eslint/eslintrc/node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, "node_modules/@eslint/eslintrc/node_modules/globals": { "version": "13.19.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz", @@ -1716,6 +1699,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "node_modules/@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true + }, "node_modules/@types/pixelmatch": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz", @@ -1872,9 +1861,9 @@ "dev": true }, "node_modules/@types/yauzl": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz", - "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==", "dev": true, "optional": true, "dependencies": { @@ -3294,7 +3283,7 @@ "node_modules/buffer-crc32": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", "dev": true, "engines": { "node": "*" @@ -4390,6 +4379,31 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "node_modules/cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "dependencies": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/cosmiconfig/node_modules/path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -4433,6 +4447,15 @@ "sha.js": "^2.4.8" } }, + "node_modules/cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "dev": true, + "dependencies": { + "node-fetch": "2.6.7" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -4544,9 +4567,9 @@ } }, "node_modules/debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "dev": true, "dependencies": { "ms": "2.1.2" @@ -4678,9 +4701,9 @@ } }, "node_modules/devtools-protocol": { - "version": "0.0.883894", - "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.883894.tgz", - "integrity": "sha512-33idhm54QJzf3Q7QofMgCvIVSd2o9H3kQPWaKT/fhoZh+digc+WSiMhbkeG3iN79WY4Hwr9G05NpbhEVrsOYAg==", + "version": "0.0.1056733", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1056733.tgz", + "integrity": "sha512-CmTu6SQx2g3TbZzDCAV58+LTxVdKplS7xip0g5oDXpZ+isr0rv5dDP8ToyVRywzPHkCCPKgKgScEcwz4uPWDIA==", "dev": true }, "node_modules/diff-sequences": { @@ -5213,23 +5236,6 @@ "eslint": "^7.0.0 || ^8.0.0" } }, - "node_modules/eslint-plugin-jsdoc/node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, "node_modules/eslint-plugin-jsdoc/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -5315,23 +5321,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "node_modules/eslint/node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, "node_modules/eslint/node_modules/escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -5980,7 +5969,7 @@ "node_modules/fd-slicer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", - "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", "dev": true, "dependencies": { "pend": "~1.2.0" @@ -7051,9 +7040,9 @@ "dev": true }, "node_modules/https-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", - "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", "dev": true, "dependencies": { "agent-base": "6", @@ -9780,6 +9769,12 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/mkdirp-classic": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", + "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", + "dev": true + }, "node_modules/modify-values": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz", @@ -10580,7 +10575,7 @@ "node_modules/pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", - "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, "node_modules/picocolors": { @@ -10778,9 +10773,9 @@ "dev": true }, "node_modules/progress": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.1.tgz", - "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "dev": true, "engines": { "node": ">=0.4.0" @@ -10884,45 +10879,51 @@ } }, "node_modules/puppeteer": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-10.0.0.tgz", - "integrity": "sha512-AxHvCb9IWmmP3gMW+epxdj92Gglii+6Z4sb+W+zc2hTTu10HF0yg6hGXot5O74uYkVqG3lfDRLfnRpi6WOwi5A==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-19.3.0.tgz", + "integrity": "sha512-WJbi/ULaeuFOz7cfMgJlJCBAZiyqIFeQ6os4h5ex3PVTt2qosXgwI9eruFZqFAwJRv8x5pOuMhWR0aSRgyDqEg==", "dev": true, "hasInstallScript": true, "dependencies": { - "debug": "4.3.1", - "devtools-protocol": "0.0.883894", - "extract-zip": "2.0.1", - "https-proxy-agent": "5.0.0", - "node-fetch": "2.6.1", - "pkg-dir": "4.2.0", - "progress": "2.0.1", + "cosmiconfig": "7.0.1", + "devtools-protocol": "0.0.1056733", + "https-proxy-agent": "5.0.1", + "progress": "2.0.3", "proxy-from-env": "1.1.0", - "rimraf": "3.0.2", - "tar-fs": "2.0.0", - "unbzip2-stream": "1.3.3", - "ws": "7.4.6" + "puppeteer-core": "19.3.0" }, "engines": { - "node": ">=10.18.1" + "node": ">=14.1.0" } }, - "node_modules/puppeteer/node_modules/node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", + "node_modules/puppeteer-core": { + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-19.3.0.tgz", + "integrity": "sha512-P8VAAOBnBJo/7DKJnj1b0K9kZBF2D8lkdL94CjJ+DZKCp182LQqYemPI9omUSZkh4bgykzXjZhaVR1qtddTTQg==", "dev": true, + "dependencies": { + "cross-fetch": "3.1.5", + "debug": "4.3.4", + "devtools-protocol": "0.0.1056733", + "extract-zip": "2.0.1", + "https-proxy-agent": "5.0.1", + "proxy-from-env": "1.1.0", + "rimraf": "3.0.2", + "tar-fs": "2.1.1", + "unbzip2-stream": "1.4.3", + "ws": "8.10.0" + }, "engines": { - "node": "4.x || >=6.0.0" + "node": ">=14.1.0" } }, - "node_modules/puppeteer/node_modules/ws": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "node_modules/puppeteer-core/node_modules/ws": { + "version": "8.10.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz", + "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==", "dev": true, "engines": { - "node": ">=8.3.0" + "node": ">=10.0.0" }, "peerDependencies": { "bufferutil": "^4.0.1", @@ -12529,15 +12530,15 @@ } }, "node_modules/tar-fs": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.0.tgz", - "integrity": "sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz", + "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==", "dev": true, "dependencies": { "chownr": "^1.1.1", - "mkdirp": "^0.5.1", + "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", - "tar-stream": "^2.0.0" + "tar-stream": "^2.1.4" } }, "node_modules/tar-stream": { @@ -12995,9 +12996,9 @@ } }, "node_modules/unbzip2-stream": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz", - "integrity": "sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz", + "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==", "dev": true, "dependencies": { "buffer": "^5.2.1", @@ -13860,6 +13861,15 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -13899,7 +13909,7 @@ "node_modules/yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", - "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", "dev": true, "dependencies": { "buffer-crc32": "~0.2.3", @@ -14389,15 +14399,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, "globals": { "version": "13.19.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz", @@ -15214,6 +15215,12 @@ "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==", "dev": true }, + "@types/parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", + "dev": true + }, "@types/pixelmatch": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.4.tgz", @@ -15369,9 +15376,9 @@ "dev": true }, "@types/yauzl": { - "version": "2.9.1", - "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz", - "integrity": "sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz", + "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==", "dev": true, "optional": true, "requires": { @@ -16407,7 +16414,7 @@ "buffer-crc32": { "version": "0.2.13", "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", - "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=", + "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==", "dev": true }, "buffer-from": { @@ -17294,6 +17301,27 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "cosmiconfig": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", + "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==", + "dev": true, + "requires": { + "@types/parse-json": "^4.0.0", + "import-fresh": "^3.2.1", + "parse-json": "^5.0.0", + "path-type": "^4.0.0", + "yaml": "^1.10.0" + }, + "dependencies": { + "path-type": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", + "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", + "dev": true + } + } + }, "create-ecdh": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", @@ -17339,6 +17367,15 @@ "sha.js": "^2.4.8" } }, + "cross-fetch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz", + "integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==", + "dev": true, + "requires": { + "node-fetch": "2.6.7" + } + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -17431,9 +17468,9 @@ "dev": true }, "debug": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", - "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "dev": true, "requires": { "ms": "2.1.2" @@ -17532,9 +17569,9 @@ "dev": true }, "devtools-protocol": { - "version": "0.0.883894", - "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.883894.tgz", - "integrity": "sha512-33idhm54QJzf3Q7QofMgCvIVSd2o9H3kQPWaKT/fhoZh+digc+WSiMhbkeG3iN79WY4Hwr9G05NpbhEVrsOYAg==", + "version": "0.0.1056733", + "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1056733.tgz", + "integrity": "sha512-CmTu6SQx2g3TbZzDCAV58+LTxVdKplS7xip0g5oDXpZ+isr0rv5dDP8ToyVRywzPHkCCPKgKgScEcwz4uPWDIA==", "dev": true }, "diff-sequences": { @@ -17930,15 +17967,6 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, - "debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -18106,15 +18134,6 @@ "spdx-expression-parse": "^3.0.1" }, "dependencies": { - "debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - }, "escape-string-regexp": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", @@ -18527,7 +18546,7 @@ "fd-slicer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz", - "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=", + "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==", "dev": true, "requires": { "pend": "~1.2.0" @@ -19381,9 +19400,9 @@ "dev": true }, "https-proxy-agent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz", - "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", "dev": true, "requires": { "agent-base": "6", @@ -21515,6 +21534,12 @@ "minimist": "^1.2.5" } }, + "mkdirp-classic": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz", + "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", + "dev": true + }, "modify-values": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz", @@ -22173,7 +22198,7 @@ "pend": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", - "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", + "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, "picocolors": { @@ -22306,9 +22331,9 @@ "dev": true }, "progress": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.1.tgz", - "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", "dev": true }, "promise-inflight": { @@ -22407,35 +22432,41 @@ "dev": true }, "puppeteer": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-10.0.0.tgz", - "integrity": "sha512-AxHvCb9IWmmP3gMW+epxdj92Gglii+6Z4sb+W+zc2hTTu10HF0yg6hGXot5O74uYkVqG3lfDRLfnRpi6WOwi5A==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-19.3.0.tgz", + "integrity": "sha512-WJbi/ULaeuFOz7cfMgJlJCBAZiyqIFeQ6os4h5ex3PVTt2qosXgwI9eruFZqFAwJRv8x5pOuMhWR0aSRgyDqEg==", + "dev": true, + "requires": { + "cosmiconfig": "7.0.1", + "devtools-protocol": "0.0.1056733", + "https-proxy-agent": "5.0.1", + "progress": "2.0.3", + "proxy-from-env": "1.1.0", + "puppeteer-core": "19.3.0" + } + }, + "puppeteer-core": { + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-19.3.0.tgz", + "integrity": "sha512-P8VAAOBnBJo/7DKJnj1b0K9kZBF2D8lkdL94CjJ+DZKCp182LQqYemPI9omUSZkh4bgykzXjZhaVR1qtddTTQg==", "dev": true, "requires": { - "debug": "4.3.1", - "devtools-protocol": "0.0.883894", + "cross-fetch": "3.1.5", + "debug": "4.3.4", + "devtools-protocol": "0.0.1056733", "extract-zip": "2.0.1", - "https-proxy-agent": "5.0.0", - "node-fetch": "2.6.1", - "pkg-dir": "4.2.0", - "progress": "2.0.1", + "https-proxy-agent": "5.0.1", "proxy-from-env": "1.1.0", "rimraf": "3.0.2", - "tar-fs": "2.0.0", - "unbzip2-stream": "1.3.3", - "ws": "7.4.6" + "tar-fs": "2.1.1", + "unbzip2-stream": "1.4.3", + "ws": "8.10.0" }, "dependencies": { - "node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", - "dev": true - }, "ws": { - "version": "7.4.6", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", "dev": true, "requires": {} } @@ -23704,15 +23735,15 @@ "dev": true }, "tar-fs": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.0.tgz", - "integrity": "sha512-vaY0obB6Om/fso8a8vakQBzwholQ7v5+uy+tF3Ozvxv1KNezmVQAiWtcNmMHFSFPqL3dJA8ha6gdtFbfX9mcxA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz", + "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==", "dev": true, "requires": { "chownr": "^1.1.1", - "mkdirp": "^0.5.1", + "mkdirp-classic": "^0.5.2", "pump": "^3.0.0", - "tar-stream": "^2.0.0" + "tar-stream": "^2.1.4" } }, "tar-stream": { @@ -24062,9 +24093,9 @@ "optional": true }, "unbzip2-stream": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz", - "integrity": "sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz", + "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==", "dev": true, "requires": { "buffer": "^5.2.1", @@ -24774,6 +24805,12 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "yaml": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true + }, "yargs": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", @@ -24806,7 +24843,7 @@ "yauzl": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz", - "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=", + "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==", "dev": true, "requires": { "buffer-crc32": "~0.2.3", diff --git a/package.json b/package.json index d571f51f4e70..fed51ec6cd44 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "postcss": "^8.2.8", "prettier": "2.8.3", "prompts": "2.4.2", - "puppeteer": "~10.0.0", + "puppeteer": "^19.3.0", "rollup": "2.42.3", "rollup-plugin-sourcemaps": "^0.6.3", "semver": "^7.3.7", diff --git a/scripts/test/validate-build.ts b/scripts/test/validate-build.ts index 3f15fca11369..5ebe04f023b9 100644 --- a/scripts/test/validate-build.ts +++ b/scripts/test/validate-build.ts @@ -1,7 +1,7 @@ import fs from 'fs-extra'; import { dirname, join, relative } from 'path'; import { rollup } from 'rollup'; -import ts from 'typescript'; +import ts, { ModuleResolutionKind, ScriptTarget } from 'typescript'; import { BuildOptions, getOptions } from '../utils/options'; import { PackageData } from '../utils/write-pkg-json'; @@ -220,7 +220,7 @@ function validatePackage(opts: BuildOptions, testPkg: TestPackage, dtsEntries: s } /** - * Validate the the .d.ts files used in the output are semantically and syntactically correct + * Validate the .d.ts files used in the output are semantically and syntactically correct * @param opts build options to be used to validate .d.ts files * @param dtsEntries the .d.ts files to validate */ @@ -232,6 +232,8 @@ function validateDts(opts: BuildOptions, dtsEntries: string[]): void { '@stencil/core/internal': [join(opts.rootDir, 'internal', 'index.d.ts')], '@stencil/core/internal/testing': [join(opts.rootDir, 'internal', 'testing', 'index.d.ts')], }, + moduleResolution: ModuleResolutionKind.NodeJs, + target: ScriptTarget.ES2016, }); const tsDiagnostics = program.getSemanticDiagnostics().concat(program.getSyntacticDiagnostics()); diff --git a/src/declarations/stencil-private.ts b/src/declarations/stencil-private.ts index 0fb1bbc1a95e..c87f535fc3f1 100644 --- a/src/declarations/stencil-private.ts +++ b/src/declarations/stencil-private.ts @@ -2291,6 +2291,7 @@ export interface E2EProcessEnv { __STENCIL_SPEC_TESTS__?: 'true'; __STENCIL_PUPPETEER_MODULE__?: string; + __STENCIL_PUPPETEER_VERSION__?: number; __STENCIL_DEFAULT_TIMEOUT__?: string; } diff --git a/src/sys/node/node-sys.ts b/src/sys/node/node-sys.ts index e20403cb18d0..8c41cc95b389 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: '10.0.0' }, - 'puppeteer-core': { minVersion: '1.19.0', recommendedVersion: '5.2.1' }, + puppeteer: { minVersion: '10.0.0', recommendedVersion: '19' }, + 'puppeteer-core': { minVersion: '10.0.0', recommendedVersion: '19' }, 'workbox-build': { minVersion: '4.3.1', recommendedVersion: '4.3.1' }, }); diff --git a/src/testing/puppeteer/puppeteer-browser.ts b/src/testing/puppeteer/puppeteer-browser.ts index 8e03b45c9ed0..e9e6d1534dcf 100644 --- a/src/testing/puppeteer/puppeteer-browser.ts +++ b/src/testing/puppeteer/puppeteer-browser.ts @@ -1,5 +1,7 @@ +import * as d from '@stencil/core/declarations'; import type { E2EProcessEnv, ValidatedConfig } from '@stencil/core/internal'; import type * as puppeteer from 'puppeteer'; +import semverMajor from 'semver/functions/major'; export async function startPuppeteerBrowser(config: ValidatedConfig) { if (!config.flags.e2e) { @@ -11,8 +13,19 @@ export async function startPuppeteerBrowser(config: ValidatedConfig) { const puppeteerDep = config.testing.browserExecutablePath ? 'puppeteer-core' : 'puppeteer'; const puppeteerModulePath = config.sys.lazyRequire.getModulePath(config.rootDir, puppeteerDep); + const puppeteerPackageJsonPath = config.sys.platformPath.join(puppeteerModulePath, 'package.json'); const puppeteer = config.sys.lazyRequire.require(config.rootDir, puppeteerModulePath); env.__STENCIL_PUPPETEER_MODULE__ = puppeteerModulePath; + + try { + const puppeteerManifest = config.sys.readFileSync(puppeteerPackageJsonPath, 'utf8'); + const puppeteerPkgJson: d.PackageJsonData = JSON.parse(puppeteerManifest); + env.__STENCIL_PUPPETEER_VERSION__ = semverMajor(puppeteerPkgJson.version); + } catch (e: unknown) { + console.error(`An error occurred determining the version of Puppeteer installed:\n${e}`); + env.__STENCIL_PUPPETEER_VERSION__ = undefined; + } + env.__STENCIL_BROWSER_WAIT_UNTIL = config.testing.browserWaitUntil; if (config.flags.devtools) { diff --git a/src/testing/puppeteer/puppeteer-element.ts b/src/testing/puppeteer/puppeteer-element.ts index 6995134ebf18..d325d5261e2f 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'; @@ -72,9 +72,8 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal let isVisible = false; try { - const executionContext = this._elmHandle.executionContext(); - - isVisible = await executionContext.evaluate((elm: HostElement) => { + const executionContext = getPuppeteerExecution(this._elmHandle); + isVisible = await executionContext.evaluate((elm: Element) => { return new Promise((resolve) => { window.requestAnimationFrame(() => { if (elm.isConnected) { @@ -167,8 +166,7 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal async getProperty(propertyName: string) { this._validate(); - const executionContext = this._elmHandle.executionContext(); - + const executionContext = getPuppeteerExecution(this._elmHandle); const propValue = await executionContext.evaluate( (elm: any, propertyName: string) => { return elm[propertyName]; @@ -359,7 +357,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); @@ -401,10 +399,9 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal return; } - const executionContext = this._elmHandle.executionContext(); - - const rtn = await executionContext.evaluate( - (elm: HTMLElement, queuedActions: ElementAction[]) => { + const executionContext = getPuppeteerExecution(this._elmHandle); + 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(() => { @@ -470,17 +467,13 @@ export class E2EElement extends MockHTMLElement implements pd.E2EElementInternal } async e2eSync() { - const executionContext = this._elmHandle.executionContext(); - - const { outerHTML, shadowRootHTML } = await executionContext.evaluate<{ outerHTML: any; shadowRootHTML: any }>( - (elm: HTMLElement) => { - return { - outerHTML: elm.outerHTML, - shadowRootHTML: elm.shadowRoot ? elm.shadowRoot.innerHTML : null, - }; - }, - this._elmHandle - ); + const executionContext = getPuppeteerExecution(this._elmHandle); + const { outerHTML, shadowRootHTML } = await executionContext.evaluate((elm: Element) => { + return { + outerHTML: elm.outerHTML, + shadowRootHTML: elm.shadowRoot ? elm.shadowRoot.innerHTML : null, + }; + }, this._elmHandle); if (typeof shadowRootHTML === 'string') { (this as any).shadowRoot = parseHtmlToFragment(shadowRootHTML) as any; @@ -560,7 +553,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()}`); } @@ -590,7 +583,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) { @@ -653,10 +646,9 @@ export async function findAll( if (shadowSelector) { // light dom selected, then shadow dom selected inside of light dom elements for (let i = 0; i < lightElmHandles.length; i++) { - const executionContext = lightElmHandles[i].executionContext(); - + const executionContext = getPuppeteerExecution(lightElmHandles[i]); const shadowJsHandle = await executionContext.evaluateHandle( - (elm, shadowSelector) => { + (elm: Element, shadowSelector: string) => { if (!elm.shadowRoot) { throw new Error(`shadow root does not exist for element: ${elm.tagName.toLowerCase()}`); } @@ -673,7 +665,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(); @@ -717,6 +709,32 @@ function getSelector(selector: pd.FindSelector) { return rtn; } +/** + * A helper function for retrieving an execution context from a Puppeteer handle entity. The way that these objects can + * be retrieved changed in Puppeteer v17, requiring a check of the version of the library that is installed at runtime. + * + * This function expects that the {@link E2EProcessEnv#__STENCIL_PUPPETEER_VERSION__} be set prior to invocation. If + * it is not set, the function assumes an older version of Puppeteer is used. + * + * @param elmHandle the Puppeteer handle to an element + * @returns the execution context from the handle + */ +function getPuppeteerExecution(elmHandle: puppeteer.ElementHandle) { + const puppeteerMajorVersion = parseInt(process.env.__STENCIL_PUPPETEER_VERSION__, 10); + if (puppeteerMajorVersion >= 17) { + // in puppeteer v17, a context for executing JS can be retrieved from a frame + // the `any` type assertion is necessary for backwards compatability with the type checker + return (elmHandle as any).frame; + } else { + // in puppeteer v16 and lower, an execution context could be retrieved from a handle to execute JS + // the `any` type assertion is necessary for backwards compatability with the type checker + // + // if the result of `parseInt` on the puppeteer version is NaN, assume that the user is on a lower version of + // puppeteer + return (elmHandle as any).executionContext(); + } +} + interface ElementAction { classAdd?: string; classRemove?: string; diff --git a/src/testing/puppeteer/puppeteer-events.ts b/src/testing/puppeteer/puppeteer-events.ts index f8652bc788c0..77eb65005e3e 100644 --- a/src/testing/puppeteer/puppeteer-events.ts +++ b/src/testing/puppeteer/puppeteer-events.ts @@ -122,10 +122,8 @@ export async function addE2EListener( callback, }); - const executionContext = elmHandle.executionContext(); - // add element event listener - await executionContext.evaluate( + await elmHandle.evaluate( (elm: any, id: number, eventName: string) => { elm.addEventListener(eventName, (ev: any) => { (window as unknown as pd.BrowserWindow).stencilOnEvent( @@ -134,7 +132,6 @@ export async function addE2EListener( ); }); }, - elmHandle, id, eventName ); diff --git a/src/testing/puppeteer/puppeteer-page.ts b/src/testing/puppeteer/puppeteer-page.ts index 70ec2b96c3e3..8eafbe562b78 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())); diff --git a/test/karma/package.json b/test/karma/package.json index 02834fb7119e..77d2650baea4 100644 --- a/test/karma/package.json +++ b/test/karma/package.json @@ -44,7 +44,7 @@ "workbox-build": "4.3.1" }, "volta": { - "node": "14.5.0", - "npm": "6.14.16" + "node": "14.21.1", + "npm": "7.24.2" } }