VIA-474 AS/MD Increase browsers in E2E and Snapshot tests

- Only checking LCP for Chromium

Author: anoop-surej-nhs

e2e/general/app.spec.ts

@@ -1,5 +1,5 @@
-import { expect, test } from "@playwright/test";
-import { accessibilityCheck, benchmark, clickLinkAndExpectPageTitle } from "@project/e2e/helpers";
+import { TestInfo, expect, test } from "@playwright/test";
+import { accessibilityCheck, benchmarkIfChromium, clickLinkAndExpectPageTitle } from "@project/e2e/helpers";
 
 import {
   COOKIE_POLICY_PAGE_TITLE,
@@ -21,32 +21,32 @@ test.describe.configure({ mode: "parallel", retries: 3 });
 test.describe("Application", () => {
   test.use({ storageState: `./e2e/.auth/default.json` });
 
-  test("Hub page", async ({ page }) => {
+  test("Hub page", async ({ page }, testInfo: TestInfo) => {
     await page.goto(HUB_PAGE_URL);
     await expect(page).toHaveTitle(HUB_PAGE_TITLE);
     await accessibilityCheck(page);
-    expect.soft(await benchmark(page, HUB_PAGE_URL)).toBeLessThanOrEqual(MAX_AVG_LCP_DURATION_MS);
+    await benchmarkIfChromium(page, HUB_PAGE_URL, MAX_AVG_LCP_DURATION_MS, testInfo);
   });
 
-  test("RSV page", async ({ page }) => {
+  test("RSV page", async ({ page }, testInfo: TestInfo) => {
     await page.goto(RSV_PAGE_URL);
     await expect(page).toHaveTitle(RSV_PAGE_TITLE);
     await accessibilityCheck(page);
-    expect.soft(await benchmark(page, RSV_PAGE_URL)).toBeLessThanOrEqual(MAX_AVG_LCP_DURATION_MS);
+    await benchmarkIfChromium(page, RSV_PAGE_URL, MAX_AVG_LCP_DURATION_MS, testInfo);
   });
 
-  test("RSV in pregnancy page", async ({ page }) => {
+  test("RSV in pregnancy page", async ({ page }, testInfo: TestInfo) => {
     await page.goto(RSV_PREGNANCY_PAGE_URL);
     await expect(page).toHaveTitle(RSV_PREGNANCY_PAGE_TITLE);
     await accessibilityCheck(page);
-    expect.soft(await benchmark(page, RSV_PREGNANCY_PAGE_URL)).toBeLessThanOrEqual(MAX_AVG_LCP_DURATION_MS);
+    await benchmarkIfChromium(page, RSV_PREGNANCY_PAGE_URL, MAX_AVG_LCP_DURATION_MS, testInfo);
   });
 
-  test("Cookie policy page", async ({ page }) => {
+  test("Cookie policy page", async ({ page }, testInfo: TestInfo) => {
     await page.goto(COOKIE_POLICY_PAGE_URL);
     await expect(page).toHaveTitle(COOKIE_POLICY_PAGE_TITLE);
     await accessibilityCheck(page);
-    expect.soft(await benchmark(page, COOKIE_POLICY_PAGE_URL)).toBeLessThanOrEqual(MAX_AVG_LCP_DURATION_MS);
+    await benchmarkIfChromium(page, COOKIE_POLICY_PAGE_URL, MAX_AVG_LCP_DURATION_MS, testInfo);
   });
 
   test("Back link navigation", async ({ page }) => {

e2e/general/eligibility.spec.ts

@@ -1,20 +1,20 @@
-import { Locator, expect, test } from "@playwright/test";
+import { Locator, TestInfo, expect, test } from "@playwright/test";
 import { MAX_AVG_LCP_DURATION_MS, RSV_PAGE_URL } from "@project/e2e/constants";
 import { UserCopy, elidCopyThatDiffersByEnvironment } from "@project/e2e/elid-copy-helper";
-import { accessibilityCheck, benchmark, getEnv } from "@project/e2e/helpers";
+import { accessibilityCheck, benchmarkIfChromium, getEnv } from "@project/e2e/helpers";
 
 const environment = getEnv("DEPLOY_ENVIRONMENT");
 const elidCopyForEnvironment: UserCopy =
   environment === "preprod"
     ? elidCopyThatDiffersByEnvironment["integration"]
     : elidCopyThatDiffersByEnvironment["sandpit"];
 
-test.describe.configure({ mode: "parallel", retries: 0 });
+test.describe.configure({ mode: "parallel", retries: 3 });
 
 test.describe("Eligibility", () => {
-  test.afterEach(async ({ page }) => {
+  test.afterEach(async ({ page }, testInfo: TestInfo) => {
     await accessibilityCheck(page);
-    expect.soft(await benchmark(page, RSV_PAGE_URL)).toBeLessThanOrEqual(MAX_AVG_LCP_DURATION_MS);
+    await benchmarkIfChromium(page, RSV_PAGE_URL, MAX_AVG_LCP_DURATION_MS, testInfo);
   });
 
   test.describe("Not Eligible", () => {

e2e/helpers.ts

@@ -1,7 +1,13 @@
 import AxeBuilder from "@axe-core/playwright";
-import { Page, expect } from "@playwright/test";
+import { Page, TestInfo, expect } from "@playwright/test";
 import { snapshotPathTemplate } from "@project/playwright.config";
 
+declare global {
+  interface Window {
+    __lcp: number;
+  }
+}
+
 export const getEnv = (name: string) => {
   const value = process.env[name];
   if (value === undefined || value === null) {
@@ -15,25 +21,50 @@ export const clickLinkAndExpectPageTitle = async (page: Page, linkText: string,
   await expect(page).toHaveTitle(expectedPageTitle);
 };
 
-const lcpDuration = async (): Promise<number> => {
-  return new Promise((resolve) => {
+export const benchmark = async (page: Page, target: string) => {
+  const isLcpSupported = await page.evaluate(() => {
+    return (
+      typeof PerformanceObserver === "function" &&
+      PerformanceObserver.supportedEntryTypes?.includes("largest-contentful-paint")
+    );
+  });
+
+  if (!isLcpSupported) {
+    console.warn("⚠️ LCP is not supported in this browser — skipping LCP measurement.");
+    return 0;
+  }
+
+  // Inject LCP observer once — before page load
+  await page.addInitScript(() => {
+    window.__lcp = -1;
+
     new PerformanceObserver((entryList) => {
       const entries = entryList.getEntries();
-      const lcpDuration = entries[entries.length - 1].startTime;
-      console.log("LCP: " + lcpDuration);
-      resolve(lcpDuration);
+      const lastEntry = entries[entries.length - 1];
+      if (lastEntry) {
+        window.__lcp = lastEntry.startTime;
+      }
     }).observe({ type: "largest-contentful-paint", buffered: true });
   });
-};
 
-export const benchmark = async (page: Page, target: string) => {
   const pageLoadTimes: number[] = [];
-  for (let i = 0; i < 5; i++) {
+
+  for (let i = 0; i < 3; i++) {
     await page.goto(target, { waitUntil: "load" });
-    pageLoadTimes.push(await page.evaluate(lcpDuration));
+
+    // Let LCP settle
+    await page.waitForTimeout(1000);
+
+    const lcp = await page.evaluate(() => window.__lcp);
+    if (typeof lcp !== "number" || lcp < 0) {
+      throw new Error(`⚠️ LCP not collected for iteration ${i}`);
+    }
+
+    pageLoadTimes.push(lcp);
   }
-  const sumPageLoadTimes = pageLoadTimes.reduce((sum, cur) => sum + cur, 0);
-  return sumPageLoadTimes / pageLoadTimes.length;
+
+  const averageLCP = pageLoadTimes.reduce((sum, cur) => sum + cur, 0) / pageLoadTimes.length;
+  return averageLCP;
 };
 
 export const accessibilityCheck = async (page: Page) => {
@@ -65,3 +96,9 @@ export const openExpanders = async (page: Page) => {
 
   await page.mouse.click(0, 0);
 };
+
+export const benchmarkIfChromium = async (page: Page, url: string, maxDuration: number, testInfo: TestInfo) => {
+  if (testInfo.project.name === "chromium") {
+    expect.soft(await benchmark(page, url)).toBeLessThanOrEqual(maxDuration);
+  }
+};

playwright.config.ts

@@ -63,13 +63,57 @@ export default defineConfig({
       testMatch: /.*\.setup\.ts/,
     },
     {
-      name: "chromium",
+      name: "Chromium",
       use: {
         ...devices["Desktop Chrome"],
         viewport: { width: 1920, height: 1080 },
       },
       dependencies: ['setup']
     },
+    {
+      name: "Edge",
+      use: {
+        ...devices["Desktop Edge"],
+        viewport: { width: 1920, height: 1080 },
+      },
+      dependencies: ['setup']
+    },
+    {
+      name: "Firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+        viewport: { width: 1920, height: 1080 },
+      },
+      dependencies: ['setup']
+    },
+    {
+      name: "Safari",
+      use: {
+        ...devices["Desktop Safari"],
+        viewport: { width: 1920, height: 1080 },
+      },
+      dependencies: ['setup']
+    },
+    {
+      name: 'ChromeAndroid',
+      use: { ...devices['Pixel 5'] },
+      dependencies: ['setup']
+    },
+    {
+      name: 'SamsungInternetAndroid',
+      use: { ...devices['Pixel 5'] },
+      dependencies: ['setup']
+    },
+    {
+      name: 'SafariIos',
+      use: { ...devices['iPhone 12'] },
+      dependencies: ['setup']
+    },
+    {
+      name: 'ChromeIos',
+      use: { ...devices['iPhone 12'] },
+      dependencies: ['setup']
+    },
 
     /* Test against mobile viewports. */
     // {