test(e2e): tab consistently across browsers

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",

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")

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<void> {
+    // see https://github.com/microsoft/playwright/issues/2114
+    const tabKey = browserName === "webkit" ? "Alt+Tab" : "Tab";
+    await page.keyboard.press(tabKey);
+}