test: switch from puppeteer to playwright chrome (#8659) (#8665)

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

.github/workflows/unit-tests.yml

@@ -23,6 +23,9 @@ jobs:
       - name: Install Dependencies
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
+      - name: Install Playwright
+        run: npx playwright install chrome --with-deps
+
       - name: Test
         run: yarn test
   firefox:

.github/workflows/verify.yml

@@ -65,5 +65,8 @@ jobs:
       - name: Install Dependencies
         run: yarn --frozen-lockfile --no-progress --non-interactive
 
+      - name: Install Playwright
+        run: npx playwright install chrome --with-deps
+
       - name: Test
         run: yarn test:it

package.json

@@ -41,7 +41,6 @@
     "@web/rollup-plugin-html": "^2.0.0",
     "@web/test-runner": "^0.19.0" ,
     "@web/test-runner-playwright": "^0.11.0",
-    "@web/test-runner-puppeteer": "^0.17.0",
     "@web/test-runner-saucelabs": "^0.13.0",
     "@web/test-runner-visual-regression": "^0.10.0",
     "axios": "^1.4.0",

packages/a11y-base/test/active-mixin.test.js

@@ -61,6 +61,12 @@ describe('active-mixin', () => {
   });
 
   describe('keyboard', () => {
+    afterEach(async () => {
+      for (const key of ['Space', 'Enter']) {
+        await sendKeys({ up: key });
+      }
+    });
+
     it('should set active attribute when Space is pressed', async () => {
       await sendKeys({ down: 'Space' });
       expect(element.hasAttribute('active')).to.be.true;

test/test-runner-commands/index.js

@@ -29,66 +29,3 @@ export async function sendMouseToElement(payload) {
   const y = Math.floor(rect.y + rect.height / 2);
   await executeServerCommand('send-mouse', { ...payload, position: [x, y] });
 }
-
-/**
- * Resets the mouse position and releases mouse buttons.
- */
-export async function resetMouse() {
-  await executeServerCommand('reset-mouse');
-  // 'reset-mouse' moves mouse to [0,0], which can interfere with following tests that
-  // depend on mouse events by causing unwanted `mouseenter` events with Puppeteer.
-  // Instead move it to the bottom right to make it less likely to affect other tests.
-  if (/Chrome/u.test(navigator.userAgent) && /Google Inc/u.test(navigator.vendor)) {
-    await executeServerCommand('send-mouse', { type: 'move', position: [window.innerWidth, window.innerHeight] });
-  }
-}
-
-/**
- * Extends the `sendKeys` command to support pressing multiple keys
- * simultaneously when provided in the format "Shift+Tab". This format
- * is natively supported by Playwright but not by Puppeteer. This wrapper
- * enables the same syntax to be used in Puppeteer.
- *
- * In WebDriver, this functionality is still unavailable because
- * web-test-runner does not provide an API for holding keys down.
- *
- * For more documentation on the original command, please see
- * https://modern-web.dev/docs/test-runner/commands/#send-keys
- *
- * @typedef {{ type: string }} TypePayload
- * @typedef {{ press: string }} PressPayload
- * @typedef {{ down: string }} DownPayload
- * @typedef {{ up: string }} UpPayload
- * @param payload {TypePayload | PressPayload | DownPayload | UpPayload}
- *
- * @example
- * // Tab to the next element
- * await sendKeys({ press: 'Tab' });
- *
- * @example
- * // Tab to the previous element
- * await sendKeys({ press: 'Shift+Tab' });
- *
- * @example
- * await sendKeys({ down: 'Shift' });
- * // Do something while holding Shift
- * await sendKeys({ up: 'Shift' });
- */
-export async function sendKeys(payload) {
-  const { press } = payload;
-  if (press && press.includes('+')) {
-    const keys = press.split('+').map((key) => key.trim());
-
-    for (const key of keys) {
-      await executeServerCommand('send-keys', { down: key });
-    }
-
-    for (const key of keys.reverse()) {
-      await executeServerCommand('send-keys', { up: key });
-    }
-
-    return;
-  }
-
-  await executeServerCommand('send-keys', payload);
-}

web-test-runner-it.config.js

@@ -1,13 +1,15 @@
 /* eslint-env node */
-const { puppeteerLauncher } = require('@web/test-runner-puppeteer');
 const { createIntegrationTestsConfig } = require('./wtr-utils.js');
 const devServerConfig = require('./web-dev-server.config.js');
+const { playwrightLauncher } = require('@web/test-runner-playwright');
 
 const unitTestsConfig = createIntegrationTestsConfig({
   browsers: [
-    puppeteerLauncher({
+    playwrightLauncher({
+      product: 'chromium',
       launchOptions: {
-        headless: 'shell',
+        channel: 'chrome',
+        headless: true,
       },
     }),
   ],

web-test-runner-snapshots.config.js

@@ -1,12 +1,14 @@
 /* eslint-env node */
-const { puppeteerLauncher } = require('@web/test-runner-puppeteer');
+const { playwrightLauncher } = require('@web/test-runner-playwright');
 const { createSnapshotTestsConfig } = require('./wtr-utils.js');
 
 module.exports = createSnapshotTestsConfig({
   browsers: [
-    puppeteerLauncher({
+    playwrightLauncher({
+      product: 'chromium',
       launchOptions: {
-        headless: 'shell',
+        channel: 'chrome',
+        headless: true,
       },
     }),
   ],

web-test-runner.config.js

@@ -1,13 +1,15 @@
 /* eslint-env node */
-const { puppeteerLauncher } = require('@web/test-runner-puppeteer');
 const { createUnitTestsConfig } = require('./wtr-utils.js');
 const devServerConfig = require('./web-dev-server.config.js');
+const { playwrightLauncher } = require('@web/test-runner-playwright');
 
 const unitTestsConfig = createUnitTestsConfig({
   browsers: [
-    puppeteerLauncher({
+    playwrightLauncher({
+      product: 'chromium',
       launchOptions: {
-        headless: 'shell',
+        channel: 'chrome',
+        headless: true,
       },
     }),
   ],

yarn.lock

@@ -2541,15 +2541,6 @@
     "@web/test-runner-coverage-v8" "^0.8.0"
     playwright "^1.22.2"
 
-"@web/test-runner-puppeteer@^0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@web/test-runner-puppeteer/-/test-runner-puppeteer-0.17.0.tgz#a194df3f57a53d66b1bc9ef993358d4f3b2d0469"
-  integrity sha512-uGk0G28RfQFDRoBBGOwq4i+PGcVS2dTqu/wFJzT4A7o1DIwKk32dT68q+m7idtH/6X+jIKVg4nnDBVEVgujtpg==
-  dependencies:
-    "@web/test-runner-chrome" "^0.17.0"
-    "@web/test-runner-core" "^0.13.0"
-    puppeteer "^23.2.0"
-
 "@web/test-runner-saucelabs@^0.13.0":
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/@web/test-runner-saucelabs/-/test-runner-saucelabs-0.13.0.tgz#66b50d4cf6ca29163e8c67e0d6a0b5863ac69172"
@@ -10291,7 +10282,7 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-puppeteer-core@23.11.1, puppeteer-core@^23.2.0:
+puppeteer-core@^23.2.0:
   version "23.11.1"
   resolved "https://registry.yarnpkg.com/puppeteer-core/-/puppeteer-core-23.11.1.tgz#3e064de11b3cb3a2df1a8060ff2d05b41be583db"
   integrity sha512-3HZ2/7hdDKZvZQ7dhhITOUg4/wOrDRjyK2ZBllRB0ZCOi9u0cwq1ACHDjBB+nX+7+kltHjQvBRdeY7+W0T+7Gg==
@@ -10303,18 +10294,6 @@ puppeteer-core@23.11.1, puppeteer-core@^23.2.0:
     typed-query-selector "^2.12.0"
     ws "^8.18.0"
 
-puppeteer@^23.2.0:
-  version "23.11.1"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-23.11.1.tgz#98fd9040786b1219b1a4f639c270377586e8899c"
-  integrity sha512-53uIX3KR5en8l7Vd8n5DUv90Ae9QDQsyIthaUFVzwV6yU750RjqRznEtNMBT20VthqAdemnJN+hxVdmMHKt7Zw==
-  dependencies:
-    "@puppeteer/browsers" "2.6.1"
-    chromium-bidi "0.11.0"
-    cosmiconfig "^9.0.0"
-    devtools-protocol "0.0.1367902"
-    puppeteer-core "23.11.1"
-    typed-query-selector "^2.12.0"
-
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -11569,7 +11548,7 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -11587,15 +11566,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -11680,7 +11650,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -11694,13 +11664,6 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -12922,7 +12885,7 @@ wordwrapjs@^5.1.0:
   resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-5.1.0.tgz#4c4d20446dcc670b14fa115ef4f8fd9947af2b3a"
   integrity sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -12948,15 +12911,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"