Merge pull request #595 from dev-five-git/fix-e2e

fix e2e test

Author: owjs3901

.github/workflows/publish.yml

@@ -147,13 +147,6 @@ jobs:
           file_pattern: "e2e/**/*-snapshots/*.png"
       - name: Run E2E Tests
         run: bun run test:e2e
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./apps/landing/out
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-      - uses: actions/deploy-pages@v4
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
       - name: Build Landing (singleCss)
         run: |
           rm -rf apps/landing/out apps/landing/.next apps/landing/df
@@ -167,6 +160,13 @@ jobs:
           name: playwright-report-singlecss
           path: playwright-report/
           retention-days: 30
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./apps/landing/out
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+      - uses: actions/deploy-pages@v4
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
       - name: Upload to codecov.io
         uses: codecov/codecov-action@v5
         with:

e2e/helpers.ts

@@ -1,5 +1,12 @@
 import type { Page } from '@playwright/test'
 
+const CI_SETTLE_DELAY_MS = 250
+const LOCAL_SETTLE_DELAY_MS = 100
+
+function getSettleDelayMs(): number {
+  return process.env.CI ? CI_SETTLE_DELAY_MS : LOCAL_SETTLE_DELAY_MS
+}
+
 /**
  * Wait for all fonts to be loaded and a rendering frame to complete.
  * Replaces waitForTimeout(1000) after page.goto()
@@ -8,14 +15,43 @@ import type { Page } from '@playwright/test'
  * (page.evaluate is not available in JS-disabled contexts).
  */
 export async function waitForFontsReady(page: Page): Promise<void> {
+  await page.waitForLoadState('load')
+
   try {
-    await page.evaluate(async () => {
-      await document.fonts.ready
-      await page.waitForLoadState('load')
-    })
+    await page.evaluate(async (settleDelayMs) => {
+      const wait = (ms: number) =>
+        new Promise<void>((resolve) => window.setTimeout(resolve, ms))
+      const nextFrame = () =>
+        new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
+      if ('fonts' in document) {
+        await document.fonts.ready
+      }
+
+      const pendingImages = Array.from(document.images).filter(
+        (image) => !image.complete,
+      )
+
+      await Promise.all(
+        pendingImages.map(
+          (image) =>
+            new Promise<void>((resolve) => {
+              image.addEventListener('load', () => resolve(), {
+                once: true,
+              })
+              image.addEventListener('error', () => resolve(), {
+                once: true,
+              })
+            }),
+        ),
+      )
+
+      await nextFrame()
+      await nextFrame()
+      await wait(settleDelayMs)
+    }, getSettleDelayMs())
   } catch {
-    // JS disabled — fall back to load event (fires after fonts in CSS are loaded)
-    await page.waitForLoadState('load')
+    await page.waitForTimeout(getSettleDelayMs())
   }
 }
 
@@ -26,5 +62,44 @@ export async function waitForFontsReady(page: Page): Promise<void> {
  * Falls back to waitForLoadState('load') when JavaScript is disabled.
  */
 export async function waitForStyleSettle(page: Page): Promise<void> {
-  await page.waitForTimeout(100)
+  try {
+    await page.waitForFunction(() => {
+      return Array.from(
+        document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]'),
+      ).every((link) => {
+        if (!link.href) {
+          return true
+        }
+
+        const { sheet } = link
+        if (!sheet) {
+          return false
+        }
+
+        try {
+          void sheet.cssRules
+          return true
+        } catch {
+          return false
+        }
+      })
+    })
+  } catch {
+    await page.waitForLoadState('load')
+  }
+
+  try {
+    await page.evaluate(async (settleDelayMs) => {
+      const wait = (ms: number) =>
+        new Promise<void>((resolve) => window.setTimeout(resolve, ms))
+      const nextFrame = () =>
+        new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+
+      await nextFrame()
+      await nextFrame()
+      await wait(settleDelayMs)
+    }, getSettleDelayMs())
+  } catch {
+    await page.waitForTimeout(getSettleDelayMs())
+  }
 }