Targeted fixes after 24 hours of stress test runs on E2E full suite

Author: webstackdev

src/components/CallToAction/Newsletter/client/index.ts

@@ -168,10 +168,14 @@ export class NewsletterFormElement extends LitElement {
     addScriptBreadcrumb(context)
 
     try {
-    if (!this.submitButton || !this.buttonText || !this.buttonArrow || !this.buttonSpinner) return
+      if (!this.submitButton || !this.buttonText || !this.buttonArrow || !this.buttonSpinner) return
 
-    this.submitButton.disabled = loading
-    this.submitButton.dataset['e2eState'] = loading ? 'loading' : 'idle'
+      const state = loading ? 'loading' : 'idle'
+
+      this.submitButton.disabled = loading
+      this.submitButton.dataset['e2eState'] = state
+      this.submitButton.setAttribute('data-e2e-state', state)
+      this.submitButton.setAttribute('aria-busy', loading ? 'true' : 'false')
 
       if (loading) {
         this.buttonText.textContent = 'Subscribing...'

test/e2e/helpers/pageObjectModels/BasePage.ts

@@ -352,6 +352,77 @@ export class BasePage {
     await this._page.keyboard.type(text)
   }
 
+  /**
+   * Deterministically open the mobile navigation menu and wait for it to finish animating
+   */
+  async openMobileMenu(options?: { timeout?: number }): Promise<void> {
+    const timeout = options?.timeout ?? EXTENDED_NAVIGATION_TIMEOUT
+
+    await this.waitForHeaderComponents({ timeout })
+    await this._page.waitForFunction(
+      () => !document.documentElement?.hasAttribute('data-astro-transition'),
+      undefined,
+      { timeout }
+    )
+
+    const toggleButton = this._page.locator('button[aria-label="toggle menu"]')
+    await expect(toggleButton).toBeVisible({ timeout })
+
+    const expanded = await toggleButton.getAttribute('aria-expanded')
+    if (expanded !== 'true') {
+      await toggleButton.click()
+    }
+
+    await this._page.waitForFunction(
+      () => {
+        const header = document.getElementById('header')
+        const menu = document.querySelector('.main-nav-menu')
+        const body = document.body
+
+        const headerExpanded = header?.classList.contains('aria-expanded-true') ?? false
+        const menuVisible = menu?.classList.contains('menu-visible') ?? false
+        const bodyScrollLocked = body?.classList.contains('no-scroll') ?? false
+
+        return headerExpanded && menuVisible && bodyScrollLocked
+      },
+      undefined,
+      { timeout }
+    )
+  }
+
+  /**
+   * Deterministically close the mobile navigation menu and wait for scroll lock to clear
+   */
+  async closeMobileMenu(options?: { timeout?: number }): Promise<void> {
+    const timeout = options?.timeout ?? DEFAULT_NAVIGATION_TIMEOUT
+    const toggleButton = this._page.locator('button[aria-label="toggle menu"]')
+
+    await expect(toggleButton).toBeVisible({ timeout })
+
+    const expanded = await toggleButton.getAttribute('aria-expanded')
+    if (expanded !== 'true') {
+      return
+    }
+
+    await toggleButton.click()
+
+    await this._page.waitForFunction(
+      () => {
+        const header = document.getElementById('header')
+        const menu = document.querySelector('.main-nav-menu')
+        const body = document.body
+
+        const headerCollapsed = !(header?.classList.contains('aria-expanded-true') ?? false)
+        const menuHidden = !(menu?.classList.contains('menu-visible') ?? false)
+        const bodyScrollRestored = !(body?.classList.contains('no-scroll') ?? false)
+
+        return headerCollapsed && menuHidden && bodyScrollRestored
+      },
+      undefined,
+      { timeout }
+    )
+  }
+
   /**
    * Get keyboard object for advanced keyboard operations
    */

test/e2e/helpers/pageObjectModels/BreadCrumbPage.ts

@@ -55,9 +55,24 @@ export class BreadCrumbPage extends BasePage {
       return
     }
 
-    const waitForLoad = this.waitForPageLoad({ requireNext: true })
+    const supportsViewTransitions = await this.evaluate(() => {
+      if (typeof document === 'undefined') {
+        return false
+      }
+      return typeof document.startViewTransition === 'function'
+    })
+
+    if (supportsViewTransitions) {
+      const waitForLoad = this.waitForPageLoad({ requireNext: true })
+      await this.click(`a[href="${targetHref}"]`)
+      await waitForLoad
+      return
+    }
+
+    const navigationPromise = this.page.waitForNavigation({ waitUntil: 'domcontentloaded', timeout: 15000 })
     await this.click(`a[href="${targetHref}"]`)
-    await waitForLoad
+    await navigationPromise
+    await this.waitForLoadState('networkidle')
   }
 
   async openFirstArticleDetail(options?: { navigationMode?: 'client' | 'fresh' }): Promise<void> {

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

@@ -52,8 +52,7 @@ test.describe('Critical Paths @smoke', () => {
       await page.goto('/')
 
       // Open mobile menu before each navigation
-      await page.click('button[aria-label="toggle menu"]')
-      await playwrightPage.waitForSelector('.menu-visible', { state: 'visible' })
+      await page.openMobileMenu()
 
       // Click navigation link
       const navigationComplete = page.waitForPageLoad({ requireNext: true })

test/e2e/specs/03-forms/newsletter-subscription.spec.ts

@@ -222,14 +222,17 @@ test.describe('Newsletter Subscription Form', () => {
     }, undefined, { timeout: 3000 })
 
     const browserName = newsletterPage.context().browser()?.browserType().name()
-    const delayMs = browserName === 'webkit' ? 400 : 200
+    const delayMs = browserName === 'webkit' ? 400 : browserName === 'firefox' ? 600 : 200
     const delayOverride = await delayFetchForEndpoint(newsletterPage.page, { endpoint: '/api/newsletter', delayMs })
     const submitButton = newsletterPage.locator('#newsletter-submit')
-    const stateTimeout = { timeout: 2000 }
+    const stateTimeoutMs = 4000
+    const stateTimeout = { timeout: stateTimeoutMs }
     const apiResponsePromise = newsletterPage.page.waitForResponse('/api/newsletter')
     const submitPromise = submitButton.click()
+    const fetchStarted = delayOverride.waitForCall(stateTimeoutMs)
 
     try {
+      await fetchStarted
       await expect(submitButton).toHaveAttribute('data-e2e-state', 'loading', stateTimeout)
       await expect(submitButton).toBeDisabled({ timeout: 2000 })
       await submitPromise

test/e2e/specs/04-components/navigation-mobile.spec.ts

@@ -399,8 +399,6 @@ test.describe('Mobile Navigation', () => {
     const page = await BasePage.init(playwrightPage)
     await page.setViewport(375, 667)
 
-    // Install fake timers before going to the page
-    await playwrightPage.clock.install()
     await setupTestPage(playwrightPage, '/')
 
     // Check body doesn't have no-scroll class initially
@@ -409,19 +407,17 @@ test.describe('Mobile Navigation', () => {
     })
     expect(hasNoScrollClassInitial).toBe(false)
 
-    // Open menu
-    await page.click('button[aria-label="toggle menu"]')
-    await playwrightPage.clock.fastForward(100) // Just enough for the class to be added
+    // Open menu via helper to wait for the animation and scroll lock
+    await page.openMobileMenu()
 
     // Body should have no-scroll class when menu is open
     const hasNoScrollClassOpen = await playwrightPage.locator('body').evaluate((el) => {
       return el.classList.contains('no-scroll')
     })
     expect(hasNoScrollClassOpen).toBe(true)
 
-    // Close menu
-    await page.click('button[aria-label="toggle menu"]')
-    await playwrightPage.clock.fastForward(100) // Just enough for the class to be removed
+    // Close menu via helper to wait for scroll lock to clear
+    await page.closeMobileMenu()
 
     // Body should not have no-scroll class when menu is closed
     const hasNoScrollClassClosed = await playwrightPage.locator('body').evaluate((el) => {

test/e2e/specs/07-performance/PERFORMANCE.md

@@ -1,17 +1,6 @@
 <!-- markdownlint-disable-file -->
 # Performance
 
-continue
-Please analyze E2E_STRESS_TESTS.md
-Let's proceed with troubleshooting
-See E2E_STRESS_TESTS.md and the "Instructions" section. We have an error that occurred after __ runs of the entire test e2e test suite.
-Run the tests
-Update E2E_STRESS_TESTS.md with the implementation
-
-Please follow the "Instructions" section in E2E_STRESS_TESTS.md. I've added a new error.
-
-In the "Build and Test" GitHub Action workflow on the "Apply Supabase migrations" step after the last recent push, I get the following error output:
-
 Latest run (Dec 2, 2025):
 
 - Mobile Chrome LCP measured 4.3 s (threshold 2.5 s)