fix(playwright): resolve image compare migration test failures

Author: Debajeet-1411

playwright/support/helpers.js

@@ -104,25 +104,52 @@ async function closeEnvDropdown(page) {
 async function openEnv(page, name) {
   await page.locator('.navbar-form .rc-tree-select').first().click();
 
+  // Cypress uses .contains(expectedText).should('exist') — DOM presence only, NOT visibility.
+  // The env group node is in the DOM but hidden inside a collapsed tree node.
+  // We must wait for attachment, then expand, then click the full name.
   const idx = name.indexOf('_');
   const expectedText = idx > 0 ? name.substring(0, idx) : name;
 
   const tree = page.locator('.rc-tree-select-tree');
   await tree
     .locator(`text=${expectedText}`)
     .first()
-    .waitFor({ state: 'visible', timeout: 10000 });
+    .waitFor({ state: 'attached', timeout: 10000 });
 
   await expandAllEnvGroups(page);
 
   await tree.locator(`text=${name}`).first().click({ force: true });
   await closeEnvDropdown(page);
 }
 
+/**
+ * Collects exactly `count` download events triggered by `triggerFn`.
+ * Works correctly even when downloads are staggered (e.g. ImageComparePane
+ * staggers each link.click() by 300 ms via setTimeout).
+ * Using Promise.all([waitForEvent, waitForEvent, click]) fails for staggered
+ * downloads because both promises resolve on the same first event.
+ */
+async function collectDownloads(page, count, triggerFn) {
+  const downloads = [];
+  const done = new Promise((resolve) => {
+    page.on('download', function handler(dl) {
+      downloads.push(dl);
+      if (downloads.length === count) {
+        page.off('download', handler);
+        resolve();
+      }
+    });
+  });
+  await triggerFn();
+  await done;
+  return downloads;
+}
+
 module.exports = {
   runDemo,
   closeEnvs,
   expandAllEnvGroups,
   closeEnvDropdown,
   openEnv,
+  collectDownloads,
 };

playwright/tests/image.spec.js

@@ -8,7 +8,7 @@
  */
 
 const { test, expect } = require('@playwright/test');
-const { runDemo, openEnv, closeEnvs } = require('../support/helpers');
+const { runDemo, openEnv, closeEnvs, collectDownloads } = require('../support/helpers');
 
 const WIN_SEL = '.layout .react-grid-item';
 const CONTAINER_SEL = `${WIN_SEL} .content > div`;
@@ -388,18 +388,21 @@ test.describe('Image Pane', () => {
 
     await expect(comparePane.locator('img.content-image')).toHaveCount(2);
 
-    // Both downloads fire simultaneously when save is clicked in compare mode
-    const [dl1, dl2] = await Promise.all([
-      page.waitForEvent('download'),
-      page.waitForEvent('download'),
-      comparePane.locator("button[title='save']").click(),
-    ]);
+    // ImageComparePane.handleDownload staggers each link.click() by 300ms
+    // (index * 300 ms setTimeout). Promise.all([waitForEvent, waitForEvent])
+    // catches both promises on the same first event. Use collectDownloads instead.
+    const downloads = await collectDownloads(
+      page,
+      2,
+      () => comparePane.locator("button[title='save']").click()
+    );
 
-    const filenames = [dl1.suggestedFilename(), dl2.suggestedFilename()].sort();
+    const filenames = downloads.map((d) => d.suggestedFilename()).sort();
     expect(filenames).toContain('Random!_1.jpg');
     expect(filenames).toContain('Random!_2.jpg');
-    expect(await dl1.path()).toBeTruthy();
-    expect(await dl2.path()).toBeTruthy();
+    for (const dl of downloads) {
+      expect(await dl.path()).toBeTruthy();
+    }
   });
 
   test('image_compare_basic: captions are visible and do not overlap images', async ({
@@ -477,16 +480,17 @@ test.describe('Image Pane', () => {
 
     await expect(comparePane.locator('img.content-image')).toHaveCount(2);
 
-    const [dl1, dl2] = await Promise.all([
-      page.waitForEvent('download'),
-      page.waitForEvent('download'),
-      comparePane.locator("button[title='save']").click(),
-    ]);
+    const downloads = await collectDownloads(
+      page,
+      2,
+      () => comparePane.locator("button[title='save']").click()
+    );
 
-    const filenames = [dl1.suggestedFilename(), dl2.suggestedFilename()].sort();
+    const filenames = downloads.map((d) => d.suggestedFilename()).sort();
     expect(filenames).toContain('CompareTest_1.jpg');
     expect(filenames).toContain('CompareTest_2.jpg');
-    expect(await dl1.path()).toBeTruthy();
-    expect(await dl2.path()).toBeTruthy();
+    for (const dl of downloads) {
+      expect(await dl.path()).toBeTruthy();
+    }
   });
 });