Update 20 e2e files to use BasePage POM that were using Playwright page object directly

Author: webstackdev

playwright.config.ts

@@ -119,8 +119,7 @@ export default defineConfig({
         },
       }),
 
-  // path to the global setup files.
-  //globalSetup: require.resolve('./global-setup'),
+  globalSetup: './test/e2e/global-setup',
 
   // path to the global teardown files.
   //globalTeardown: require.resolve('./global-teardown'),

src/lib/@types/PromiseRejectionEvent.ts …/scripts/@types/PromiseRejectionEvent.tssrc/lib/@types/PromiseRejectionEvent.ts renamed to src/components/scripts/@types/PromiseRejectionEvent.ts src/lib/@types/PromiseRejectionEvent.ts renamed to src/components/scripts/@types/PromiseRejectionEvent.ts

@@ -1,5 +1,5 @@
 /**
- * The PromiseRejectionEvent constructor is a Web API and not provided by JSDOM
+ * The PromiseRejectionEvent constructor is a Web API and not provided by Happy Dom
  *
  * @see [PromiseRejectionEvent is not defined](https://github.com/jsdom/jsdom/issues/2401)
  */

src/lib/config/environmentalVariableValidation.ts

@@ -7,16 +7,19 @@ import type { AstroUserConfig } from 'astro'
  * import { SERVER_API_URL} from "astro:env/server";
  * <script>import { API_URL } from "astro:env/client";</script>
  *
- * Public client variables end up in both the final client and server bundles, and can
- * be accessed from both client and server through the astro:env/client module. Public
- * server variables end up in the final server bundle. Secret server variables are not
- * part of the final server bundle and are only validated at runtime.
+ * Variables are accessed through import { MY_VAR } from 'astro:env/client'
+ * or import { MY_VAR } from 'astro:env/server', ensuring only the intended
+ * variables are available in each context.
+ *
+ * Public client variables: Available in both client and server bundles.
+ * Public server variables: Only available in the server bundle.
+ * Secret server variables: Only available in the server bundle and not included in the final bundle.
  */
 
 export const environmentalVariablesConfig: AstroUserConfig['env'] = {
   schema: {
     DEV_SERVER_PORT: envField.number({
-      context: 'server',
+      context: 'client',
       access: 'public',
       optional: true,
       default: 4321,
@@ -40,35 +43,35 @@ export const environmentalVariablesConfig: AstroUserConfig['env'] = {
     CRON_SECRET: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     /**
      * Site uses Vercel Upstash integration for rate limiting on API endpoints
      */
     KV_URL: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     KV_REST_API_URL: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     KV_REST_API_TOKEN: envField.string({
       context: 'server',
-      access: 'public',
-      optional: true,
+      access: 'secret',
+      optional: false,
     }),
     KV_REST_API_READ_ONLY_TOKEN: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     REDIS_URL: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     /**
      * Site uses Resend for sending site emails
@@ -84,38 +87,38 @@ export const environmentalVariablesConfig: AstroUserConfig['env'] = {
     SENTRY_AUTH_TOKEN: envField.string({
       context: 'server',
       access: 'public',
-      optional: true, // Only required for uploading source maps during build
+      optional: false, // Only required for uploading source maps during build
     }),
     PUBLIC_SENTRY_DSN: envField.string({
       context: 'client',
       access: 'public',
-      optional: true, // Optional - Sentry only enabled if provided
+      optional: false, // Optional - Sentry only enabled if provided
     }),
     /**
      * Site uses Suprabase for managing GDPR consent records
      */
     PUBLIC_SUPABASE_URL: envField.string({
       context: 'client',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     PUBLIC_SUPABASE_KEY: envField.string({
       context: 'server',
       access: 'public',
-      optional: true,
+      optional: false,
     }),
     SUPABASE_SERVICE_ROLE_KEY: envField.string({
       context: 'server',
       access: 'secret',
-      optional: true,
+      optional: false,
     }),
     /**
      * Site uses ConvertKit for managing newsletter subscriptions
      */
     WEBMENTION_IO_TOKEN: envField.string({
       context: 'server',
       access: 'secret',
-      optional: true, // Optional - WebMentions only fetched if provided
+      optional: false,
     }),
   },
 }

test/e2e/global-setup.ts

@@ -0,0 +1,7 @@
+import type { FullConfig } from '@playwright/test'
+
+async function globalSetup(_config: FullConfig) {
+  process.env['PLAYWRIGHT'] = 'true'
+}
+
+export default globalSetup

test/e2e/helpers/pageObjectModels/BasePage.ts

@@ -55,7 +55,16 @@ export class BasePage {
     }
 
     return response
-  }  /**
+  }
+
+  /**
+   * Reload the current page
+   */
+  async reload(options?: { timeout?: number; waitUntil?: 'load' | 'domcontentloaded' | 'networkidle' }): Promise<null | Response> {
+    return await this._page.reload(options)
+  }
+
+  /**
    * Dismiss cookie consent modal if it's visible
    */
   private async dismissCookieModal(): Promise<void> {
@@ -133,6 +142,13 @@ export class BasePage {
     await this._page.setViewportSize({ width, height })
   }
 
+  /**
+   * Set viewport size using object parameter
+   */
+  async setViewportSize(size: { width: number; height: number }): Promise<void> {
+    await this._page.setViewportSize(size)
+  }
+
   /**
    * ================================================================
    *
@@ -214,6 +230,34 @@ export class BasePage {
     await this._page.keyboard.press(key)
   }
 
+  /**
+   * Type text using keyboard
+   */
+  async type(text: string): Promise<void> {
+    await this._page.keyboard.type(text)
+  }
+
+  /**
+   * Get keyboard object for advanced keyboard operations
+   */
+  get keyboard() {
+    return this._page.keyboard
+  }
+
+  /**
+   * Get mouse object for advanced mouse operations
+   */
+  get mouse() {
+    return this._page.mouse
+  }
+
+  /**
+   * Get touchscreen object for touch operations
+   */
+  get touchscreen() {
+    return this._page.touchscreen
+  }
+
   /**
    * Hover over element
    */
@@ -236,6 +280,36 @@ export class BasePage {
     await this._page.waitForTimeout(timeout)
   }
 
+  /**
+   * Wait for specified timeout in milliseconds
+   * Alias for wait() method
+   * @deprecated Use event-based waits like waitForPageLoad() instead
+   */
+  async waitForTimeout(timeout: number): Promise<void> {
+    await this._page.waitForTimeout(timeout)
+  }
+
+  /**
+   * Wait for a custom function to return truthy value
+   */
+  async waitForFunction<R>(
+    pageFunction: () => R | Promise<R>,
+    arg?: unknown,
+    options?: { timeout?: number }
+  ): Promise<void> {
+    await this._page.waitForFunction(pageFunction, arg, options)
+  }
+
+  /**
+   * Intercept and modify network requests
+   */
+  async route(
+    url: string | RegExp | ((url: URL) => boolean),
+    handler: (route: import('@playwright/test').Route) => void
+  ): Promise<void> {
+    await this._page.route(url, handler)
+  }
+
   /**
    * Wait for Astro page load event
    * Use this instead of waitForTimeout when testing View Transitions
@@ -287,6 +361,24 @@ export class BasePage {
     await this._page.waitForURL(urlPattern, options)
   }
 
+  /**
+   * Wait for a response matching the URL pattern
+   *
+   * @param urlPattern - URL or pattern to match
+   * @param options - Timeout and other options
+   *
+   * @example
+   * ```ts
+   * const response = await page.waitForResponse('/api/newsletter')
+   * ```
+   */
+  async waitForResponse(
+    urlPattern: string | RegExp | ((response: Response) => boolean),
+    options?: { timeout?: number }
+  ): Promise<Response> {
+    return await this._page.waitForResponse(urlPattern, options)
+  }
+
   /**
    * ================================================================
    *
@@ -302,6 +394,38 @@ export class BasePage {
     return this._page.url()
   }
 
+  /**
+   * Get page URL (alias for getCurrentUrl)
+   */
+  url(): string {
+    return this._page.url()
+  }
+
+  /**
+   * Get page title
+   */
+  async title(): Promise<string> {
+    return this._page.title()
+  }
+
+  /**
+   * Get the browser context that the page belongs to
+   */
+  context() {
+    return this._page.context()
+  }
+
+  /**
+   * Emulate media features (e.g., prefers-color-scheme, reduced-motion)
+   */
+  async emulateMedia(options: {
+    colorScheme?: 'light' | 'dark' | 'no-preference'
+    reducedMotion?: 'reduce' | 'no-preference'
+    forcedColors?: 'active' | 'none'
+  }): Promise<void> {
+    await this._page.emulateMedia(options)
+  }
+
   /**
    * Verify page URL matches expected pattern
    */