Update puppeteer to version 22.0.0

This is a major version bump that requires two changes on our side: - The new headless mode is now the default, so we can remove our transformation code (see puppeteer/puppeteer#11815). - The `page.waitForTimeout` API is removed. Sadly we still used it in the integration tests (but fortunately much less than before we worked on fixing intermittent failures), so until we remove the final occurrences we provide an implementation ourselves (see puppeteer/puppeteer#11780). The full changelog can be found here: https://github.com/puppeteer/puppeteer/releases/tag/puppeteer-core-v22.0.0
timvandermeij · Feb 10, 2024 · 2841859 · 2841859
1 parent 4feab0c
commit 2841859
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "postcss-discard-comments": "^6.0.1",
     "postcss-nesting": "^12.0.2",
     "prettier": "^3.2.5",
-    "puppeteer": "^21.11.0",
+    "puppeteer": "^22.0.0",
     "rimraf": "^3.0.2",
     "streamqueue": "^1.1.2",
     "stylelint": "^16.2.1",

diff --git a/test/integration/annotation_spec.mjs b/test/integration/annotation_spec.mjs
@@ -18,6 +18,7 @@ import {
   getQuerySelector,
   getSelector,
   loadAndWait,
+  waitForTimeout,
 } from "./test_utils.mjs";
 
 describe("Annotation highlight", () => {
@@ -140,7 +141,7 @@ describe("Checkbox annotation", () => {
           );
           for (const selector of selectors) {
             await page.click(selector);
-            page.waitForTimeout(10);
+            await waitForTimeout(10);
           }
           for (const selector of selectors) {
             await page.waitForFunction(
@@ -199,7 +200,7 @@ describe("Text widget", () => {
         pages.map(async ([browserName, page]) => {
           await page.type(getSelector("22R"), "a");
           await page.keyboard.press("Tab");
-          await page.waitForTimeout(10);
+          await waitForTimeout(10);
 
           const text = await page.$eval(getSelector("22R"), el => el.value);
           expect(text).withContext(`In ${browserName}`).toEqual("aHello World");
@@ -485,12 +486,12 @@ describe("ResetForm action", () => {
               `document.querySelector("[data-annotation-id='25R']").hidden === false`
             );
             await page.click("#editorFreeText");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             await page.waitForFunction(
               `document.querySelector("[data-annotation-id='25R']").hidden === true`
             );
             await page.click("#editorFreeText");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             await page.waitForFunction(
               `document.querySelector("[data-annotation-id='25R']").hidden === false`
             );
@@ -553,31 +554,31 @@ describe("ResetForm action", () => {
             expect(hidden).withContext(`In ${browserName}`).toEqual(true);
             await page.focus("[data-annotation-id='20R']");
             await page.keyboard.press("Enter");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             hidden = await page.$eval(
               "[data-annotation-id='21R']",
               el => el.hidden
             );
             expect(hidden).withContext(`In ${browserName}`).toEqual(false);
 
             await page.keyboard.press("Enter");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             hidden = await page.$eval(
               "[data-annotation-id='21R']",
               el => el.hidden
             );
             expect(hidden).withContext(`In ${browserName}`).toEqual(true);
 
             await page.keyboard.press("Enter");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             hidden = await page.$eval(
               "[data-annotation-id='21R']",
               el => el.hidden
             );
             expect(hidden).withContext(`In ${browserName}`).toEqual(false);
 
             await page.keyboard.press("Escape");
-            await page.waitForTimeout(10);
+            await waitForTimeout(10);
             hidden = await page.$eval(
               "[data-annotation-id='21R']",
               el => el.hidden

diff --git a/test/integration/freetext_editor_spec.mjs b/test/integration/freetext_editor_spec.mjs
@@ -43,6 +43,7 @@ import {
   waitForSelectedEditor,
   waitForSerialized,
   waitForStorageEntries,
+  waitForTimeout,
   waitForUnselectedEditor,
 } from "./test_utils.mjs";
 import { PNG } from "pngjs";
@@ -52,7 +53,7 @@ const copyPaste = async page => {
   await kbCopy(page);
   await promise;
 
-  await page.waitForTimeout(10);
+  await waitForTimeout(10);
 
   promise = waitForEvent(page, "paste");
   await kbPaste(page);
@@ -1137,7 +1138,7 @@ describe("FreeText Editor", () => {
           await kbUndo(page);
           // Nothing should happen, it's why we can't wait for something
           // specific!
-          await page.waitForTimeout(200);
+          await waitForTimeout(200);
 
           // We check that the editor hasn't been removed.
           editorIds = await getEditors(page, "freeText");
@@ -1343,7 +1344,7 @@ describe("FreeText Editor", () => {
           // Enter in editing mode.
           await switchToFreeText(page);
 
-          await page.waitForTimeout(200);
+          await waitForTimeout(200);
 
           // Disable editing mode.
           await page.click("#editorFreeText");
@@ -2373,7 +2374,7 @@ describe("FreeText Editor", () => {
 
           // The editor must be moved in the DOM and potentially the focus
           // will be lost, hence there's a callback will get back the focus.
-          await page.waitForTimeout(200);
+          await waitForTimeout(200);
 
           const focused = await page.evaluate(sel => {
             const editor = document.querySelector(sel);