Wait for renderer window by URL in smoke tests

Author: imnasnainaec

e2e-tests/fixtures/app.fixture.ts

@@ -48,82 +48,97 @@ export const test = base.extend<TestAppFixtures, WorkerAppFixtures>({
   ],
 
   mainPage: async ({ electronApp }, use, testInfo: TestInfo) => {
-    const page = await electronApp.firstWindow({ timeout: PROCESS_READY_TIMEOUT });
     const rendererUrl = 'http://localhost:1212/index.html?logLevel=debug';
+    const readyDeadline = Date.now() + PROCESS_READY_TIMEOUT;
 
-    console.log(`Window URL: ${page.url()}`);
     const onPageError = (err: Error) => console.error(`Page error: ${err.message}`);
     const onConsoleMsg = (msg: ConsoleMessage) => {
       if (msg.type() === 'error') console.error(`Console error: ${msg.text()}`);
     };
-    page.on('pageerror', onPageError);
-    page.on('console', onConsoleMsg);
 
-    const readyDeadline = Date.now() + PROCESS_READY_TIMEOUT;
-    let rootAttached = false;
+    const attachListeners = (page: Page) => {
+      page.on('pageerror', onPageError);
+      page.on('console', onConsoleMsg);
+    };
+
+    const detachListeners = (page: Page) => {
+      page.off('pageerror', onPageError);
+      page.off('console', onConsoleMsg);
+    };
 
+    let page: Page | undefined;
     while (Date.now() < readyDeadline) {
-      const currentUrl = page.url();
-
-      // CI can intermittently land on chrome-error://chromewebdata/ if Electron opens before the
-      // renderer navigation has fully settled. Drive the page back to the actual renderer URL and
-      // retry until React mounts or timeout.
-      if (
-        currentUrl.startsWith('chrome-error://') ||
-        currentUrl === 'about:blank' ||
-        !currentUrl.startsWith('http://localhost:1212/')
-      ) {
+      const pages = electronApp.windows();
+      page =
+        pages.find((candidate) => {
+          const candidateUrl = candidate.url();
+          return (
+            candidateUrl.startsWith('http://localhost:1212/') &&
+            !candidateUrl.includes('devtools://')
+          );
+        }) ?? pages.find((candidate) => !candidate.url().includes('devtools://'));
+
+      if (page) {
+        attachListeners(page);
+
         try {
-          await page.goto(rendererUrl, {
-            waitUntil: 'domcontentloaded',
-            timeout: 15_000,
+          const currentUrl = page.url();
+          console.log(`Window URL: ${currentUrl}`);
+
+          // CI can intermittently land on chrome-error://chromewebdata/ if Electron opens before the
+          // renderer navigation has fully settled. Drive the page back to the actual renderer URL and
+          // retry until React mounts or timeout.
+          if (
+            currentUrl.startsWith('chrome-error://') ||
+            currentUrl === 'about:blank' ||
+            !currentUrl.startsWith('http://localhost:1212/')
+          ) {
+            await page.goto(rendererUrl, {
+              waitUntil: 'domcontentloaded',
+              timeout: 15_000,
+            });
+          }
+
+          const remaining = Math.max(0, readyDeadline - Date.now());
+          if (remaining <= 0) break;
+
+          await page.waitForLoadState('domcontentloaded');
+          await page.waitForSelector('#root', {
+            state: 'attached',
+            timeout: Math.min(5_000, remaining),
           });
+
+          console.log(`Window URL: ${page.url()}`);
+          await use(page);
+          detachListeners(page);
+
+          if (testInfo.status !== testInfo.expectedStatus) {
+            const screenshotPath = testInfo.outputPath('failure.png');
+            try {
+              await page.screenshot({ path: screenshotPath, fullPage: true });
+              await testInfo.attach('failure-screenshot', {
+                path: screenshotPath,
+                contentType: 'image/png',
+              });
+              console.log(`Failure screenshot saved to ${screenshotPath}`);
+            } catch {
+              console.warn('Could not capture failure screenshot (window may already be closed)');
+            }
+          }
+          return;
         } catch {
-          // Retry loop handles transient dev-server unavailability.
+          detachListeners(page);
+          page = undefined;
         }
       }
 
-      const remaining = Math.max(0, readyDeadline - Date.now());
-      if (remaining <= 0) break;
-
-      try {
-        await page.waitForLoadState('domcontentloaded');
-        await page.waitForSelector('#root', {
-          state: 'attached',
-          timeout: Math.min(5_000, remaining),
-        });
-        rootAttached = true;
-        break;
-      } catch {
-        // Keep retrying until deadline.
-      }
+      await new Promise<void>((resolve) => {
+        setTimeout(resolve, 500);
+      });
     }
 
-    if (!rootAttached) {
-      throw new Error(
-        `Main renderer did not mount #root within ${PROCESS_READY_TIMEOUT}ms (current URL: ${page.url()})`,
-      );
-    }
-
-    console.log(`Window URL: ${page.url()}`);
-
-    await use(page);
-
-    page.off('pageerror', onPageError);
-    page.off('console', onConsoleMsg);
-
-    if (testInfo.status !== testInfo.expectedStatus) {
-      const screenshotPath = testInfo.outputPath('failure.png');
-      try {
-        await page.screenshot({ path: screenshotPath, fullPage: true });
-        await testInfo.attach('failure-screenshot', {
-          path: screenshotPath,
-          contentType: 'image/png',
-        });
-        console.log(`Failure screenshot saved to ${screenshotPath}`);
-      } catch {
-        console.warn('Could not capture failure screenshot (window may already be closed)');
-      }
-    }
+    throw new Error(
+      `Main renderer did not mount #root within ${PROCESS_READY_TIMEOUT}ms (last URL: ${page?.url() ?? 'no window'})`,
+    );
   },
 });