Playwright

.gitignore

@@ -26,3 +26,7 @@ __pycache__
 *.pyc
 /reports/*
 /crowdin/*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -54,7 +54,7 @@ These are excluded from the normal test run.
 
 The tests expect the app to already be running on http://localhost:3000, for example via `npm start`.
 
-We use [Puppeteer](https://pptr.dev/) and the helpers provided by [Testing Library](https://testing-library.com/docs/pptr-testing-library/intro/).
+We use [Playwright](https://playwright.dev/).
 
 The CI tests run these end-to-end tests against a production build.
 

package.json

@@ -44,6 +44,7 @@
     "lzma": "^2.3.2",
     "marked": "^4.0.15",
     "mobile-drag-drop": "^2.3.0-rc.2",
+    "playwright": "^1.42.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^4.8.0",
@@ -59,6 +60,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chakra-ui/cli": "^2.4.1",
     "@formatjs/cli": "^6.2.7",
+    "@playwright/test": "1.33.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -99,7 +101,7 @@
     "serve": "npx serve --no-clipboard -l 3000 -- build/",
     "start": "vite dev",
     "test:e2e:headless": "cross-env E2E_HEADLESS=1 vitest --mode e2e",
-    "test:e2e": "cross-env E2E_HEADLESS=0 vitest --mode e2e",
+    "test:e2e": "npx playwright test --ui",
     "test": "vitest",
     "theme:watch": "chakra-cli tokens src/deployment/default/theme.ts --watch",
     "theme": "chakra-cli tokens src/deployment/default/theme.ts",

playwright.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./src/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    ...(process.env.CI
+      ? {
+          command: `npx vite preview --port 3000 --base ${process.env.BASE_URL}`,
+          url: `http://localhost:3000${process.env.BASE_URL}`,
+        }
+      : {
+          command: "npm run start",
+          url: "http://localhost:3000",
+        }),
+    reuseExistingServer: !process.env.CI,
+  },
+});

src/e2e/accessibility.test.ts

@@ -2,36 +2,36 @@
  * (c) 2022, Micro:bit Educational Foundation and contributors
  *
  * SPDX-License-Identifier: MIT
  */
-import { App } from "./app";
+import { test } from "./app-test-fixtures.js";
+import { expect } from "@playwright/test";
 
-describe("accessibility", () => {
-  const app = new App();
-  beforeEach(app.reset.bind(app));
-  afterEach(app.screenshot.bind(app));
-  afterAll(app.dispose.bind(app));
-
-  it("focuses the correct element on tabbing after load", async () => {
-    await app.assertFocusOnLoad();
+test.describe("accessibility", () => {
+  test("focuses the correct element on tabbing after load", async ({ app }) => {
+    await app.expectFocusOnLoad();
   });
 
-  it("focuses the correct elements on collapsing and expanding the simulator", async () => {
-    await app.collapseSimulator();
-    await app.assertFocusOnExpandSimulator();
+  test("focuses the correct elements on collapsing and expanding the simulator", async ({
+    app,
+  }) => {
+    await app.simulator.collapseButton.click();
+    await expect(app.simulator.expandButton).toBeFocused();
 
-    await app.expandSimulator();
-    await app.assertFocusOnSimulator();
+    await app.simulator.expandButton.click();
+    await expect(app.simulator.iframe).toBeFocused();
   });
 
-  it("focuses the correct elements on collapsing and expanding the sidebar", async () => {
-    await app.collapseSidebar();
-    await app.assertFocusOnExpandSidebar();
-
-    await app.expandSidebar();
+  test("focuses the correct elements on collapsing and expanding the sidebar", async ({
+    app,
+  }) => {
+    await app.sidebar.expandButton.click();
     await app.assertFocusOnSidebar();
+
+    await app.sidebar.collapseButton.click();
+    await expect(app.sidebar.expandButton).toBeFocused();
   });
 
-  it("allows tab out of editor", async () => {
+  test("allows tab out of editor", async ({ app }) => {
     await app.tabOutOfEditorForwards();
     await app.assertFocusAfterEditor();
 

src/e2e/app-test-fixtures.ts

@@ -0,0 +1,35 @@
+import { test as base } from "@playwright/test";
+import { App } from "./app.js";
+
+type MyFixtures = {
+  app: App;
+};
+
+export const test = base.extend<MyFixtures>({
+  app: async ({ page, context }, use) => {
+    const app = new App(page, context);
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+    await context.addCookies([
+      {
+        // See corresponding code in App.tsx.
+        name: "mockDevice",
+        value: "1",
+        url: app.baseUrl,
+      },
+      // Don't show compliance notice for Foundation builds
+      {
+        name: "MBCC",
+        value: encodeURIComponent(
+          JSON.stringify({
+            version: 1,
+            analytics: false,
+            functional: true,
+          })
+        ),
+        url: app.baseUrl,
+      },
+    ]);
+    await app.goto();
+    await use(app);
+  },
+});