Integrate glass skeleton capturing into ZDS

Makefile

@@ -166,6 +166,11 @@ else
 	npm run test:snapshots -- --headed --update-snapshots=$(E2E_MODE)
 endif
 
+.PHONY: glass-skeleton
+glass-skeleton:
+	$(MAKE) test-e2e-desktop MAKE_GLASS_SKELETON=yes
+
+
 ###############################################################################
 # CLEAN
 

e2e/playwright/zoo-test.ts

@@ -1,6 +1,13 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { test as playwrightTestFn } from '@playwright/test'
+import {
+  test as playwrightTestFn,
+  beforeEach,
+  afterEach,
+} from '@playwright/test'
+import fs from 'node:fs/promises'
+import path from 'node:path'
 
+import { GlassSkeletonRecorder } from 'glass-skeleton-recorder'
 import type { Fixtures } from '@e2e/playwright/fixtures/fixtureSetup'
 import {
   ElectronZoo,
@@ -94,8 +101,60 @@
   ],
 })
 
-const test = playwrightTestFnWithFixtures_.extend<Fixtures>(
-  fixturesBasedOnProcessEnvPlatform
-)
+const playwrightTestFnWithFixtures__ =
+  playwrightTestFnWithFixtures_.extend<Fixtures>(
+    fixturesBasedOnProcessEnvPlatform
+  )
+
+// Add the Glass Skeleton as a fixture to promise a fresh skeleton state
+const test = playwrightTestFnWithFixtures__.extend<{
+  glassSkeleton?: GlassSkeletonRecorder
+}>({
+  glassSkeleton: async ({ page }, use) => {
+    const glassSkeleton = process.env.MAKE_GLASS_SKELETON
+      ? // These are functions because those properties are late-bound.
+        new GlassSkeletonRecorder({
+          type: 'playwright',
+          page,
+          fs: {
+            writeFile: fs.writeFile,
+            mkdir: fs.mkdir,
+          },
+          path: {
+            resolve: path.resolve,
+          },
+          resources: [
+            {
+              protocol: GlassSkeletonRecorder.SupportedProtocol.WebSocket,
+              urlRegExpStr: 'wss://api.dev.zoo.dev',
+              removeMatchingRegExpStrs: [
+                'api-[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}',
+              ],
+            },
+          ],
+        })
+      : undefined
+    await use(glassSkeleton)
+  },
+})
+// These exist because otherwise the page is not navigated to yet.
+beforeEach(async ({ glassSkeleton }) => {
+  if (glassSkeleton === undefined) return
+  await glassSkeleton.start()
+})
+afterEach(async ({ glassSkeleton }, testInfo) => {
+  if (glassSkeleton === undefined) return
+  await glassSkeleton.stop()
+  void glassSkeleton.save({
+    outputDir: path.resolve(testInfo.outputPath(), '..'),
+    outputName:
+      testInfo.titlePath
+        .join('-')
+        .toLowerCase()
+        .trim()
+        .replace(/'"/g, '')
+        .replaceAll(' ', '-') + '.bson',
+  })
+})
 
 export { test }

package.json

@@ -12,6 +12,7 @@
   "main": ".vite/build/main.js",
   "license": "MIT",
   "workspaces": [
+    "../glass-skeleton/recorder",
     "packages/codemirror-lang-kcl",
     "packages/codemirror-lsp-client",
     "rust/kcl-language-server"