feat(ui): switch to webkit for storybook tests

pkgs/clan-app/shell.nix

@@ -113,15 +113,27 @@ mkShell {
     # todo darwin support needs some work
     (lib.optionalString stdenv.hostPlatform.isLinux ''
       # configure playwright for storybook snapshot testing
-      export PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+      # we only want webkit as that matches what the app is rendered with
+
       export PLAYWRIGHT_BROWSERS_PATH=${
         playwright-driver.browsers.override {
           withFfmpeg = false;
           withFirefox = false;
+          withWebkit = true;
           withChromium = false;
-          withChromiumHeadlessShell = true;
+          withChromiumHeadlessShell = false;
         }
       }
-      export PLAYWRIGHT_HOST_PLATFORM_OVERRIDE="ubuntu-24.04"
+
+      # stop playwright from trying to validate it has downloaded the necessary browsers
+      # we are providing them manually via nix
+
+      export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
+
+      # playwright browser drivers are versioned e.g. webkit-2191
+      # this helps us avoid having to update the playwright js dependency everytime we update nixpkgs and vice versa
+      # see vitest.config.js for corresponding launch configuration
+
+      export PLAYWRIGHT_WEBKIT_EXECUTABLE=$(find -L "$PLAYWRIGHT_BROWSERS_PATH" -type f -name "pw_run.sh")
     '');
 }

pkgs/clan-app/ui/package-lock.json

@@ -53,7 +53,7 @@
         "jsdom": "^26.1.0",
         "knip": "^5.61.2",
         "markdown-to-jsx": "^7.7.10",
-        "playwright": "~1.53.2",
+        "playwright": "~1.55.1",
         "postcss": "^8.4.38",
         "postcss-url": "^10.1.3",
         "prettier": "^3.2.5",
@@ -6956,13 +6956,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.53.2",
+      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.2.tgz",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.1.tgz",
-      "integrity": "sha512-6K/qQxVFuVQhRQhFsVZ9fGeatxirtrpPgxzBYWyZLEXJzqYwuL4fuNmfOfD5et1tJE4GScKyPNeLhZeRwuTU3A==",
+      "integrity": "sha512-cJW4Xd/G3v5ovXtJJ52MAOclqeac9S/aGGgRzLabuF8TnIb6xHvMzKIa6JmrRzUkeXJgfL1MhukP0NK6l39h3A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.53.2"
+        "playwright-core": "1.55.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6975,9 +6975,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.53.2",
+      "version": "1.55.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.2.tgz",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.1.tgz",
-      "integrity": "sha512-ox/OytMy+2w1jcYEYlOo1Hhp8hZkLCximMTUTMBXjGUA1KoFfiSZ+DU+3a739jsPY0yoKH2TFy9S2fsJas8yAw==",
+      "integrity": "sha512-Z6Mh9mkwX+zxSlHqdr5AOcJnfp+xUWLCt9uKV18fhzA8eyxUd8NUWzAjxUh55RZKSYwDGX0cfaySdhZJGMoJ+w==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {

pkgs/clan-app/ui/package.json

@@ -48,7 +48,7 @@
     "jsdom": "^26.1.0",
     "knip": "^5.61.2",
     "markdown-to-jsx": "^7.7.10",
-    "playwright": "~1.53.2",
+    "playwright": "~1.55.1",
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",

pkgs/clan-app/ui/tsconfig.json

@@ -9,7 +9,11 @@
     "esModuleInterop": true,
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
-    "types": ["vite/client", "vite-plugin-solid-svg/types-component-solid"],
+    "types": [
+      "vite/client",
+      "vite-plugin-solid-svg/types-component-solid",
+      "@vitest/browser/providers/playwright"
+    ],
     "noEmit": true,
     "resolveJsonModule": true,
     "allowJs": true,

pkgs/clan-app/ui/vitest.config.ts

@@ -40,7 +40,14 @@ export default mergeConfig(
               enabled: true,
               headless: true,
               provider: "playwright",
-              instances: [{ browser: "chromium" }],
+              instances: [
+                {
+                  browser: "webkit",
+                  launch: {
+                    executablePath: process.env.PLAYWRIGHT_WEBKIT_EXECUTABLE,
+                  },
+                },
+              ],
             },
             // This setup file applies Storybook project annotations for Vitest
             // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations