feat: Add lighthouse result

.github/workflows/generate-lighthouse-diff.yml

@@ -0,0 +1,86 @@
+name: Run Lighthouse Diff
+
+on:
+  pull_request:
+    branches: ["master"]
+    types:
+      - opened
+      - reopened
+      - synchronize
+      # we skip ci for draft PRs
+      # https://github.com/reviewdog/action-eslint/issues/29#issuecomment-985939887
+      - ready_for_review
+  workflow_dispatch:
+  merge_group:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  generate_lighthouse_diff:
+    name: "Generate lighthouse diff"
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install node_modules
+        uses: OffchainLabs/actions/node-modules/install@main
+
+      - name: Build scripts
+        run: yarn workspace scripts build
+
+      - name: Build the bridge
+        run: yarn build
+        env:
+          NEXT_PUBLIC_INFURA_KEY: ${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_ETHEREUM: https://mainnet.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_SEPOLIA: https://sepolia.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_ARBITRUM_ONE: https://arbitrum-mainnet.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_BASE: https://base-mainnet.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_ARBITRUM_SEPOLIA: https://arbitrum-sepolia.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_INFURA_KEY_BASE_SEPOLIA: https://base-sepolia.infura.io/v3/${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID }}
+          THE_GRAPH_NETWORK_API_KEY: ${{ secrets.THE_GRAPH_NETWORK_API_KEY }}
+
+      - name: Start server and wait
+        run: yarn start & npx wait-on http://localhost:3000
+
+      - name: Install linux dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install --no-install-recommends -y \
+          fluxbox \
+          xvfb
+
+      - name: Run xvfb and fluxbox
+        run: |
+          Xvfb :0 -screen 0 1366x768x24 -listen tcp -ac &
+          fluxbox &
+        env:
+          DISPLAY: :0.0
+
+      - name: Run generateLighthouseDiff script
+        run: yarn workspace scripts generate-lighthouse-diff
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NEXT_PUBLIC_INFURA_KEY: ${{ secrets.NEXT_PUBLIC_INFURA_KEY }}
+          DISPLAY: :0.0
+
+      - name: Upload reports
+        uses: actions/upload-artifact@v4
+        with:
+          name: lighthouse-reports-${{ github.sha }}
+          path: |
+            ./lhreport.html
+          if-no-files-found: 'ignore'
+        continue-on-error: true

packages/arb-token-bridge-ui/package.json

@@ -64,6 +64,7 @@
     "start": "next start",
     "test": "vitest --config vitest.config.ts --watch",
     "test:ci": "vitest --config vitest.config.ts --run",
+    "test:perf": "ts-node  ./tests/perf/switchNetwork.mts",
     "lint": "tsc && eslint",
     "lint:fix": "tsc && eslint --quiet --fix",
     "prettier:format": "prettier --config-precedence file-override --write \"src/**/*.{tsx,ts,scss,md,json}\"",

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx

@@ -341,6 +341,7 @@ export function TokenRow({
       onClick={() => onTokenSelected(token)}
       style={{ ...style, minHeight: '84px' }}
       disabled={!tokenIsBridgeable}
+      aria-label={`Select ${token?.symbol}`}
       className={twMerge(
         'flex w-full flex-row items-center justify-between px-4 py-3 transition duration-200 hover:bg-white/10',
         tokenIsBridgeable

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx

@@ -542,7 +542,6 @@ function TokensPanel({
       errorMessage={errorMessage}
       onSubmit={addNewToken}
       SearchInputButton={AddButton}
-      dataCy="tokenSearchList"
       isDialog={true}
     >
       <AutoSizer>

packages/arb-token-bridge-ui/src/components/common/NetworkSelectionContainer.tsx

@@ -155,6 +155,9 @@ export function NetworkButton({
       )}
       disabled={disabled}
       onClick={onClick}
+      aria-label={
+        (isSource ? 'From: ' : 'To: ') + getNetworkName(selectedChainId)
+      }
     >
       <span className="max-w-[220px] truncate text-sm leading-[1.1] md:max-w-[250px] md:text-xl">
         {isSource ? 'From:' : 'To: '} {getNetworkName(selectedChainId)}

packages/arb-token-bridge-ui/tests/support/commands.ts

@@ -163,20 +163,13 @@ export function typeAmount2(
 export function findSourceChainButton(
   chain: string
 ): Cypress.Chainable<JQuery<HTMLElement>> {
-  return cy
-    .findByRole('button', { name: `From: ${chain}` })
-    .should('be.visible')
+  return cy.get(`[aria-label="From: ${chain}"]`).should('be.visible')
 }
 
 export function findDestinationChainButton(
   chain: string
 ): Cypress.Chainable<JQuery<HTMLElement>> {
-  return (
-    cy
-      //
-      .findByRole('button', { name: `To: ${chain}` })
-      .should('be.visible')
-  )
+  return cy.get(`[aria-label="To: ${chain}"]`).should('be.visible')
 }
 
 export function findGasFeeSummary(

packages/scripts/package.json

@@ -9,7 +9,8 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "start": "node dist/index.js",
-    "add-orbit-chain": "node dist/scripts.cjs.js add-orbit-chain"
+    "add-orbit-chain": "node dist/scripts.cjs.js add-orbit-chain",
+    "generate-lighthouse-diff": "node dist/scripts.cjs.js generate-lighthouse-report"
   },
   "author": "",
   "license": "ISC",
@@ -22,7 +23,9 @@
     "commander": "^12.1.0",
     "ethers": "^5.7.2",
     "file-type": "^19.6.0",
+    "lighthouse": "^12.6.0",
     "mime-types": "^2.1.35",
+    "puppeteer": "^24.9.0",
     "sharp": "0.32.6",
     "zod": "^3.23.8"
   },

packages/scripts/src/generateLighthouseReport/compareLighthouseReports.ts

@@ -0,0 +1,184 @@
+import {
+  NavigationResult,
+  SnapshotResult,
+  TimespanResult,
+} from "./parseLighthouseReports";
+import { parseToFixedNumber } from "./parseToFixedNumber";
+
+export async function compareLighthouseReports({
+  prevReport,
+  results,
+}: {
+  prevReport: [NavigationResult, TimespanResult, SnapshotResult];
+  results: [NavigationResult, TimespanResult, SnapshotResult];
+}): Promise<{
+  navigationDiff: NavigationResult;
+  timespanDiff: TimespanResult;
+  snapshotDiff: SnapshotResult;
+}> {
+  // Compare Navigation Results
+  const prevNavigationResult = prevReport[0];
+  const navigationResult = results[0];
+  const navigationDiff = {
+    fcp: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.fcp.numericValue -
+          navigationResult.fcp.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.fcp.score - navigationResult.fcp.score,
+        2
+      ),
+    },
+    lcp: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.lcp.numericValue -
+          navigationResult.lcp.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.lcp.score - navigationResult.lcp.score,
+        2
+      ),
+    },
+    tbt: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.tbt.numericValue -
+          navigationResult.tbt.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.tbt.score - navigationResult.tbt.score,
+        2
+      ),
+    },
+    cls: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.cls.numericValue -
+          navigationResult.cls.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.cls.score - navigationResult.cls.score,
+        2
+      ),
+    },
+    speed: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.speed.numericValue -
+          navigationResult.speed.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.speed.score - navigationResult.speed.score,
+        2
+      ),
+    },
+    performance: parseToFixedNumber(
+      prevNavigationResult.performance - navigationResult.performance,
+      2
+    ),
+    accessibility: parseToFixedNumber(
+      prevNavigationResult.accessibility - navigationResult.accessibility,
+      2
+    ),
+    best_practices: parseToFixedNumber(
+      prevNavigationResult.best_practices - navigationResult.best_practices,
+      2
+    ),
+    seo: parseToFixedNumber(prevNavigationResult.seo - navigationResult.seo, 2),
+    bundle_size: {
+      numericValue: parseToFixedNumber(
+        prevNavigationResult.bundle_size.numericValue -
+          navigationResult.bundle_size.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevNavigationResult.bundle_size.score -
+          navigationResult.bundle_size.score,
+        2
+      ),
+    },
+  } satisfies NavigationResult;
+
+  // Compare Timespan Results
+  const prevTimespanResult = prevReport[1];
+  const timespanResult = results[1];
+  const timespanDiff = {
+    tbt: {
+      numericValue: parseToFixedNumber(
+        prevTimespanResult.tbt.numericValue - timespanResult.tbt.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevTimespanResult.tbt.score - timespanResult.tbt.score,
+        2
+      ),
+    },
+    cls: {
+      numericValue: parseToFixedNumber(
+        prevTimespanResult.cls.numericValue - timespanResult.cls.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevTimespanResult.cls.score - timespanResult.cls.score,
+        2
+      ),
+    },
+    inp: {
+      numericValue: parseToFixedNumber(
+        prevTimespanResult.inp.numericValue - timespanResult.inp.numericValue,
+        3
+      ),
+      score: parseToFixedNumber(
+        prevTimespanResult.inp.score - timespanResult.inp.score,
+        2
+      ),
+    },
+    best_practices: parseToFixedNumber(
+      prevTimespanResult.best_practices - timespanResult.best_practices,
+      2
+    ),
+    longTasks: {
+      durationMs: parseToFixedNumber(
+        prevTimespanResult.longTasks.durationMs -
+          timespanResult.longTasks.durationMs,
+        3
+      ),
+      total: parseToFixedNumber(
+        prevTimespanResult.longTasks.total - timespanResult.longTasks.total,
+        2
+      ),
+    },
+    performance: parseToFixedNumber(
+      prevTimespanResult.performance - timespanResult.performance,
+      2
+    ),
+  } satisfies TimespanResult;
+
+  // Compare Snapshot Result
+  const prevSnapshotResult = prevReport[2];
+  const snapshotResult = results[2];
+  const snapshotDiff = {
+    performance: parseToFixedNumber(
+      prevSnapshotResult.performance - snapshotResult.performance,
+      2
+    ),
+    accessibility: parseToFixedNumber(
+      prevSnapshotResult.accessibility - snapshotResult.accessibility,
+      2
+    ),
+    best_practices: parseToFixedNumber(
+      prevSnapshotResult.best_practices - snapshotResult.best_practices,
+      2
+    ),
+    seo: parseToFixedNumber(prevSnapshotResult.seo - snapshotResult.seo, 2),
+  } satisfies SnapshotResult;
+
+  return {
+    navigationDiff,
+    timespanDiff,
+    snapshotDiff,
+  };
+}