Trigger shutdown operations after each test

e2e/playwright/flow-tests.spec.ts

@@ -52,7 +52,24 @@ const commonPoints = {
   // num2: 19.19,
 }
 
-// Utilities for writing tests that depend on test values
+test.afterEach(async ({ context, page }, testInfo) => {
+  if (testInfo.status === 'skipped') return
+  if (testInfo.status === 'failed') return
+
+  const u = await getUtils(page)
+  // Kill the network so shutdown happens properly
+  await u.emulateNetworkConditions({
+    offline: true,
+    // values of 0 remove any active throttling. crbug.com/456324#c9
+    latency: 0,
+    downloadThroughput: -1,
+    uploadThroughput: -1,
+  })
+
+  // It seems it's best to give the browser about 3s to close things
+  // It's not super reliable but we have no real other choice for now
+  await page.waitForTimeout(3000)
+})
 
 test.beforeEach(async ({ context, page }) => {
   // wait for Vite preview server to be up
@@ -78,7 +95,7 @@ test.beforeEach(async ({ context, page }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' })
 })
 
-test.setTimeout(60000)
+test.setTimeout(120000)
 
 async function doBasicSketch(page: Page, openPanes: string[]) {
   const u = await getUtils(page)

e2e/playwright/test-utils.ts

@@ -312,9 +312,9 @@ export async function getUtils(page: Page) {
         fullPage: true,
       })
       const screenshot = await PNG.sync.read(buffer)
-      // most likely related to pixel density but the screenshots for webkit are 2x the size
+      const pixMultiplier: number = await page.evaluate(
-      // there might be a more robust way of doing this.
+        'window.devicePixelRatio'
-      const pixMultiplier = browserType === 'webkit' ? 2 : 1
+      )
       const index =
         (screenshot.width * coords.y * pixMultiplier +
           coords.x * pixMultiplier) *
@@ -377,11 +377,10 @@ export async function getUtils(page: Page) {
     emulateNetworkConditions: async (
       networkOptions: Protocol.Network.emulateNetworkConditionsParameters
     ) => {
-      // Skip on non-Chromium browsers, since we need to use the CDP.
+      if (cdpSession === null) {
-      test.skip(
+        // Use a fail safe if we can't simulate disconnect (on Safari)
-        cdpSession === null,
+        return page.evaluate('window.tearDown()')
-        'Network emulation is only supported in Chromium'
+      }
-      )
 
       cdpSession?.send('Network.emulateNetworkConditions', networkOptions)
     },

src/lang/std/engineConnection.ts

@@ -1200,6 +1200,15 @@ export class EngineCommandManager extends EventTarget {
       token,
     })
 
+    // Teardown everything if we go hidden or reconnect
+    document.onvisibilitychange = () => {
+      if (document.visibilityState === 'hidden') {
+        this.engineConnection?.tearDown()
+      } else {
+        this.engineConnection?.connect(true)
+      }
+    }
+
     this.dispatchEvent(
       new CustomEvent(EngineCommandManagerEvents.EngineAvailable, {
         detail: this.engineConnection,
@@ -1619,7 +1628,15 @@ export class EngineCommandManager extends EventTarget {
     }
   }
   tearDown() {
-    this.engineConnection?.tearDown()
+    if (this.engineConnection) {
+      this.engineConnection?.tearDown()
+      // Our window.tearDown assignment causes this case to happen which is
+      // only really for tests.
+      // @ts-ignore
+    } else if (this.engineCommandManager?.engineConnection) {
+      // @ts-ignore
+      this.engineCommandManager?.engineConnection?.tearDown()
+    }
   }
   async startNewSession() {
     this.lastArtifactMap = this.artifactMap

src/lib/singletons.ts

@@ -9,6 +9,10 @@ export const codeManager = new CodeManager()
 
 export const engineCommandManager = new EngineCommandManager()
 
+// Accessible for tests mostly
+// @ts-ignore
+window.tearDown = engineCommandManager.tearDown
+
 // This needs to be after codeManager is created.
 export const kclManager = new KclManager(engineCommandManager)
 kclManager.isFirstRender = true