test: add Playwright integration tests for dev-playground

.github/workflows/ci.yml

@@ -77,6 +77,34 @@ jobs:
       - name: Run Tests
         run: pnpm test
 
+  playground-integration-test:
+    name: Playground Integration Tests
+    needs: detect-changes
+    if: needs.detect-changes.outputs.appkit == 'true'
+    runs-on:
+      group: databricks-protected-runner-group
+      labels: linux-ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: pnpm --filter=dev-playground exec playwright install --with-deps chromium
+      - name: Build packages
+        run: pnpm build
+      - name: Run Integration Tests
+        run: pnpm --filter=dev-playground test:integration
+        env:
+          APPKIT_E2E_TEST: 'true'
+          DATABRICKS_WAREHOUSE_ID: e2e-mock
+          DATABRICKS_WORKSPACE_ID: e2e-mock
+
   docs-build:
     name: Docs Build
     needs: detect-changes

apps/dev-playground/.gitignore

@@ -0,0 +1,3 @@
+# Playwright
+test-results/
+playwright-report/

apps/dev-playground/README.md

@@ -0,0 +1,41 @@
+# Dev Playground
+
+Test application showing AppKit capabilities including analytics dashboards, SSE streaming, telemetry, and data visualization.
+
+## Development
+
+```bash
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start:local
+```
+
+## Integration Tests
+
+Integration tests use Playwright to verify the application works correctly with mocked backend responses.
+
+**Note:** These are frontend-only integration tests. API calls are intercepted at the browser level and return mock data, so the AppKit backend plugins are not tested. They focus on verifying UI behavior, navigation, data rendering, and client-side interactions.
+
+### Running Tests
+
+```bash
+# Run all integration tests
+pnpm test:integration
+
+# Run tests with interactive UI mode (for debugging)
+pnpm test:integration:ui
+
+# Run tests in headed mode (see the browser)
+pnpm test:integration:headed
+
+# Run a specific test file
+npx playwright test tests/smoke.spec.ts
+
+# Run tests matching a pattern
+npx playwright test -g "analytics"
+```

apps/dev-playground/client/src/routes/telemetry.route.tsx

@@ -106,9 +106,7 @@ function TelemetryRoute() {
     <div className="min-h-screen bg-background">
       <div className="max-w-6xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
-            Telemetry Demo
-          </h1>
+          <h1 className="text-3xl font-bold mb-2">Telemetry Demo</h1>
           <p className="text-base text-gray-500">
             Demonstrates how the SDK's auto-instrumentation integrates with
             custom application telemetry. This example showcases HTTP and cache

apps/dev-playground/package.json

@@ -14,7 +14,10 @@
     "preview": "vite preview",
     "check": "tsc",
     "clean": "rm -rf build && cd client && rm -rf dist",
-    "clean:full": "rm -rf build node_modules && cd client && rm -rf dist node_modules"
+    "clean:full": "rm -rf build node_modules && cd client && rm -rf dist node_modules",
+    "test:integration": "playwright test",
+    "test:integration:ui": "playwright test --ui",
+    "test:integration:headed": "playwright test --headed"
   },
   "keywords": [],
   "author": "",
@@ -25,6 +28,7 @@
     "zod": "^4.1.13"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.1",
     "@types/node": "^20.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^5.0.4",

apps/dev-playground/playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:8000",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:8000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});

apps/dev-playground/server/index.ts

@@ -1,14 +1,26 @@
 import { analytics, createApp, server } from "@databricks/appkit";
+import { WorkspaceClient } from "@databricks/sdk-experimental";
 import { reconnect } from "./reconnect-plugin";
 import { telemetryExamples } from "./telemetry-example-plugin";
 
+function createMockClient() {
+  const client = new WorkspaceClient({
+    host: "http://localhost",
+    token: "e2e",
+    authType: "pat",
+  });
+  client.currentUser.me = async () => ({ id: "e2e-test-user" });
+  return client;
+}
+
 createApp({
   plugins: [
     server({ autoStart: false }),
     reconnect(),
     telemetryExamples(),
     analytics({}),
   ],
+  ...(process.env.APPKIT_E2E_TEST && { client: createMockClient() }),
 }).then((appkit) => {
   appkit.server
     .extend((app) => {