test: add visual regression tests for embedded bridge

.github/workflows/test.yml

@@ -59,6 +59,35 @@ jobs:
       - name: Start UI and Test
         run: yarn start-server-and-test 'start' http://127.0.0.1:3000 'yarn test:ci'
 
+  test-visual-regression:
+    name: "Visual Regression Test"
+    runs-on: ubuntu-latest
+    needs: [build, check-files]
+    if: needs.check-files.outputs.run_tests == 'true' && github.event.pull_request.draft == false
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install node_modules
+        uses: OffchainLabs/actions/node-modules/install@main
+
+      - name: Restore build artifacts
+        uses: ./.github/actions/restore-build-artifacts
+
+      - name: Install Playwright browsers
+        run: yarn workspace arb-token-bridge-ui playwright install --with-deps
+
+      - name: Run visual regression tests
+        run: yarn start-server-and-test "yarn workspace arb-token-bridge-ui start" http://127.0.0.1:3000 "yarn workspace arb-token-bridge-ui test:widget-snapshot"
+
+      - name: Upload Playwright report in case of failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: packages/arb-token-bridge-ui/playwright-report/
+          retention-days: 5
+
   audit:
     name: "Audit"
     runs-on: ubuntu-latest

package.json

@@ -11,6 +11,7 @@
     "start": "yarn workspace arb-token-bridge-ui start",
     "audit:ci": "audit-ci --config ./audit-ci.jsonc",
     "test:ci": "yarn workspace arb-token-bridge-ui test:ci",
+    "test:widget-snapshot": "yarn workspace arb-token-bridge-ui test:widget-snapshot",
     "prettier:check": "./node_modules/.bin/prettier --check .",
     "prettier:format": "./node_modules/.bin/prettier --write .",
     "lint": "yarn workspace arb-token-bridge-ui lint",

packages/arb-token-bridge-ui/.gitignore

@@ -40,3 +40,7 @@ yarn-error.log*
 # Next.js
 .next
 next-env.d.ts
+
+# Test results
+/test-results/
+/playwright-report/

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:widget-snapshot": "yarn playwright test src/components/Widget/__tests__/widget-visual-regression.spec.ts",
     "lint": "tsc && eslint",
     "lint:fix": "tsc && eslint --quiet --fix",
     "prettier:format": "prettier --config-precedence file-override --write \"src/**/*.{tsx,ts,scss,md,json}\"",
@@ -91,6 +92,7 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.26.0",
     "@next/eslint-plugin-next": "^15.3.2",
+    "@playwright/test": "^1.45.3",
     "@synthetixio/synpress": "3.7.3",
     "@testing-library/react": "^16.3.0",
     "@types/lodash-es": "^4.17.12",
@@ -128,6 +130,7 @@
     "typescript": "^5.2.2",
     "typescript-eslint": "^8.32.1",
     "vitest": "^3.1.1",
+    "wait-on": "^7.2.0",
     "yargs": "^18.0.0"
   }
 }

packages/arb-token-bridge-ui/src/components/Widget/WidgetTransferPanel.tsx

@@ -43,7 +43,7 @@ export function WidgetTransferPanel({
     <>
       <DialogWrapper {...dialogProps} />
 
-      <div className="relative m-auto grid w-full grid-cols-1 gap-4 rounded-lg bg-transparent p-4 text-white transition-all duration-300 min-[850px]:grid min-[850px]:grid-cols-2">
+      <div className="widget-content relative m-auto grid w-full grid-cols-1 gap-4 rounded-lg bg-transparent p-4 text-white transition-all duration-300 min-[850px]:grid min-[850px]:grid-cols-2">
         {/* Left/Top panel */}
         <div className="flex h-full flex-col gap-1 overflow-hidden">
           <div className="mb-2 flex h-[30px] flex-row items-center justify-between text-lg">

packages/arb-token-bridge-ui/src/components/Widget/__tests__/widget-visual-regression.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect, chromium, Browser, Page } from '@playwright/test'
+
+test.describe('Widget UI Snapshot Test', () => {
+  let browser: Browser
+  let page: Page
+
+  test.beforeAll(async () => {
+    browser = await chromium.launch()
+    page = await browser.newPage()
+  })
+
+  test.afterAll(async () => {
+    await browser.close()
+  })
+
+  async function takeWidgetScreenshot(
+    width: number,
+    height: number,
+    orientation: string
+  ) {
+    // Set viewport size
+    await page.setViewportSize({ width, height })
+
+    // Navigate to the widget URL
+    await page.goto(
+      'http://localhost:3000/?embedMode=1&sourceChain=sepolia&destinationChain=arbitrum-sepolia'
+    )
+
+    // Wait for widget to load
+    await page.waitForSelector('.widget-content', { timeout: 5_000 })
+
+    // Wait for animations to complete
+    await page.waitForTimeout(5_000)
+
+    // Take snapshot
+    expect(await page.screenshot()).toMatchSnapshot(
+      `widget-${orientation}-orientation-${width}x${height}.png`,
+      { threshold: 0.2 }
+    )
+  }
+
+  test('should match snapshot for widget in horizontal mode (910x430)', async () => {
+    await takeWidgetScreenshot(910, 430, 'horizontal')
+  })
+
+  test('should match snapshot for widget in vertical mode (441x740)', async () => {
+    await takeWidgetScreenshot(441, 740, 'vertical')
+  })
+})