From 9cb0d7c9626a6bfe1999f5ce9bb69442ea892fe3 Mon Sep 17 00:00:00 2001 From: Giamir Buoncristiani Date: Tue, 23 Jan 2024 11:35:43 +0100 Subject: [PATCH] test(e2e): tab consistently across browsers --- package-lock.json | 70 ++++++++++++++++++++---------- package.json | 2 +- test/commonmark/editor.e2e.test.ts | 8 ++-- test/e2e-helpers.ts | 14 ++++++ 4 files changed, 66 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 570222a0..860be98a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,7 +33,7 @@ "devDependencies": { "@commitlint/cli": "^17.4.4", "@commitlint/config-conventional": "^17.4.4", - "@playwright/test": "^1.31.1", + "@playwright/test": "^1.41.1", "@stackoverflow/commitlint-config": "^1.0.0", "@stackoverflow/eslint-config": "^1.0.0", "@stackoverflow/prettier-config": "^1.0.0", @@ -1593,22 +1593,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.31.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.1.tgz", - "integrity": "sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==", + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.1.tgz", + "integrity": "sha512-9g8EWTjiQ9yFBXc6HjCWe41msLpxEX0KhmfmPl9RPLJdfzL4F0lg2BdJ91O9azFdl11y1pmpwdjBiSxvqc+btw==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.31.1" + "playwright": "1.41.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@polka/url": { @@ -8763,16 +8759,34 @@ "node": ">=8" } }, - "node_modules/playwright-core": { - "version": "1.31.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.1.tgz", - "integrity": "sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==", + "node_modules/playwright": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.1.tgz", + "integrity": "sha512-gdZAWG97oUnbBdRL3GuBvX3nDDmUOuqzV/D24dytqlKt+eI5KbwusluZRGljx1YoJKZ2NRPaeWiFTeGZO7SosQ==", "dev": true, + "dependencies": { + "playwright-core": "1.41.1" + }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.1.tgz", + "integrity": "sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" } }, "node_modules/postcss": { @@ -13319,14 +13333,12 @@ } }, "@playwright/test": { - "version": "1.31.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.31.1.tgz", - "integrity": "sha512-IsytVZ+0QLDh1Hj83XatGp/GsI1CDJWbyDaBGbainsh0p2zC7F4toUocqowmjS6sQff2NGT3D9WbDj/3K2CJiA==", + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.1.tgz", + "integrity": "sha512-9g8EWTjiQ9yFBXc6HjCWe41msLpxEX0KhmfmPl9RPLJdfzL4F0lg2BdJ91O9azFdl11y1pmpwdjBiSxvqc+btw==", "dev": true, "requires": { - "@types/node": "*", - "fsevents": "2.3.2", - "playwright-core": "1.31.1" + "playwright": "1.41.1" } }, "@polka/url": { @@ -18802,10 +18814,20 @@ } } }, + "playwright": { + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.41.1.tgz", + "integrity": "sha512-gdZAWG97oUnbBdRL3GuBvX3nDDmUOuqzV/D24dytqlKt+eI5KbwusluZRGljx1YoJKZ2NRPaeWiFTeGZO7SosQ==", + "dev": true, + "requires": { + "fsevents": "2.3.2", + "playwright-core": "1.41.1" + } + }, "playwright-core": { - "version": "1.31.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.31.1.tgz", - "integrity": "sha512-JTyX4kV3/LXsvpHkLzL2I36aCdml4zeE35x+G5aPc4bkLsiRiQshU5lWeVpHFAuC8xAcbI6FDcw/8z3q2xtJSQ==", + "version": "1.41.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.41.1.tgz", + "integrity": "sha512-/KPO5DzXSMlxSX77wy+HihKGOunh3hqndhqeo/nMxfigiKzogn8kfL0ZBDu0L1RKgan5XHCPmn6zXd2NUJgjhg==", "dev": true }, "postcss": { diff --git a/package.json b/package.json index 73f5d482..3d2425a0 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@commitlint/cli": "^17.4.4", "@commitlint/config-conventional": "^17.4.4", - "@playwright/test": "^1.31.1", + "@playwright/test": "^1.41.1", "@stackoverflow/commitlint-config": "^1.0.0", "@stackoverflow/eslint-config": "^1.0.0", "@stackoverflow/prettier-config": "^1.0.0", diff --git a/test/commonmark/editor.e2e.test.ts b/test/commonmark/editor.e2e.test.ts index 5ccf55b9..042896e7 100644 --- a/test/commonmark/editor.e2e.test.ts +++ b/test/commonmark/editor.e2e.test.ts @@ -6,6 +6,7 @@ import { typeText, switchMode, clickEditorContent, + tab, } from "../e2e-helpers"; const moreMenuDropdownSelector = ".js-more-formatting-dropdown"; @@ -74,6 +75,7 @@ test.describe.serial("markdown mode", () => { test("should retain focus on the menu item after triggering via keyboard", async ({ page, + browserName, }) => { await expect(page.locator(moreMenuDropdownSelector)).toBeInViewport(); @@ -90,9 +92,9 @@ test.describe.serial("markdown mode", () => { await page.keyboard.press("Enter"); // Tab to "Spoiler (Cmd-/)" - await page.keyboard.press("Tab"); - await page.keyboard.press("Tab"); - await page.keyboard.press("Tab"); + await tab(page, browserName); + await tab(page, browserName); + await tab(page, browserName); const activeElementDataKey = await page.evaluate(() => document.activeElement.getAttribute("data-key") diff --git a/test/e2e-helpers.ts b/test/e2e-helpers.ts index a8e87d3b..7650c89e 100644 --- a/test/e2e-helpers.ts +++ b/test/e2e-helpers.ts @@ -91,3 +91,17 @@ export async function clickEditorContent( clickCount, }); } + +/** + * Simulate pressing the tab key consistently across browsers + * @param page + * @param browserName + */ +export async function tab( + page: Page, + browserName: "chromium" | "firefox" | "webkit" +): Promise { + // see https://github.com/microsoft/playwright/issues/2114 + const tabKey = browserName === "webkit" ? "Alt+Tab" : "Tab"; + await page.keyboard.press(tabKey); +}