Update puppeteer

package.json

@@ -159,7 +159,7 @@
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.2.5",
-    "puppeteer": "^21.9.0",
+    "puppeteer": "^22.9.0",
     "react-refresh": "^0.14.2",
     "react-test-renderer": "^17.0.2",
     "rollup": "^2.79.1",

packages/e2e-test-utils/package.json

@@ -27,7 +27,7 @@
   "main": "./src/index.js",
   "dependencies": {
     "@wordpress/url": "^3.48.0",
-    "expect-puppeteer": "^9.0.1"
+    "expect-puppeteer": "^10.0.0"
   },
   "devDependencies": {
     "@percy/puppeteer": "^2.0.2"

packages/e2e-test-utils/src/deleteWidgets.js

@@ -34,14 +34,16 @@ async function deleteWidgets() {
     await item.$eval('.widget-action', (toggleButton) => toggleButton.click());
 
     // Transition animation.
-    await page.waitForTimeout(300);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 300));
 
     await item.$eval('.widget-control-remove', (deleteLink) =>
       deleteLink.click()
     );
 
     // Transition animation.
-    await page.waitForTimeout(300);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 300));
   }
   /* eslint-enable no-await-in-loop */
 

packages/e2e-test-utils/src/insertWidget.js

@@ -29,7 +29,8 @@ async function insertWidget(name) {
   );
 
   // Transition animation.
-  await page.waitForTimeout(300);
+  // TODO: Remove and replace with waitForSelector or locator API.
+  await new Promise((r) => setTimeout(r, 300));
 
   await expect(page).toMatchElement('#widgets-right .widget .widget-title', {
     text: name,

packages/e2e-test-utils/src/publishPost.js

@@ -56,7 +56,8 @@ async function publishPost() {
     await openPublishPanel();
 
     // Wait for the panel to fully slide in.
-    await page.waitForTimeout(500);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 500));
   }
 
   // Publish the post

packages/e2e-test-utils/src/setAnalyticsCode.js

@@ -41,7 +41,8 @@ async function setAnalyticsCode(code) {
 
   await expect(page).toClick('button', { text: 'Save' });
   // Wait for setting to save.
-  await page.waitForTimeout(1000);
+  // TODO: Remove and replace with waitForSelector or locator API.
+  await new Promise((r) => setTimeout(r, 1000));
 }
 
 export default setAnalyticsCode;

packages/e2e-test-utils/src/shopping.js

@@ -57,7 +57,8 @@ export const insertProduct = async (product, clickOnTab = true) => {
 
   expect(page).toClick(`[aria-label="Add ${product}"]`);
 
-  await page.waitForTimeout(400);
+  // TODO: Remove and replace with waitForSelector or locator API.
+  await new Promise((r) => setTimeout(r, 400));
 
   await page.waitForSelector(
     '[aria-label="Design menu"] [aria-label="Product"]',

packages/e2e-tests/package.json

@@ -31,8 +31,8 @@
     "@web-stories-wp/jest-resolver": "*",
     "@wordpress/jest-console": "^7.18.0",
     "babel-jest": "^29.5.0",
-    "expect-puppeteer": "^9.0.1",
-    "jest-environment-puppeteer": "^9.0.2",
+    "expect-puppeteer": "^10.0.0",
+    "jest-environment-puppeteer": "^10.0.1",
     "jest-extended": "^4.0.2",
     "jest-json-schema": "^6.1.0",
     "jest-puppeteer": "^10.0.1"

packages/e2e-tests/src/specs/dashboard/adminMenu.js

@@ -60,7 +60,8 @@ describe('Admin Menu', () => {
 
     // Navigating through WP to a new page syncs the WP current page in Nav
     await page.hover('#menu-posts-web-story');
-    await page.waitForTimeout(100);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 100));
     await Promise.all([
       page.waitForNavigation(),
       expect(page).toClick('#menu-posts-web-story a', {

packages/e2e-tests/src/specs/dashboard/settings/adminUser/analytics.js

@@ -52,7 +52,8 @@ describe('Analytics', () => {
     await page.keyboard.type('UA-009345-10');
     await page.keyboard.press('Enter');
 
-    await page.waitForTimeout(400);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 400));
     await expect(page).toMatchTextContent('Setting saved.');
   });
 
@@ -73,7 +74,8 @@ describe('Analytics', () => {
     await page.keyboard.type('UA-009345-11');
     await expect(page).toClick('button', { text: 'Save' });
 
-    await page.waitForTimeout(400);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 400));
     await expect(page).toMatchTextContent('Setting saved.');
   });
 
@@ -91,7 +93,8 @@ describe('Analytics', () => {
 
     await expect(page).toClick('button', { text: 'Save' });
 
-    await page.waitForTimeout(400);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 400));
     await expect(page).toMatchTextContent('Setting saved.');
   });
 

packages/e2e-tests/src/specs/dashboard/settings/adminUser/publisherLogo.js

@@ -94,7 +94,8 @@ describe.skip('Publisher Logos', () => {
       );
 
       // Flyout animation.
-      await page.waitForTimeout(100);
+      // TODO: Remove and replace with waitForSelector or locator API.
+      await new Promise((r) => setTimeout(r, 100));
 
       await page.waitForSelector(
         '[role="menu"][aria-label="Menu"][aria-expanded="true"]'

packages/e2e-tests/src/specs/dashboard/settings/adminUser/telemetryBanner.js

@@ -68,7 +68,8 @@ describe('Telemetry Banner', () => {
 
     await expect(page).toClick('[data-testid="telemetry-settings-checkbox"]');
 
-    await page.waitForTimeout(300);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 300));
 
     const updatedCheckboxStatus = await telemetrySettingsCheckbox.evaluate(
       (el) => {

packages/e2e-tests/src/specs/dashboard/templates/useTemplate.js

@@ -36,7 +36,8 @@ describe('Explore Templates', () => {
     await expect(page).toClick('[aria-label="Main dashboard navigation"] a', {
       text: 'Explore Templates',
     });
-    await page.waitForTimeout(100);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 100));
 
     await expect(page).toMatchTextContent(/Viewing all (\d+) templates/);
 

packages/e2e-tests/src/specs/editor/publishPanel/adminUser.js

@@ -94,7 +94,8 @@ describe('Publish panel in document tab', () => {
     );
 
     // add small delay after we have results
-    await page.waitForTimeout(400);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 400));
 
     const optionListAfterSearch = await authorDropDownOptions.$$eval(
       'li[role="option"]',

packages/e2e-tests/src/specs/editor/storyDetailsModal/adminUser.js

@@ -163,7 +163,8 @@ describe('Story Details Modal - Admin User', () => {
       );
 
       // add small delay after we have results
-      await page.waitForTimeout(400);
+      // TODO: Remove and replace with waitForSelector or locator API.
+      await new Promise((r) => setTimeout(r, 400));
 
       const optionListAfterSearch = await page.$$eval(
         '[aria-label="Option List Selector"] li[role="option"]',

packages/e2e-tests/src/specs/wordpress/widget.js

@@ -84,7 +84,8 @@ describe('Web Stories Widget', () => {
       );
 
       // The customizer has lots of transition animations.
-      await page.waitForTimeout(500);
+      // TODO: Remove and replace with waitForSelector or locator API.
+      await new Promise((r) => setTimeout(r, 500));
 
       // expect(page).toClick(...) doesn't seem to work.
       await page.evaluate(() => {
@@ -96,7 +97,8 @@ describe('Web Stories Widget', () => {
       });
 
       // The customizer has lots of transition animations.
-      await page.waitForTimeout(500);
+      // TODO: Remove and replace with waitForSelector or locator API.
+      await new Promise((r) => setTimeout(r, 500));
 
       await expect(page).toClick('button', { text: 'Add a Widget' });
 
@@ -107,7 +109,8 @@ describe('Web Stories Widget', () => {
       await expect(page).toClick("div[class*='web_stories_widget-']");
 
       // The customizer has lots of transition animations.
-      await page.waitForTimeout(500);
+      // TODO: Remove and replace with waitForSelector or locator API.
+      await new Promise((r) => setTimeout(r, 500));
 
       await page.$eval(
         '.web-stories-field-wrapper input',

packages/text-sets/scripts/cli.js

@@ -48,7 +48,8 @@ fs.mkdirSync(screenshotsPath, { recursive: true });
   await page.click('aria/Text library');
   await page.waitForSelector('aria/Text Set Options');
   // Wait for fonts to load
-  await page.waitForTimeout(1000);
+  // TODO: Remove and replace with waitForSelector or locator API.
+  await new Promise((r) => setTimeout(r, 1000));
 
   // Change BG of all TextSets container parents to transparent
   await page.evaluateHandle(() => {
@@ -95,7 +96,8 @@ fs.mkdirSync(screenshotsPath, { recursive: true });
     });
     process.stdout.write('.');
     await page.keyboard.press('ArrowRight');
-    await page.waitForTimeout(500);
+    // TODO: Remove and replace with waitForSelector or locator API.
+    await new Promise((r) => setTimeout(r, 500));
   }
 
   await browser.close();