wip

package.json

@@ -8,7 +8,7 @@
     "dev": "turbo dev2",
     "lint": "turbo lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "test": "turbo test --continue"
+    "test": "turbo test"
   },
   "devDependencies": {
     "@playwright/test": "1.45.3",

packages/e2e/playwright.config.ts

@@ -1,9 +1,17 @@
 // playwright.config.ts
 import { PlaywrightTestConfig } from "@playwright/test";
 
+const ratio = 16 / 10;
+const width = 800;
+const height = width / ratio;
+
 const config: PlaywrightTestConfig = {
   // testDir: "/Users/abernier/code/pmndrs/examples/packages/e2e/src",
   timeout: 1000 * 45, // 45s (default was 30s)
+  use: {
+    // colorScheme: "dark",
+    // viewport: { width, height },
+  },
 };
 
 export default config;

packages/e2e/snapshot.test.js

@@ -53,11 +53,11 @@ test(`${demoname}`, async ({ page }) => {
   await page.goto(`${host}/?saycheese`);
   await waitForEvent(page, "playwright:snapshot-ready");
 
-  // 📸 <canvas>
-  const $canvas = page.locator("canvas[data-engine]").first();
+  // const zone = page.locator("canvas[data-engine]").first(); // only capture the canvas zone
+  const zone = page;
 
   // 👁️
-  await expect($canvas).toHaveScreenshot({
+  await expect(zone).toHaveScreenshot({
     maxDiffPixelRatio: 0.05,
     timeout: 10000,
   });

packages/e2e/src/deterministic.js

@@ -14,6 +14,10 @@ if (sayCheeseParam) {
 
     opacity: 1!important;
   }
+
+  [id*="leva"],[class*="leva"],
+  div[style*="10000"],
+  [class*="c-"] {display:none!important;}
 `;
   document.head.appendChild(style);
 }

turbo.json

@@ -27,7 +27,8 @@
       "inputs": [
         "$TURBO_DEFAULT$",
         "../../packages/e2e/bin/test.mjs",
-        "../../packages/e2e/{playwright.config.ts,snapshot.test.js}"
+        "../../packages/e2e/{playwright.config.ts,snapshot.test.js}",
+        "../../packages/e2e/src/**"
       ],
       "outputs": ["../../packages/e2e/snapshot.test.js-snapshots/**"],
       "cache": true