3d snapshotting via playwright

.gitignore

@@ -11,4 +11,6 @@ tmp*
 *.diff.png
 .env
 .DS_Store
-search-result.json
+search-result.json
+playwright-report
+test-results

package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
+    "@playwright/test": "^1.49.1",
     "@tscircuit/log-soup": "1.0.2",
     "@tscircuit/props": "^0.0.128",
     "@tscircuit/runframe": "^0.0.72",
@@ -38,6 +39,7 @@
     "circuit-json": "^0.0.129",
     "circuit-to-svg": "^0.0.99",
     "class-variance-authority": "^0.7.1",
+    "playwright": "^1.49.1",
     "react": "18",
     "react-dom": "18",
     "tsup": "^8.1.0",

playwright-tests/c14877.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from "@playwright/test"
+
+test("c14877", async ({ page }) => {
+  await page.goto("http://localhost:5181?jlcpcb_part_number=C14877")
+
+  await page.waitForSelector("#code-content", { state: "visible" })
+  await page.waitForLoadState("networkidle")
+
+  await expect(page).toHaveScreenshot()
+})

playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from "@playwright/test"
+import { defineConfig as defineViteConfig } from "vite"
+import { createServer } from "vite"
+
+export default defineConfig({
+  testDir: "./playwright-tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:5181",
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: "npm run start -- --port 5181",
+    url: "http://localhost:5181",
+    reuseExistingServer: !process.env.CI,
+    stdout: "pipe",
+    stderr: "pipe",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+})

site/App.tsx

@@ -45,6 +45,7 @@ export default () => {
   return (
     <div>
       <RunFrame
+        defaultActiveTab="cad"
         entrypoint="entrypoint.tsx"
         fsMap={{
           "entrypoint.tsx": `
@@ -60,7 +61,10 @@ circuit.add(<board width="10mm" height="10mm"><Component name="U1" /></board>)
           "snippet.tsx": tscircuitCode,
         }}
       />
-      <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto">
+      <pre
+        id="code-content"
+        className="bg-gray-100 p-4 rounded-lg overflow-x-auto"
+      >
         <code className="text-sm font-mono">{tscircuitCode}</code>
       </pre>
     </div>