Update all e2e tests to use POM static .ini() methods so that we can inject a variable on global window for use in determining whether client script is running in e2e environment

Author: webstackdev

.vscode/settings.json

@@ -46,6 +46,7 @@
     "jsdom",
     "KHTML",
     "koko",
+    "labelledby",
     "LIMS",
     "Linkify",
     "liradb",

src/components/Carousel/client.ts

@@ -189,8 +189,10 @@ class CarouselInstance {
   private nextBtn: HTMLButtonElement | null
   private viewport: HTMLElement | null
   private dotsContainer: HTMLElement | null
+  private container: HTMLElement
 
   constructor(container: HTMLElement, _instanceId: number) {
+    this.container = container
     this.prevBtn = container.querySelector('.embla__button--prev')
     this.nextBtn = container.querySelector('.embla__button--next')
     this.viewport = container.querySelector('.embla__viewport')
@@ -226,6 +228,9 @@ class CarouselInstance {
       // Initialize Embla Carousel with Autoplay plugin
       this.emblaApi = EmblaCarousel(this.viewport, options, [this.autoplayPlugin])
 
+      // Expose API to container element for testing
+      ;(this.container as HTMLElement & { __emblaApi__?: EmblaCarouselType }).__emblaApi__ = this.emblaApi
+
       this.setupNavigationButtons()
       this.setupDotsNavigation()
     } catch (error) {

src/components/Consent/Banner/client.ts

@@ -40,7 +40,7 @@ export class ConsentBannerElement extends LitElement {
   private trapFocusHandler: (((_event: Event) => void) | null) = null
 
   // Track View Transitions
-  private isInitialized = false
+  public isInitialized = false
   private static isModalCurrentlyVisible = false
 
   /**

test/e2e/helpers/pageObjectModels/BasePage.ts

@@ -20,7 +20,7 @@ export class BasePage {
   public errors404: string[] = []
   public navigationItems = navigationItems
 
-  constructor(protected readonly _page: Page) {
+  protected constructor(protected readonly _page: Page) {
     this.page = _page
 
     // IMPORTANT: Register listener early
@@ -29,6 +29,24 @@ export class BasePage {
     })
   }
 
+  static async init(page: Page): Promise<BasePage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new BasePage(page)
+    await instance.onInit()
+    return instance
+  }
+
+  /**
+   * Hook for subclasses to perform custom initialization
+   * Called after construction but before the instance is returned from init()
+   * Override this in subclasses to add custom setup logic
+   */
+  protected async onInit(): Promise<void> {
+    // Base implementation does nothing - subclasses can override
+  }
+
   /**
    * ================================================================
    *
@@ -102,11 +120,18 @@ export class BasePage {
   }  /**
    * Evaluate JS script in the browser
    */
+  async evaluate<R, Arg = unknown>(
+    pageFunction: (arg: Arg) => R | Promise<R>,
+    arg: Arg
+  ): Promise<R>
   async evaluate<R>(
-    pageFunction: () => R | Promise<R>,
-    arg?: unknown
+    pageFunction: () => R | Promise<R>
+  ): Promise<R>
+  async evaluate<R, Arg = unknown>(
+    pageFunction: ((arg: Arg) => R | Promise<R>) | (() => R | Promise<R>),
+    arg?: Arg
   ): Promise<R> {
-    return await this._page.evaluate(pageFunction, arg)
+    return await this._page.evaluate(pageFunction as any, arg)
   }
 
   /**
@@ -704,15 +729,6 @@ export class BasePage {
    * ================================================================
    */
 
-  /**
-   * Throw errors that are normally handled internally
-   */
-  async disableErrorBoundary(): Promise<void> {
-    await this._page.addInitScript(() => {
-      window._throw = false
-    })
-  }
-
   /**
    * Returns up to (currently) 200 last uncaught exceptions from this page
    */

test/e2e/helpers/pageObjectModels/ComponentPersistencePage.ts

@@ -28,8 +28,24 @@ export interface PersistenceVerificationData {
 export class ComponentPersistencePage extends BasePage {
   private consoleMessages: CapturedConsoleMessage[] = []
 
-  constructor(page: Page) {
+  protected constructor(page: Page) {
     super(page)
+  }
+
+  static override async init(page: Page): Promise<ComponentPersistencePage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new ComponentPersistencePage(page)
+    await instance.onInit()
+    return instance
+  }
+
+  /**
+   * Custom initialization - sets up console message capture
+   */
+  protected override async onInit(): Promise<void> {
+    await super.onInit()
     this.setupConsoleCapture()
   }
 

test/e2e/helpers/pageObjectModels/NewsletterPage.ts

@@ -14,10 +14,19 @@ export class NewsletterPage extends BasePage {
   private readonly messageSelector = '#newsletter-message'
   private readonly buttonSpinnerSelector = '#button-spinner'
 
-  constructor(page: Page) {
+  protected constructor(page: Page) {
     super(page)
   }
 
+  static override async init(page: Page): Promise<NewsletterPage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new NewsletterPage(page)
+    await instance.onInit()
+    return instance
+  }
+
   /**
    * Navigate to home page where newsletter form is located
    */

test/e2e/helpers/pageObjectModels/PerformancePage.ts

@@ -7,10 +7,19 @@ import { expect } from '@playwright/test'
 import { BasePage } from '@test/e2e/helpers'
 
 export class PerformancePage extends BasePage {
-  constructor(page: Page) {
+  protected constructor(page: Page) {
     super(page)
   }
 
+  static override async init(page: Page): Promise<PerformancePage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new PerformancePage(page)
+    await instance.onInit()
+    return instance
+  }
+
   /**
    * ================================================================
    * Core Web Vitals Methods

test/e2e/helpers/pageObjectModels/PwaPage.ts

@@ -7,10 +7,19 @@ import { expect } from '@playwright/test'
 import { BasePage } from '@test/e2e/helpers'
 
 export class PwaPage extends BasePage {
-  constructor(page: Page) {
+  protected constructor(page: Page) {
     super(page)
   }
 
+  static override async init(page: Page): Promise<PwaPage> {
+    await page.addInitScript(() => {
+      window.isPlaywrightControlled = true
+    })
+    const instance = new PwaPage(page)
+    await instance.onInit()
+    return instance
+  }
+
   /**
    * ================================================================
    * Navigation Methods

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

@@ -7,7 +7,7 @@ import { BasePage, test, expect } from '@test/e2e/helpers'
 
 test.describe('Critical Paths @smoke', () => {
   test('@ready all main navigation pages are accessible', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     for (const { url: path, title } of page.navigationItems) {
       await page.goto(path)
       await page.expectTitle(title)
@@ -21,7 +21,7 @@ test.describe('Critical Paths @smoke', () => {
     const isMobile = viewport ? viewport.width < 768 : false
     test.skip(isMobile, 'Desktop navigation test - skipping on mobile viewport')
 
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
 
     // Import setupTestPage here to avoid unused import warnings on other tests
     const { setupTestPage } = await import('../../helpers/cookieHelper')
@@ -40,7 +40,7 @@ test.describe('Critical Paths @smoke', () => {
     const isMobile = viewport ? viewport.width < 768 : false
     test.skip(!isMobile, 'Mobile navigation test - skipping on desktop viewport')
 
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     await page.goto('/')
 
     const navItems = page.navigationItems
@@ -62,15 +62,15 @@ test.describe('Critical Paths @smoke', () => {
   })
 
   test('@ready footer is present on all pages', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     for (const { url: path } of page.navigationItems) {
       await page.goto(path)
       await page.expectFooter()
     }
   })
 
   test('@ready contact form loads and is visible', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     await page.goto('/contact')
     await page.expectContactForm()
     await page.expectContactFormNameInput()
@@ -80,7 +80,7 @@ test.describe('Critical Paths @smoke', () => {
   })
 
   test('@ready newsletter form is present on homepage', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // Expected: Newsletter form should be visible on homepage
     // Actual: Unknown - needs testing
 
@@ -91,21 +91,21 @@ test.describe('Critical Paths @smoke', () => {
   })
 
   test('@ready theme picker is accessible', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     await page.goto('/')
     await page.expectThemePickerButton()
   })
 
   test('@ready cookie consent banner appears', async ({ page: playwrightPage, context }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // Clear consent cookies to force banner to appear
     await page.clearConsentCookies(context)
     await page.goto('/', { skipCookieDismiss: true })
     await page.expectCookiesContactForm()
   })
 
   test('@ready main pages have no 404 errors', async ({ page: playwrightPage}) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     for (const { url: path } of page.navigationItems) {
       page.enable404Listener()
       await page.goto(path)
@@ -114,7 +114,7 @@ test.describe('Critical Paths @smoke', () => {
   })
 
   test('@ready main pages have no errors', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     for (const { url: path } of page.navigationItems) {
       await page.goto(path)
       await page.expectNoErrors()

test/e2e/specs/01-smoke/dynamic-pages.spec.ts

@@ -7,7 +7,7 @@ import { BasePage, test, expect, setupConsoleErrorChecker, logConsoleErrors } fr
 
 test.describe('Dynamic Pages @smoke', () => {
   test('@ready article detail page loads', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // First, visit articles list to get an actual article link
     await page.goto('/articles')
     await page.waitForLoadState('networkidle')
@@ -32,7 +32,7 @@ test.describe('Dynamic Pages @smoke', () => {
   })
 
   test('@ready service detail page loads', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // Visit services list to get an actual service link
     await page.goto('/services')
     await page.waitForLoadState('networkidle')
@@ -59,7 +59,7 @@ test.describe('Dynamic Pages @smoke', () => {
   })
 
   test('@ready case study detail page loads', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // Visit case studies list to get an actual case study link
     await page.goto('/case-studies')
     await page.waitForLoadState('networkidle')
@@ -86,7 +86,7 @@ test.describe('Dynamic Pages @smoke', () => {
   })
 
   test('@ready RSS feed is accessible', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // RSS feed should be accessible and valid XML
     const response = await page.goto('/rss.xml')
     expect(response?.status()).toBe(200)
@@ -124,7 +124,7 @@ test.describe('Dynamic Pages @smoke', () => {
   })
 
   test('@ready dynamic pages have no 404 errors', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // Test article page
     await page.goto('/articles')
     await page.waitForLoadState('networkidle')
@@ -169,7 +169,7 @@ test.describe('Dynamic Pages @smoke', () => {
   })
 
   test('@ready dynamic pages have no console errors', async ({ page: playwrightPage }) => {
-    const page = new BasePage(playwrightPage)
+    const page = await BasePage.init(playwrightPage)
     // First, get actual article URL
     await page.goto('/articles')
     await page.waitForLoadState('networkidle')