Use @playwright/test with Chromium only

Previously Playwright tests were disabled because they weren't stable on
CI. Let's see if this helps.

.github/workflows/tests.yml

@@ -59,5 +59,7 @@ jobs:
                   install: false
                   start: yarn start
                   wait-on: "http://localhost:1337"
-            # - name: Run playwright tests
-            #   run: yarn test:playwright
+            - name: Prepare Playwright
+              run: npx playwright install chromium
+            - name: Run playwright tests
+              run: yarn test:playwright

package.json

@@ -16,7 +16,7 @@
     "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.11.1",
+    "@playwright/test": "^1.11.0",
     "prettier": "^2.2.1",
     "ts-jest": "^26.4.3",
     "typescript": "^4.0.2"
@@ -46,8 +46,8 @@
     "test:integration": "TEST_TARGET=integration jest",
     "test:integration:watch": "TEST_TARGET=integration jest --watchAll",
     "test:watch": "jest --watchAll",
-    "test:playwright": "TEST_TARGET=playwright jest --testTimeout=15000",
-    "test:playwright:debug": "TEST_TARGET=playwright PWDEBUG=1 jest --testTimeout=900000",
+    "test:playwright": "yarn playwright test",
+    "test:playwright:debug": "PWDEBUG=1 yarn playwright test",
     "test-e2e:dev": "cypress run --headed || true",
     "cypress": "cypress open",
     "prettier:check": "prettier --check .",

playwright.config.ts

@@ -0,0 +1,16 @@
+import { PlaywrightTestConfig } from "@playwright/test"
+
+const ci = process.env.CI === "true"
+const headless = ci || process.env.HEADLESS === "true"
+
+const config: PlaywrightTestConfig = {
+    testDir: "playwright",
+    timeout: 60000, // Timeout per test file (default 30000)
+    use: {
+        headless,
+        baseURL: "http://localhost:8080",
+        actionTimeout: 15000,
+    },
+    reporter: ci ? "github" : "line",
+}
+export default config

playwright/src/test.ts

@@ -1,36 +1,40 @@
-import { Browser, Page, chromium, webkit } from "playwright"
-
-let chromiumBrowser: Browser
-let webkitBrowser: Browser
+import { Browser, Page, chromium, test, expect } from "@playwright/test"
 
 const boardUrl = "http://localhost:1337/b/default"
 const notePalette = `[data-test="palette-new-note"]`
 
-beforeAll(async () => {
-    chromiumBrowser = await chromium.launch({ headless: true })
-    webkitBrowser = await webkit.launch({ headless: true })
-})
+test.describe("Two simultaneous users", () => {
+    let browser1: Browser
+    let browser2: Browser
 
-afterAll(async () => {
-    await chromiumBrowser.close()
-    await webkitBrowser.close()
-})
+    test.beforeAll(async () => {
+        browser1 = await chromium.launch({ headless: true })
+        browser2 = await chromium.launch({ headless: true })
+    })
+
+    test("two anonymous users can see each other notes", async () => {
+        const userPage = await navigateToBoard(browser1)
+        const anotherUserPage = await navigateToBoard(browser2)
 
-test("two anonymous users can see each other notes", async () => {
-    const userPage = await navigateToBoard(chromiumBrowser)
-    const anotherUserPage = await navigateToBoard(webkitBrowser)
+        // create 2 notes, one on each page
+        const userPageNoteText = `note-${semiUniqueId()}`
+        await createNoteWithText(0, userPageNoteText, userPage)
+        const anotherUserPageNoteText = `another-${semiUniqueId()}`
+        await createNoteWithText(500, anotherUserPageNoteText, anotherUserPage)
 
-    // create 2 notes, one on each page
-    const userPageNoteText = `note-${semiUniqueId()}`
-    await createNoteWithText(0, userPageNoteText, userPage)
-    const anotherUserPageNoteText = `another-${semiUniqueId()}`
-    await createNoteWithText(500, anotherUserPageNoteText, anotherUserPage)
+        const note = await anotherUserPage.waitForSelector(`[data-test^="note"][data-test*="${userPageNoteText}"]`)
+        const anotherNote = await userPage.waitForSelector(
+            `[data-test^="note"][data-test*="${anotherUserPageNoteText}"]`,
+        )
 
-    const note = await anotherUserPage.waitForSelector(`[data-test^="note"][data-test*="${userPageNoteText}"]`)
-    const anotherNote = await userPage.waitForSelector(`[data-test^="note"][data-test*="${anotherUserPageNoteText}"]`)
+        expect(note).not.toBeNull()
+        expect(anotherNote).not.toBeNull()
+    })
 
-    expect(note).not.toBeNull()
-    expect(anotherNote).not.toBeNull()
+    test.afterAll(async () => {
+        await browser1.close()
+        await browser2.close()
+    })
 })
 
 const semiUniqueId = () => {