fix: fix compatibility with Puppeteer v21 (#566)

Author: swissspidy

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     jestPuppeteer: "readonly",
     page: "readonly",
   },
+
   overrides: [
     {
       files: ["*.test.?(m|t)js"],
@@ -37,6 +38,9 @@ module.exports = {
         tsconfigRootDir: __dirname,
       },
       plugins: ["@typescript-eslint"],
+      rules: {
+        "@typescript-eslint/no-explicit-any": "warn",
+      },
     },
   ],
 };

lerna.json

@@ -1,5 +1,4 @@
 {
-  "useWorkspaces": true,
   "version": "9.0.0",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package-lock.json

@@ -15,20 +15,20 @@
   },
   "devDependencies": {
     "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.59",
-    "@swc/jest": "^0.2.26",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@swc/core": "^1.3.90",
+    "@swc/jest": "^0.2.29",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "conventional-github-releaser": "^3.1.5",
     "cross-env": "^7.0.3",
-    "eslint": "^8.41.0",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint": "^8.50.0",
+    "eslint-plugin-jest": "^27.4.2",
     "express": "^4.18.2",
-    "jest": "^29.5.0",
-    "lerna": "^6.6.2",
-    "prettier": "^2.8.8",
-    "puppeteer": "^20.3.0",
-    "typescript": "^5.0.4"
+    "jest": "^29.7.0",
+    "lerna": "^7.3.0",
+    "prettier": "^3.0.3",
+    "puppeteer": "^21.3.6",
+    "typescript": "^5.2.2"
   },
   "name": "jest-puppeteer",
   "engines": {

package.json

@@ -204,7 +204,7 @@ import { join } from "node:path";
 
 await expect(page).toUploadFile(
   'input[type="file"]',
-  join(__dirname, "file.txt")
+  join(__dirname, "file.txt"),
 );
 ```
 

packages/expect-puppeteer/README.md

@@ -3,4 +3,5 @@ module.exports = {
   transform: {
     "^.+\\.(t|j)sx?$": ["@swc/jest"],
   },
+  testTimeout: 10000,
 };

packages/expect-puppeteer/jest.config.js

@@ -44,9 +44,9 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "puppeteer": "^20.3.0",
-    "rollup": "^3.23.0",
-    "rollup-plugin-dts": "^5.3.0",
-    "rollup-plugin-swc3": "^0.8.1"
+    "puppeteer": "^21.3.6",
+    "rollup": "^3.29.4",
+    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-swc3": "^0.10.1"
   }
 }

packages/expect-puppeteer/package.json

@@ -1,5 +1,6 @@
 import { swc, defineRollupSwcOption } from "rollup-plugin-swc3";
 import dts from "rollup-plugin-dts";
+import * as url from "node:url";
 
 const bundle = (config) => ({
   input: "src/index.ts",
@@ -12,14 +13,14 @@ const bundle = (config) => ({
 const swcPlugin = swc(
   defineRollupSwcOption({
     jsc: {
+      baseUrl: url.fileURLToPath(new URL(".", import.meta.url)),
       parser: {
         syntax: "typescript",
       },
+      target: "es2022",
+      externalHelpers: false,
     },
-    env: {
-      targets: "node 16",
-    },
-  })
+  }),
 );
 
 export default [

packages/expect-puppeteer/rollup.config.mjs

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-namespace, no-use-before-define, no-restricted-syntax, no-await-in-loop */
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-namespace, no-use-before-define, no-restricted-syntax, no-await-in-loop, @typescript-eslint/no-unused-vars */
 import {
   checkIsPuppeteerInstance,
   checkIsElementHandle,
@@ -100,7 +100,7 @@ const jestExpect = global.expect as JestExpect;
 
 const wrapMatcher = <TPage extends PuppeteerInstance>(
   matcher: Matcher<TPage>,
-  instance: PuppeteerInstance
+  instance: PuppeteerInstance,
 ) => {
   return async function throwingMatcher(...args: any[]) {
     jestExpect.getState().assertionCalls += 1;
@@ -116,7 +116,7 @@ const wrapMatcher = <TPage extends PuppeteerInstance>(
 
 const createExpect = <T extends PuppeteerInstance>(
   instance: T,
-  matchers: MatcherSet<T>
+  matchers: MatcherSet<T>,
 ) => {
   const expectation = {
     not: {} as Record<string, any>,
@@ -134,7 +134,7 @@ const createExpect = <T extends PuppeteerInstance>(
 };
 
 const expectPuppeteerInstance = <TInstance extends PuppeteerInstance>(
-  actual: TInstance
+  actual: TInstance,
 ): PuppeteerMatchers => {
   if (checkIsPage(actual)) {
     return createExpect(actual, pageMatchers) as PuppeteerMatchers;

packages/expect-puppeteer/src/index.ts

@@ -15,7 +15,7 @@ export type GetElementOptions = {
 export async function getElementFactory(
   instance: PuppeteerInstance,
   selector: Selector,
-  options: GetElementOptions
+  options: GetElementOptions,
 ) {
   const { text: searchExpr, visible = false } = options;
 
@@ -24,7 +24,7 @@ export async function getElementFactory(
   const { text, regexp } = serializeSearchExpression(searchExpr);
 
   const parseSearchExpressionHandle = await evaluateParseSearchExpression(
-    ctx.page
+    ctx.page,
   );
 
   const getElementArgs = [
@@ -43,9 +43,9 @@ export async function getElementFactory(
     regexp: string | null,
     visible: boolean,
     parseSearchExpression: (
-      expr: SerializedSearchExpression
+      expr: SerializedSearchExpression,
     ) => ((value: string) => boolean) | null,
-    type: "element" | "positive" | "negative"
+    type: "element" | "positive" | "negative",
   ) => {
     const hasVisibleBoundingBox = (element: Element): boolean => {
       const rect = element.getBoundingClientRect();

packages/expect-puppeteer/src/matchers/getElementFactory.ts

@@ -15,7 +15,7 @@ export async function matchTextContent(
   instance: PuppeteerInstance,
   matcher: SearchExpression,
   options: MatchTextContentOptions,
-  type: "positive" | "negative"
+  type: "positive" | "negative",
 ) {
   const { traverseShadowRoots = false, ...otherOptions } = options;
   const frameOptions = defaultOptions(otherOptions);
@@ -25,7 +25,7 @@ export async function matchTextContent(
   const { text, regexp } = serializeSearchExpression(matcher);
 
   const parseSearchExpressionHandle = await evaluateParseSearchExpression(
-    ctx.page
+    ctx.page,
   );
 
   await ctx.page.waitForFunction(
@@ -35,7 +35,7 @@ export async function matchTextContent(
       regexp,
       traverseShadowRoots,
       parseSearchExpression,
-      type
+      type,
     ) => {
       const checkNodeIsElement = (node: Node): node is Element => {
         return node.nodeType === Node.ELEMENT_NODE;
@@ -52,7 +52,7 @@ export async function matchTextContent(
       function getShadowTextContent(node: Node) {
         const walker = document.createTreeWalker(
           node,
-          NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT
+          NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
         );
         let result = "";
         let currentNode = walker.nextNode();
@@ -110,6 +110,6 @@ export async function matchTextContent(
     regexp,
     traverseShadowRoots,
     parseSearchExpressionHandle,
-    type
+    type,
   );
 }

packages/expect-puppeteer/src/matchers/matchTextContent.ts

@@ -21,23 +21,23 @@ export type NotToMatchElementOptions = GetElementOptions & Options;
 export async function notToMatchElement(
   instance: PuppeteerInstance,
   selector: Selector | string,
-  options: NotToMatchElementOptions = {}
+  options: NotToMatchElementOptions = {},
 ) {
   const { text, visible, ...otherOptions } = options;
   const frameOptions = defaultOptions(otherOptions);
   const rSelector = resolveSelector(selector);
   const [getElement, getElementArgs, ctx] = await getElementFactory(
     instance,
     rSelector,
-    { text, visible }
+    { text, visible },
   );
 
   try {
     await ctx.page.waitForFunction(
       getElement,
       frameOptions,
       ...getElementArgs,
-      "negative" as const
+      "negative" as const,
     );
   } catch (error: any) {
     throw enhanceError(error, `${getSelectorMessage(rSelector, text)} found`);

packages/expect-puppeteer/src/matchers/notToMatchElement.ts

@@ -34,7 +34,7 @@ describe("not.toMatchTextContent", () => {
           expect(error.stack).toMatch(resolve(__filename));
         }
       });
-    }
+    },
   );
 
   describe("ElementHandle", () => {

packages/expect-puppeteer/src/matchers/notToMatchTextContent.test.ts

@@ -6,7 +6,7 @@ export type NotToMatchOptions = MatchTextContentOptions;
 export async function notToMatchTextContent(
   instance: PuppeteerInstance,
   matcher: SearchExpression,
-  options: NotToMatchOptions = {}
+  options: NotToMatchOptions = {},
 ) {
   try {
     await matchTextContent(instance, matcher, options, "negative");

packages/expect-puppeteer/src/matchers/notToMatchTextContent.ts

@@ -19,7 +19,7 @@ async function goToPage(
   page: Page,
   route: string,
   isFrame: boolean,
-  cb: (arg0: { currentPage: Page | Frame }) => void
+  cb: (arg0: { currentPage: Page | Frame }) => void,
 ) {
   let currentPage: Page | Frame = page;
   await page.goto(`http://localhost:${process.env.TEST_SERVER_PORT}/${route}`);
@@ -31,7 +31,7 @@ async function goToPage(
 
 export const setupPage = (
   instanceType: string,
-  cb: (arg0: { currentPage: Page | Frame }) => void
+  cb: (arg0: { currentPage: Page | Frame }) => void,
 ) => {
   beforeEach(async () => {
     if (instanceType === "Page") {

packages/expect-puppeteer/src/matchers/test-util.ts

@@ -16,7 +16,7 @@ describe("toClick", () => {
       await expect(instance).toClick('a[href="/page2.html"]');
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -28,7 +28,7 @@ describe("toClick", () => {
       });
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -40,7 +40,7 @@ describe("toClick", () => {
       });
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -49,7 +49,7 @@ describe("toClick", () => {
       await expect(instance).toClick("a", { text: "Page 2" });
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -60,11 +60,11 @@ describe("toClick", () => {
           value: "//a",
           type: "xpath",
         },
-        { text: "Page 2" }
+        { text: "Page 2" },
       );
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -75,11 +75,11 @@ describe("toClick", () => {
           value: "a",
           type: "css",
         },
-        { text: "Page 2" }
+        { text: "Page 2" },
       );
       await instance.waitForNavigation();
       const pathname = await instance.evaluate(
-        () => document.location.pathname
+        () => document.location.pathname,
       );
       expect(pathname).toBe("/page2.html");
     });
@@ -101,7 +101,7 @@ describe("toClick", () => {
       try {
         await expect(instance).toClick(
           { value: "//a", type: "xpath" },
-          { text: "Nop" }
+          { text: "Nop" },
         );
       } catch (error: any) {
         expect(error.message).toMatch('Element //a (text: "Nop") not found');
@@ -115,7 +115,7 @@ describe("toClick", () => {
       try {
         await expect(instance).toClick(
           { value: "a", type: "css" },
-          { text: "Nop" }
+          { text: "Nop" },
         );
       } catch (error: any) {
         expect(error.message).toMatch('Element a (text: "Nop") not found');

packages/expect-puppeteer/src/matchers/toClick.test.ts

@@ -7,7 +7,7 @@ export type ToClickOptions = ToMatchElementOptions & ClickOptions;
 export async function toClick(
   instance: PuppeteerInstance,
   selector: Selector | string,
-  options: ToClickOptions = {}
+  options: ToClickOptions = {},
 ) {
   const { delay, button, clickCount, offset, ...otherOptions } = options;
   const element = await toMatchElement(instance, selector, otherOptions);