Tests E2E

.github/workflows/playwright.yml

@@ -0,0 +1,68 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: ['**']
+  workflow_dispatch:
+
+jobs:
+  fuel:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+
+      - name: Install Chromium
+        run: |
+          cd apps/ui/
+          pnpm exec playwright install chromium --with-deps
+
+      - name: Run Playwright tests
+        run: |
+          cd apps/ui/
+          xvfb-run -a pnpm exec playwright test tests/bako-id/fuel-wallet.test.ts
+
+      - name: Upload blob report to GitHub Actions Artifacts
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: blob-report-fuel
+          path: apps/ui/blob-report
+          retention-days: 1
+
+  merge-reports:
+    if: ${{ !cancelled() }}
+    needs: [fuel]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: |
+          cd apps/ui/
+          npm install -g pnpm && pnpm install
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: apps/ui/all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: |
+          cd apps/ui/
+          pnpm exec playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report
+          path: apps/ui/playwright-report
+          retention-days: 14

apps/ui/.gitignore

@@ -26,3 +26,10 @@ dist-ssr
 
 routeTree.gen.ts
 .vercel
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.cache

apps/ui/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@bako-id/contracts": "workspace:*",
@@ -46,9 +47,12 @@
     "zustand": "^5.0.7"
   },
   "devDependencies": {
+    "@fuels/playwright-utils": "^0.57.1",
+    "@playwright/test": "^1.53.1",
     "@tanstack/react-query-devtools": "^5.59.16",
     "@tanstack/router-vite-plugin": "^1.16.5",
     "@types/lodash": "^4.17.0",
+    "@types/node": "^24.0.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@types/react-text-mask": "^5.4.14",

apps/ui/playwright.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  globalSetup: './tests/ultils/global-setup.ts',
+  testDir: './tests',
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 2 : 1,
+  timeout: 150000,
+  expect: {
+    timeout: 8000,
+  },
+  reporter: 'blob',
+  use: {
+    headless: true,
+    screenshot: 'only-on-failure',
+    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
+    baseURL: 'https://preview.bako.id/',
+    permissions: ['clipboard-read', 'clipboard-write'],
+  },
+});

apps/ui/tests/bako-id/bako.test.ts

@@ -0,0 +1,83 @@
+import { test, expect } from '@playwright/test';
+import { AuthTestService } from '../ultils/service/auth-service';
+import { getVaultAddress, transfer } from '../ultils/helpers';
+import { Provider, Wallet } from 'fuels';
+import { NewHandleService } from '../ultils/service/new-handle';
+
+test.describe('Connect with Bako Safe', () => {
+  test.fixme('create new bako user', async ({ context }) => {
+    const bakoIdPage = await context.newPage();
+    const bakoSafePage = await context.newPage();
+    await bakoIdPage.goto('/');
+
+    await test.step('connect in Bako', async () => {
+      await expect(bakoIdPage.getByText('Search new Handle')).toBeVisible();
+      await bakoIdPage.getByRole('button', { name: 'Connect Wallet' }).click();
+      await bakoIdPage.getByLabel('Connect to Bako Safe').click();
+      const popup = await bakoIdPage.waitForEvent('popup');
+      await AuthTestService.loginAuth(popup);
+
+      await expect(
+        bakoIdPage.getByRole('button', { name: 'My Handles' }),
+      ).toBeVisible();
+
+      await bakoSafePage.goto('https://safe.bako.global/home');
+    });
+
+    const newHandle = `automation${Date.now()}`;
+    console.log('new handle: ', newHandle);
+
+    await test.step('create new handle', async () => {
+      await bakoIdPage
+        .getByRole('textbox', { name: 'Search for an available Handle' })
+        .fill(newHandle);
+      await bakoIdPage.waitForTimeout(3000);
+      await bakoIdPage
+        .getByRole('button', {
+          name: 'Continue',
+        })
+        .click();
+
+      await expect(bakoIdPage.getByText(newHandle)).toBeVisible({
+        timeout: 10000,
+      });
+      await expect(bakoIdPage.getByText('Handles0.001 ETH')).toBeVisible();
+
+      const vaultAddress = await getVaultAddress(bakoSafePage);
+
+      const { value } = await NewHandleService.getValueNewHandle(bakoIdPage);
+
+      const provider = new Provider('http://testnet.fuel.network/v1/graphql');
+      const genesisWallet = Wallet.fromPrivateKey(
+        '0x5ac4a3075cfeb0a1238efc082978aa6a7a2efe11e6f2ce2b564d708807fab6ad',
+        provider,
+      );
+      await transfer(genesisWallet, value, vaultAddress);
+
+      await bakoIdPage
+        .getByRole('button', { name: 'Confirm Transaction' })
+        .click();
+      await bakoIdPage
+        .getByLabel('Bako ID Terms Of Use Agreement')
+        .locator('div')
+        .filter({ hasText: '1. The Bako IDThe “Bako ID”' })
+        .nth(2)
+        .evaluate((el) => {
+          el.scrollTop = el.scrollHeight;
+        });
+      const client = await bakoSafePage.context().newCDPSession(bakoSafePage);
+      await client.send('WebAuthn.enable');
+      await client.send('WebAuthn.addVirtualAuthenticator', {
+        options: {
+          protocol: 'ctap2',
+          transport: 'internal',
+          hasResidentKey: true,
+          hasUserVerification: true,
+          isUserVerified: true,
+          automaticPresenceSimulation: true,
+        },
+      });
+      await bakoIdPage.getByRole('button', { name: 'Accept' }).click();
+    });
+  });
+});