Fix flaky E2E test cases - swap every self-import in that module to relative ./… paths so the only alias use that remains is from the spec files themselves, extend BasePage.waitForPageLoad() with a requireNext option so callers can specifically wait for the next astro:page-load event

Author: webstackdev

_TODO.md

@@ -1,5 +1,10 @@
 # TODO
 
+Next, I'd like to add a "pause" and "play" icon to src/components/Animations/Computers
+There are icons with those names already configured for the Icon component.
+There are hooks for pause and play already setup in the component.
+The icon should be displayed in the low right hand corner of the animation, with 4px of padding from the bottom and right side. It should overlay the animation, not expand the bounding box of the animation.
+
 ## Performance
 
 Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md

test/e2e/helpers/index.ts

@@ -2,31 +2,31 @@ export {
   test,
   describe,
   expect,
-} from '@test/e2e/helpers/baseTest'
+} from './baseTest'
 export {
   setupConsoleErrorChecker,
   logConsoleErrors,
-} from '@test/e2e/helpers/consoleErrors'
+} from './consoleErrors'
 export {
   setupConsoleCapture,
   printCapturedMessages,
-} from '@test/e2e/helpers/consoleCapture'
-export { clearConsentCookies } from '@test/e2e/helpers/browserState'
-export { BasePage } from '@test/e2e/helpers/pageObjectModels/BasePage'
-export { ComponentPersistencePage } from '@test/e2e/helpers/pageObjectModels/ComponentPersistencePage'
-export { HeadPage } from '@test/e2e/helpers/pageObjectModels/HeadPage'
-export { BreadCrumbPage } from '@test/e2e/helpers/pageObjectModels/BreadCrumbPage'
+} from './consoleCapture'
+export { clearConsentCookies } from './browserState'
+export { BasePage } from './pageObjectModels/BasePage'
+export { ComponentPersistencePage } from './pageObjectModels/ComponentPersistencePage'
+export { HeadPage } from './pageObjectModels/HeadPage'
+export { BreadCrumbPage } from './pageObjectModels/BreadCrumbPage'
 export {
   spyOnFetchEndpoint,
   mockFetchEndpointResponse,
   injectHeadersIntoFetch,
   delayFetchForEndpoint,
-} from '@test/e2e/helpers/fetchOverride'
-export type { FetchOverrideHandle } from '@test/e2e/helpers/fetchOverride'
+} from './fetchOverride'
+export type { FetchOverrideHandle } from './fetchOverride'
 export {
   setupCleanTestPage,
   setupTestPage,
   selectTheme,
   getThemePickerToggle,
-} from '@test/e2e/helpers/cookieHelper'
-export { wiremock, mocksEnabled } from '@test/e2e/helpers/mockServices'
+} from './cookieHelper'
+export { wiremock, mocksEnabled } from './mockServices'

test/e2e/helpers/pageObjectModels/BasePage.ts

@@ -435,18 +435,22 @@ export class BasePage {
    * await page.waitForPageLoad()
    * ```
    */
-  async waitForPageLoad(): Promise<void> {
+  async waitForPageLoad(options?: { requireNext?: boolean; timeout?: number }): Promise<void> {
+    const requireNext = options?.requireNext ?? false
+    const timeout = options?.timeout ?? DEFAULT_NAVIGATION_TIMEOUT
     const currentCount = await this._page.evaluate(() => window.__astroPageLoadCounter ?? 0)
 
-    if (currentCount > this.lastAstroPageLoadCount) {
+    if (!requireNext && currentCount > this.lastAstroPageLoadCount) {
       this.lastAstroPageLoadCount = currentCount
       return
     }
 
+    const baseline = requireNext ? currentCount : this.lastAstroPageLoadCount
+
     await this._page.waitForFunction(
       previousCount => (window.__astroPageLoadCounter ?? 0) > previousCount,
-      currentCount,
-      { timeout: DEFAULT_NAVIGATION_TIMEOUT }
+      baseline,
+      { timeout }
     )
 
     this.lastAstroPageLoadCount = await this._page.evaluate(() => window.__astroPageLoadCounter ?? 0)

test/e2e/helpers/pageObjectModels/BreadCrumbPage.ts

@@ -55,7 +55,7 @@ export class BreadCrumbPage extends BasePage {
       return
     }
 
-    const waitForLoad = this.waitForPageLoad()
+    const waitForLoad = this.waitForPageLoad({ requireNext: true })
     await this.click(`a[href="${targetHref}"]`)
     await waitForLoad
   }

test/e2e/specs/01-smoke/critical-paths.spec.ts

@@ -24,7 +24,7 @@ test.describe('Critical Paths @smoke', () => {
     const page = await BasePage.init(playwrightPage)
     for (const { url: path } of page.navigationItems) {
       await page.goto('/')
-      const navigationComplete = page.waitForPageLoad()
+      const navigationComplete = page.waitForPageLoad({ requireNext: true })
       await page.navigateToPage(path)
       await navigationComplete
       await playwrightPage.waitForFunction(() => {
@@ -56,7 +56,7 @@ test.describe('Critical Paths @smoke', () => {
       await playwrightPage.waitForSelector('.menu-visible', { state: 'visible' })
 
       // Click navigation link
-      const navigationComplete = page.waitForPageLoad()
+      const navigationComplete = page.waitForPageLoad({ requireNext: true })
       await page.click(`a[href="${path}"]`)
       await navigationComplete
       await playwrightPage.waitForFunction(() => {