@@ -11,9 +11,14 @@ runs:
   using: composite
   steps:
     - name: Install Playwright
-      if: ${{ inputs.package_name == 'scratch-render' }}
+      if: ${{ inputs.package_name == 'scratch-render' || inputs.package_name == 'scratch-gui' }}
       shell: bash
-      run: npx playwright install --with-deps chromium
+      # Install both browsers for any package that needs Playwright,
+      # even if a particular package only uses one of them — keeping
+      # the install step uniform is much simpler than maintaining a
+      # per-package browser list, and Firefox in scratch-render is
+      # cheap unused weight rather than a correctness problem.
+      run: npx playwright install --with-deps chromium firefox
     - name: Test
       working-directory: ./packages/${{ inputs.package_name }}
       shell: bash
@@ -27,7 +32,19 @@ runs:
       if: ${{ !cancelled() }}
       uses: EnricoMi/publish-unit-test-result-action@34d7c956a59aed1bfebf31df77b8de55db9bbaaf # v2
       with:
-        files: "./packages/${{ inputs.package_name }}/test-results/**/*"
+        # Exclude Playwright's HTML report and per-test artifact
+        # directories. Without these exclusions the action would try to
+        # parse HTML, CSS, JS, PNG, JSON, etc. as test result files.
+        #
+        # We exclude by directory rather than by file extension because
+        # the action supports JSON test results (Dart, Mocha) and
+        # Playwright also writes .json files (e.g. .last-run.json) —
+        # extension-based exclusion would either break JSON test report
+        # support or let Playwright metadata through to the parser.
+        files: |
+          ./packages/${{ inputs.package_name }}/test-results/**/*
+          !./packages/${{ inputs.package_name }}/test-results/playwright-html/**
+          !./packages/${{ inputs.package_name }}/test-results/playwright-artifacts/**
         check_name: "Test report for ${{ inputs.package_name }}"
         test_file_prefix: "+packages/${{ inputs.package_name }}/"
     - name: Store Test Results
 
@@ -58,9 +58,10 @@
     "prepare": "node scripts/prepare.mjs",
     "prepublishOnly": "echo \"Please publish through CI only.\" && exit 1",
     "start": "webpack serve",
-    "test": "npm run test:lint && npm run test:unit && npm run test:integration",
+    "test": "npm run test:lint && npm run test:unit && npm run test:integration && npm run test:playwright",
     "test:integration": "cross-env JEST_JUNIT_OUTPUT_NAME=integration-tests-results.xml jest --maxWorkers=4 test[\\\\/]integration",
     "test:lint": "eslint",
+    "test:playwright": "playwright test",
     "test:smoke": "jest --runInBand test[\\\\/]smoke",
     "test:unit": "cross-env JEST_JUNIT_OUTPUT_NAME=unit-tests-results.xml jest test[\\\\/]unit",
     "watch": "webpack --watch"
@@ -197,6 +198,7 @@
     "@babel/core": "7.29.0",
     "@babel/preset-env": "7.29.2",
     "@babel/preset-react": "7.28.5",
+    "@playwright/test": "1.59.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.3.1",
     "@types/jest": "25.2.3",
 
@@ -0,0 +1,73 @@
+// @ts-check
+const path = require('path');
+const {defineConfig, devices} = require('@playwright/test');
+
+/**
+ * Playwright configuration for scratch-gui browser tests.
+ *
+ * These tests run in both Chromium and Firefox so cross-browser issues
+ * (e.g., differences in how each browser interprets pointer event spec
+ * compatibility-mouse-event suppression) are caught in CI rather than
+ * being noticed by users on staging.
+ *
+ * Tests load the built playground from `build/` via a `file://` URL,
+ * mirroring the existing Selenium-based integration tests in
+ * `test/integration/`. CI builds scratch-gui before running the test
+ * job, so the build artifact is always present when this config runs.
+ * Locally, run `npm run build` in scratch-gui first.
+ *
+ * Test files reference pages relative to the build directory via
+ * Playwright's `baseURL`, e.g. `await page.goto('index.html')`.
+ */
+module.exports = defineConfig({
+    testDir: './test/playwright',
+
+    // Tests in this suite are isolated and stateless, so they can
+    // safely run in parallel.
+    fullyParallel: true,
+
+    // Fail the build if a developer accidentally commits `test.only`.
+    forbidOnly: !!process.env.CI,
+
+    // CI gets a single retry for flake tolerance; locally, fail fast.
+    retries: process.env.CI ? 1 : 0,
+
+    // Keep all Playwright output under the same `test-results/`
+    // directory the rest of scratch-gui's test pipeline writes to,
+    // so the CI publish-unit-test-result-action and upload-artifact
+    // steps pick everything up with their existing globs.
+    //
+    // The HTML report has to live in its own subdirectory because
+    // the HTML reporter clears its output folder on each run, and
+    // Playwright refuses to point it at the same folder as
+    // `outputDir` (which holds per-test artifacts like traces and
+    // screenshots).
+    outputDir: 'test-results/playwright-artifacts',
+    reporter: [
+        ['list'],
+        ['junit', {outputFile: 'test-results/playwright-junit.xml'}],
+        ['html', {outputFolder: 'test-results/playwright-html', open: 'never'}]
+    ],
+
+    use: {
+        // Resolve relative `page.goto()` URLs against the built
+        // playground so individual tests don't need to compute paths
+        // relative to their own location on disk.
+        baseURL: `file://${path.resolve(__dirname, 'build')}/`,
+
+        // Capture a trace on the first retry so CI failures are
+        // debuggable without re-running tests locally.
+        trace: 'on-first-retry'
+    },
+
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']}
+        },
+        {
+            name: 'firefox',
+            use: {...devices['Desktop Firefox']}
+        }
+    ]
+});
@@ -0,0 +1,33 @@
+// @ts-check
+const {test, expect} = require('@playwright/test');
+
+// `baseURL` in playwright.config.js points at the built playground
+// (`packages/scratch-gui/build/`), so relative URLs here resolve
+// against that directory. CI downloads the build artifact before
+// running this suite; locally, run `npm run build` in scratch-gui
+// first.
+
+test.describe('editor smoke test', () => {
+    test('the editor loads and the Backpack header is visible', async ({page}) => {
+        // Capture uncaught exceptions so a broken bundle fails loudly with
+        // the underlying error instead of silently timing out on the
+        // visibility assertion below. Note: we deliberately do NOT capture
+        // `console.error` events. The current scratch-gui playground emits
+        // a flood of React `defaultProps` deprecation warnings on mount,
+        // which would drown out any real signal. Uncaught exceptions
+        // (`pageerror`) are the right granularity for catching things
+        // like a bundle that fails to evaluate at all.
+        const pageErrors = [];
+        page.on('pageerror', err => pageErrors.push(err.message));
+
+        await page.goto('index.html');
+
+        // The Backpack header is always rendered in the playground build,
+        // even when no backpack host is configured (it just gets wrapped in
+        // a "Coming Soon" tooltip). It is a stable, user-visible marker
+        // that the editor mounted and rendered the menu bar / footer area.
+        await expect(page.getByText('Backpack', {exact: true})).toBeVisible();
+
+        expect(pageErrors, 'uncaught exceptions during editor load').toEqual([]);
+    });
+});