fix: fix playground and add playwright test

.github/workflows/pr.yaml

@@ -58,6 +58,8 @@ jobs:
   typescript:
     name: TypeScript
     runs-on: ubuntu-latest
+    env:
+      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: false
     steps:
       - uses: actions/checkout@v4
       - uses: Swatinem/rust-cache@v2
@@ -74,6 +76,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
       - uses: dtolnay/rust-toolchain@nightly
       - run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+      - run: cd playground && pnpm playwright install
       - run: pnpm run ci
   test:
     name: Test

editors/code/.gitignore

@@ -0,0 +1 @@
+out

package.json

@@ -9,8 +9,9 @@
     "prettier": "^3.4.2"
   },
   "scripts": {
-    "ci": "pnpm run fmt:check && pnpm run lint && pnpm run build",
+    "ci": "pnpm run fmt:check && pnpm run lint && pnpm run build && pnpm run test",
     "lint": "pnpm run -r lint",
+    "test": "pnpm run -r --filter playground test",
     "build": "pnpm run -r --filter=playground build && pnpm run -r --filter=editors build",
     "fmt": "prettier --cache -w editors playground README.md .github/**/*.{yaml,yml}",
     "fmt:check": "prettier --cache --check editors playground README.md .github/**/*.{yaml,yml}"

playground/.gitignore

@@ -0,0 +1 @@
+test-results

playground/package.json

@@ -6,10 +6,12 @@
     "build": "pnpm run build:wasm && vite build",
     "dev": "vite",
     "dev:wasm": "wasm-pack build ../crates/lib-wasm --dev --target web --out-dir ../../playground/src/pkg",
-    "lint": "eslint src --max-warnings 0"
+    "lint": "eslint src --max-warnings 0",
+    "test": "playwright test"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "@playwright/test": "^1.49.1",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "classnames": "^2.5.1",
@@ -21,7 +23,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "monaco-editor": "^0.52.0",
     "react": "^18.3.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^18.3.1",
     "react-resizable-panels": "^2.1.7"
   },
   "devDependencies": {

playground/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests", // directory where your tests will be located
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000,
+  },
+  // Run tests in headless browsers by default
+  use: {
+    headless: true,
+  },
+  // Configure projects for different browsers if desired
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  // Automatically start Vite dev server
+  webServer: {
+    command: "pnpm run dev",
+    url: "http://localhost:5173", // Vite default port
+    reuseExistingServer: !process.env.CI,
+  },
+});

playground/tests/main.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test";
+
+test("home page opens", async ({ page }) => {
+  // Navigate to the home page
+  await page.goto("http://localhost:5173");
+
+  // Check if the main heading or any expected element is visible
+  // For a React app created by Vite + React template, the initial content often includes <h1>Vite + React</h1>
+  await page.getByRole("link", { name: "quary Quary" }).isVisible();
+});