From d0876e032f97f03b2a3784c238f7bf60fc705653 Mon Sep 17 00:00:00 2001
From: "paseo-bot[bot]" <266920839+paseo-bot[bot]@users.noreply.github.com>
Date: Sun, 8 Nov 2026 08:02:13 +0000
Subject: [PATCH] test(app): scope queued image loads to their file pane

---
 packages/app/e2e/browser/file-editing.spec.ts     |  4 ++--
 packages/app/e2e/support/helpers/image-preview.ts | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app/e2e/browser/file-editing.spec.ts b/packages/app/e2e/browser/file-editing.spec.ts
index 2380eb4491..13dc38f2f2 100644
--- a/packages/app/e2e/browser/file-editing.spec.ts
+++ b/packages/app/e2e/browser/file-editing.spec.ts
@@ -766,7 +766,7 @@ test.describe("CodeMirror workspace file editing", () => {
     await openWorkspaceFile(page, "pixel.png");
     const image = visibleFilePane.locator("img");
     await expect(image).toBeVisible();
-    const imageCanvas = page.getByTestId("image-file-preview-canvas");
+    const imageCanvas = visibleFilePane.getByTestId("image-file-preview-canvas");
     await expect(imageCanvas).toBeVisible();
     await imageCanvas.hover();
     const transformedContent = imageCanvas.locator(":scope > div").first();
@@ -791,7 +791,7 @@ test.describe("CodeMirror workspace file editing", () => {
       width: element.naturalWidth,
       height: element.naturalHeight,
     }));
-    const pendingLoad = await holdNextPreviewLoad(page, oldSource.url);
+    const pendingLoad = await holdNextPreviewLoad(visibleFilePane, oldSource.url);
     try {
       await writeFile(
         path.join(workspace.repoPath, "shape.svg"),
diff --git a/packages/app/e2e/support/helpers/image-preview.ts b/packages/app/e2e/support/helpers/image-preview.ts
index 9af5bbdac5..7a07fdb42c 100644
--- a/packages/app/e2e/support/helpers/image-preview.ts
+++ b/packages/app/e2e/support/helpers/image-preview.ts
@@ -1,12 +1,12 @@
-import { expect, type Page } from "@playwright/test";
+import { expect, type Locator } from "@playwright/test";
 
 function isReady(value: { ready(): boolean }): boolean {
   return value.ready();
 }
 
 /** Replay a queued native load payload after a real file refresh, through the image's load event. */
-export async function holdNextPreviewLoad(page: Page, previousUrl: string) {
-  const pending = await page.evaluateHandle((oldUrl: string) => {
+export async function holdNextPreviewLoad(pane: Locator, previousUrl: string) {
+  const pending = await pane.evaluateHandle((container, oldUrl: string) => {
     let image: HTMLImageElement | null = null;
     let holding = true;
     const hold = (event: Event) => {
@@ -14,7 +14,7 @@ export async function holdNextPreviewLoad(page: Page, previousUrl: string) {
     };
     const observer = new MutationObserver(() => {
       if (image) return;
-      const candidates = document.querySelectorAll<HTMLImageElement>(
+      const candidates = container.querySelectorAll<HTMLImageElement>(
         '[data-testid="image-file-preview-image"] img',
       );
       const next = Array.from(candidates).find((candidate) => candidate.src !== oldUrl);
@@ -23,7 +23,7 @@ export async function holdNextPreviewLoad(page: Page, previousUrl: string) {
       image.addEventListener("load", hold, true);
       observer.disconnect();
     });
-    observer.observe(document.body, { subtree: true, childList: true, attributes: true });
+    observer.observe(container, { subtree: true, childList: true, attributes: true });
     return {
       ready: () => image !== null && image.complete && image.naturalWidth > 0,
       deliver(source: { url: string; width: number; height: number }) {