stash

Author: MajorLift

package.json

@@ -762,6 +762,8 @@
     "webpack": "5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2",
+    "web-vitals": "^4.2.4",
+    "web-vitals-attribution": "^0.1.0",
     "ws": "^8.17.1",
     "yaml": "^2.4.1",
     "yargs": "^17.7.2",

test/e2e/benchmarks/types-generated.ts

@@ -32,11 +32,31 @@ export type BenchmarkResults = {
   p95: StatisticalResult;
 };
 
-/** User action result with testTitle, persona and numeric timing metrics. */
+/**
+ * Core Web Vitals metrics from the web-vitals library.
+ * INP requires actual user interactions to measure meaningful data.
+ */
+export type WebVitalsMetrics = {
+  /** Interaction to Next Paint in milliseconds */
+  inp: number | null;
+  /** Largest Contentful Paint in milliseconds */
+  lcp: number | null;
+  /** Cumulative Layout Shift (unitless score) */
+  cls: number | null;
+  /** Rating for INP metric */
+  inpRating: 'good' | 'needs-improvement' | 'poor' | null;
+  /** Rating for LCP metric */
+  lcpRating: 'good' | 'needs-improvement' | 'poor' | null;
+  /** Rating for CLS metric */
+  clsRating: 'good' | 'needs-improvement' | 'poor' | null;
+};
+
+/** User action result with testTitle, persona, timing metrics, and Core Web Vitals. */
 export type UserActionResult = {
   testTitle: string;
   persona?: string;
-  [key: string]: string | number | undefined;
+  webVitals?: WebVitalsMetrics;
+  [key: string]: string | number | WebVitalsMetrics | undefined;
 };
 
 export type BenchmarkArguments = {

test/e2e/benchmarks/user-actions-benchmark.ts

@@ -22,6 +22,48 @@ import {
 import { createInternalTransaction } from '../page-objects/flows/transaction';
 import { Driver } from '../webdriver/driver';
 
+/**
+ * Core Web Vitals metrics from the web-vitals library.
+ * INP (Interaction to Next Paint) requires actual user interactions to measure.
+ */
+type WebVitalsMetrics = {
+  inp: number | null;
+  lcp: number | null;
+  cls: number | null;
+  inpRating: 'good' | 'needs-improvement' | 'poor' | null;
+  lcpRating: 'good' | 'needs-improvement' | 'poor' | null;
+  clsRating: 'good' | 'needs-improvement' | 'poor' | null;
+};
+
+/**
+ * Collect Core Web Vitals from stateHooks.
+ * Must be called after user interactions for INP to have meaningful data.
+ */
+async function collectWebVitals(driver: Driver): Promise<WebVitalsMetrics> {
+  return await driver.executeScript(() => {
+    const stateHooks = (
+      window as Window & {
+        stateHooks?: {
+          getWebVitalsMetrics?: () => WebVitalsMetrics;
+        };
+      }
+    ).stateHooks;
+
+    if (stateHooks?.getWebVitalsMetrics) {
+      return stateHooks.getWebVitalsMetrics();
+    }
+
+    return {
+      inp: null,
+      lcp: null,
+      cls: null,
+      inpRating: null,
+      lcpRating: null,
+      clsRating: null,
+    };
+  });
+}
+
 async function mockTokensEthereum(mockServer: Mockttp) {
   return await mockServer.forPost(/getTokens\/search/u).thenCallback(() => {
     return {
@@ -47,8 +89,17 @@ async function loadNewAccount(): Promise<{
   duration: number;
   testTitle: string;
   persona: string;
+  webVitals: WebVitalsMetrics;
 }> {
   let loadingTimes: number = 0;
+  let webVitals: WebVitalsMetrics = {
+    inp: null,
+    lcp: null,
+    cls: null,
+    inpRating: null,
+    lcpRating: null,
+    clsRating: null,
+  };
   const testTitle = 'benchmark-userActions-loadNewAccount';
 
   await withFixtures(
@@ -73,17 +124,34 @@ async function loadNewAccount(): Promise<{
       const timestampAfterAction = new Date();
       loadingTimes =
         timestampAfterAction.getTime() - timestampBeforeAction.getTime();
+
+      // Collect Core Web Vitals after user interactions
+      webVitals = await collectWebVitals(driver);
     },
   );
-  return { duration: loadingTimes, testTitle, persona: USER_ACTIONS_PERSONA };
+  return {
+    duration: loadingTimes,
+    testTitle,
+    persona: USER_ACTIONS_PERSONA,
+    webVitals,
+  };
 }
 
 async function confirmTx(): Promise<{
   duration: number;
   testTitle: string;
   persona: string;
+  webVitals: WebVitalsMetrics;
 }> {
   let loadingTimes: number = 0;
+  let webVitals: WebVitalsMetrics = {
+    inp: null,
+    lcp: null,
+    cls: null,
+    inpRating: null,
+    lcpRating: null,
+    clsRating: null,
+  };
   const testTitle = 'benchmark-userActions-confirmTx';
 
   await withFixtures(
@@ -119,9 +187,17 @@ async function confirmTx(): Promise<{
       const timestampAfterAction = new Date();
       loadingTimes =
         timestampAfterAction.getTime() - timestampBeforeAction.getTime();
+
+      // Collect Core Web Vitals after user interactions
+      webVitals = await collectWebVitals(driver);
     },
   );
-  return { duration: loadingTimes, testTitle, persona: USER_ACTIONS_PERSONA };
+  return {
+    duration: loadingTimes,
+    testTitle,
+    persona: USER_ACTIONS_PERSONA,
+    webVitals,
+  };
 }
 
 async function bridgeUserActions(): Promise<{
@@ -130,10 +206,19 @@ async function bridgeUserActions(): Promise<{
   searchToken: number;
   testTitle: string;
   persona: string;
+  webVitals: WebVitalsMetrics;
 }> {
   let loadPage: number = 0;
   let loadAssetPicker: number = 0;
   let searchToken: number = 0;
+  let webVitals: WebVitalsMetrics = {
+    inp: null,
+    lcp: null,
+    cls: null,
+    inpRating: null,
+    lcpRating: null,
+    clsRating: null,
+  };
   const testTitle = 'benchmark-userActions-bridgeUserActions';
 
   const fixtureBuilder = new FixtureBuilder()
@@ -184,6 +269,9 @@ async function bridgeUserActions(): Promise<{
       searchToken =
         timestampAferTokenSearch.getTime() -
         timestampBeforeTokenSearch.getTime();
+
+      // Collect Core Web Vitals after user interactions
+      webVitals = await collectWebVitals(driver);
     },
   );
   return {
@@ -192,6 +280,7 @@ async function bridgeUserActions(): Promise<{
     searchToken,
     testTitle,
     persona: USER_ACTIONS_PERSONA,
+    webVitals,
   };
 }
 
@@ -208,7 +297,10 @@ async function main(): Promise<void> {
       }),
   );
 
-  const results: Record<string, Record<string, string | number>> = {};
+  const results: Record<
+    string,
+    Record<string, string | number | WebVitalsMetrics | null>
+  > = {};
 
   results.loadNewAccount = await loadNewAccount();
   results.confirmTx = await confirmTx();

types/global.d.ts

@@ -289,6 +289,29 @@ type StateHooks = {
    * tests.
    */
   reloadExtension?: () => void;
+
+  /**
+   * Initialize Core Web Vitals observers (INP, LCP, CLS).
+   * @see ui/helpers/utils/web-vitals.ts
+   */
+  initWebVitals?: () => void;
+  /**
+   * Get current Core Web Vitals metrics.
+   * Returns stored INP, LCP, and CLS values with their ratings.
+   */
+  getWebVitalsMetrics?: () => {
+    inp: number | null;
+    lcp: number | null;
+    cls: number | null;
+    inpRating: 'good' | 'needs-improvement' | 'poor' | null;
+    lcpRating: 'good' | 'needs-improvement' | 'poor' | null;
+    clsRating: 'good' | 'needs-improvement' | 'poor' | null;
+  };
+  /**
+   * Reset Core Web Vitals metrics to initial null state.
+   * Useful for clearing metrics between benchmark runs.
+   */
+  resetWebVitalsMetrics?: () => void;
 };
 
 export declare global {