diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml index ee21d72df14..53b48bf91c8 100644 --- a/.github/workflows/unit-tests.yml +++ b/.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: diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml index efad87c7069..f57c8267ced 100644 --- a/.github/workflows/verify.yml +++ b/.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 diff --git a/package.json b/package.json index d0c9d7ac132..dbdbcc88ad3 100644 --- a/package.json +++ b/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", diff --git a/packages/a11y-base/test/active-mixin.test.js b/packages/a11y-base/test/active-mixin.test.js index 99c06957185..2589b0a3eaf 100644 --- a/packages/a11y-base/test/active-mixin.test.js +++ b/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; diff --git a/test/test-runner-commands/index.js b/test/test-runner-commands/index.js index 3c16cd8a0fb..30a5771f1f6 100644 --- a/test/test-runner-commands/index.js +++ b/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); -} diff --git a/web-test-runner-it.config.js b/web-test-runner-it.config.js index 8d6fc6d625e..9aa1e6697ba 100644 --- a/web-test-runner-it.config.js +++ b/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, }, }), ], diff --git a/web-test-runner-snapshots.config.js b/web-test-runner-snapshots.config.js index 4135b7cec5d..dd4bc1ccc95 100644 --- a/web-test-runner-snapshots.config.js +++ b/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, }, }), ], diff --git a/web-test-runner.config.js b/web-test-runner.config.js index c05f450aab4..365d9bb22c5 100644 --- a/web-test-runner.config.js +++ b/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, }, }), ], diff --git a/yarn.lock b/yarn.lock index f3a2fc2169f..9c0a0b84ca2 100644 --- a/yarn.lock +++ b/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"