Add playwright tests for new PRs

.github/workflows/playwright-demo-tests.yml

@@ -0,0 +1,72 @@
+name: Playwright Demo Tests
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/playwright-demo-tests.yml'
+      - 'examples/storybook/**'
+      - 'packages/**'
+      - 'playwright.config.ts'
+      - 'tests/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
+      - 'pnpm-workspace.yaml'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - '.github/workflows/playwright-demo-tests.yml'
+      - 'examples/storybook/**'
+      - 'packages/**'
+      - 'playwright.config.ts'
+      - 'tests/**'
+      - 'package.json'
+      - 'pnpm-lock.yaml'
+      - 'pnpm-workspace.yaml'
+
+permissions:
+  contents: read
+
+jobs:
+  playwright-demo:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.0
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm run build
+
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install chromium --with-deps
+
+      - name: Run Playwright demo tests
+        env:
+          VITE_REOWN_PROJECT_ID: ${{ secrets.VITE_REOWN_PROJECT_ID }}
+        run: pnpm test:demo
+
+      - name: Upload Playwright artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-demo-artifacts
+          path: |
+            playwright-report
+            test-results
+            tests/**/test-results

tests/widgets/ai-credits-widget/states.spec.ts

@@ -246,7 +246,7 @@ test('AiCreditsWidget appkit connect wallet opens modal', async ({ page }) => {
   }
 
   const root = page.getByTestId('AiCreditsWidget-appkit-connect')
-  await expect(root).toBeVisible()
+  await expect(root).toBeVisible({ timeout: 20_000 })
   const connectBtn = root.getByRole('button', { name: 'Connect Wallet' })
   await expect(connectBtn).toBeVisible({ timeout: 20_000 })
   await expect(connectBtn).toBeEnabled({ timeout: 20_000 })

tests/widgets/goodreserve-widget/states.spec.ts

@@ -85,7 +85,7 @@ test('quote-loading state shows the fetching-quote CTA', async ({ page }) => {
 
 test('quote-ready buy renders the quoted G$ output', async ({ page }) => {
   await gotoStory(page, 'widgets-goodreservewidget--quote-ready-buy')
-  await expect(page.getByText('108.2500')).toBeVisible()
+  await expect(page.getByText('108.25', { exact: true })).toBeVisible()
   await expect(page.getByText('Review Swap')).toBeVisible()
   await page.screenshot({ path: `${SCREENSHOT_DIR}/grw-04-quote-ready-buy.png` })
 })
@@ -113,7 +113,7 @@ test('quote-ready light theme resolves a different semantic palette from dark',
   const lightShellBackground = await computedStyle(lightShell, 'background-color')
   const lightAmountCardBackground = await computedStyle(lightAmountCard, 'background-color')
 
-  await expect(page.getByText('108.2500')).toBeVisible()
+  await expect(page.getByText('108.25', { exact: true })).toBeVisible()
   await expect(page.getByText('Review Swap')).toBeVisible()
   await expect(lightHeadingColor).not.toBe(darkHeadingColor)
   await expect(lightShellBackground).not.toBe(darkShellBackground)
@@ -124,16 +124,16 @@ test('quote-ready light theme resolves a different semantic palette from dark',
 
 test('quote-ready sell maps G$ into the from slot', async ({ page }) => {
   await gotoStory(page, 'widgets-goodreservewidget--quote-ready-sell')
-  await expect(page.getByText('8.9231')).toBeVisible()
-  // Sell direction: the "from" balance is the G$ balance (300.00), not the stable balance.
-  await expect(page.getByText('Balance: 300.00')).toBeVisible()
+  await expect(page.getByText('8.9231', { exact: true })).toBeVisible()
+  // Sell direction: the "from" balance is the G$ balance, not the stable balance.
+  await expect(page.getByText('Balance: 300.123457', { exact: true })).toBeVisible()
   await page.screenshot({ path: `${SCREENSHOT_DIR}/grw-05-quote-ready-sell.png` })
 })
 
 test('quote-ready on XDC renders the dynamic network label', async ({ page }) => {
   await gotoStory(page, 'widgets-goodreservewidget--quote-ready-xdc')
   await expect(page.getByText('Swap on XDC').first()).toBeVisible()
-  await expect(page.getByText('216.5000')).toBeVisible()
+  await expect(page.getByText('216.50', { exact: true })).toBeVisible()
   await page.screenshot({ path: `${SCREENSHOT_DIR}/grw-06-quote-ready-xdc.png` })
 })
 
@@ -146,7 +146,7 @@ test('insufficient-balance state warns and disables the CTA', async ({ page }) =
 
 test('slippage selection sheet exposes tolerance options', async ({ page }) => {
   await gotoStory(page, 'widgets-goodreservewidget--slippage-selection')
-  await expect(page.getByText('0.5%').first()).toBeVisible()
+  await expect(page.getByText('0.5%', { exact: true }).first()).toBeVisible()
   await expect(page.getByText('Done')).toBeVisible()
   await page.screenshot({ path: `${SCREENSHOT_DIR}/grw-08-slippage-selection.png` })
 })
@@ -171,9 +171,9 @@ test('swap-success state shows the received amount, not the wallet balance', asy
   await gotoStory(page, 'widgets-goodreservewidget--swap-success')
   await expect(page.getByText('Swap Successful')).toBeVisible()
   await expect(page.getByText('Final amount received')).toBeVisible()
-  // The fixture's lastSwapOutput is 10,230 while the wallet balance is 12,500;
+  // The fixture's lastSwapOutput is 10,230.46 while the wallet balance is 12,500;
   // the success card must show the amount received from the swap.
-  await expect(page.getByText('10,230 G$')).toBeVisible()
+  await expect(page.getByText('10,230.46 G$', { exact: true })).toBeVisible()
   await expect(page.getByText('Do another swap')).toBeVisible()
   await page.screenshot({ path: `${SCREENSHOT_DIR}/grw-11-swap-success.png` })
 })