feat: Add lighthouse timespan

Author: chrstph-dvx

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

@@ -62,6 +62,7 @@
     "start": "next start",
     "test": "vitest --config vitest.config.ts --watch",
     "test:ci": "vitest --config vitest.config.ts --run",
+    "test:perf": "ts-node --project ./tests/perf/tsconfig.json ./tests/perf/switchNetwork.ts",
     "lint": "tsc && eslint 'src/**/*.{js,ts,tsx}'",
     "lint:fix": "tsc && eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
     "prettier:format": "prettier --config-precedence file-override --write \"src/**/*.{tsx,ts,scss,md,json}\"",
@@ -112,11 +113,13 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-zustand-rules": "https://github.com/OffchainLabs/eslint-plugin-zustand-rules",
     "happy-dom": "^17.4.4",
+    "lighthouse": "^12.6.0",
     "patch-package": "^8.0.0",
     "postcss": "^8.5.3",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
+    "puppeteer": "^24.8.2",
     "satori": "^0.12.2",
     "start-server-and-test": "^2.0.11",
     "tailwindcss": "^3.4.16",

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={false}
     >
       <AutoSizer>

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

@@ -146,6 +146,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/perf/switchNetwork.js

@@ -0,0 +1,63 @@
+import puppeteer from 'puppeteer'
+import { writeFileSync } from 'fs'
+import { startFlow, desktopConfig } from 'lighthouse'
+
+// Setup the browser and Lighthouse.
+const browser = await puppeteer.launch({ headless: false })
+const page = await browser.newPage()
+
+const flow = await startFlow(page, {
+  config: desktopConfig
+})
+
+await flow.navigate(
+  'http://localhost:3000/?destinationChain=arbitrum-one&sourceChain=ethereum'
+)
+
+await flow.startTimespan()
+
+// Accept ToS
+await page.click('[aria-label="Agree to Terms and Continue"]')
+
+// Type amount
+const input = await page.waitForSelector('[aria-label="Amount input"]')
+await input?.type('2')
+await page.waitForSelector('[aria-label="Route arbitrum"]')
+
+// Switch network
+await page.click('[aria-label="Switch Networks"]')
+await page.waitForSelector("[aria-label='From Arbitrum One']")
+
+// Open token selection
+await page.click("[aria-label='Select Token']")
+const tokenInput = await page.waitForSelector(
+  "[placeholder='Search by token name, symbol, or address']"
+)
+await tokenInput?.type('USDC')
+await page.click('[aria-label="Select USDC.e"]')
+await page.waitForSelector("xpath///button[contains(., 'USDC.e')]")
+
+// Open chain selection
+await page.click("[aria-label='From Arbitrum One']")
+const chainInput = await page.waitForSelector(
+  '[placeholder="Search a network name"]'
+)
+await chainInput?.type('Xai')
+
+const xaiRow = await page.waitForSelector('[aria-label="Switch to Xai"]')
+await xaiRow?.click()
+await page.waitForSelector("[aria-label='From Xai']")
+
+await flow.endTimespan()
+await flow.snapshot()
+
+// Get the comprehensive flow report.
+writeFileSync('report.html', await flow.generateReport())
+// Save results as JSON.
+writeFileSync(
+  'flow-result.json',
+  JSON.stringify(await flow.createFlowResult(), null, 2)
+)
+
+// Cleanup.
+await browser.close()