Tests e2e

ui/.gitignore

@@ -12,18 +12,22 @@
 
 # testing
 /coverage
+/test-results
 
 # next.js
 /.next/
 /out/
 
 # production
 /build
+/.idea/
 
 # misc
 .DS_Store
+*/.DS_Store
 *.pem
 
+
 # debug
 npm-debug.log*
 yarn-debug.log*
@@ -39,3 +43,15 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+node_modules/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+.cache-synpress
+package-lock.json
+yarn.lock
+reports/
+*.log

ui/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test:drift": "bash tests/utils/run-tests.sh"
   },
   "dependencies": {
     "@drift-labs/common": "^1.0.8",
@@ -38,14 +39,18 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
+    "@playwright/test": "^1.48.2",
+    "@synthetixio/synpress": "^4.1.1",
+    "@synthetixio/synpress-phantom": "^0.0.13",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.4.6",
+    "playwright": "^1.48.2",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.3.6",
     "typescript": "^5"
   }
-}
+}

ui/playwright.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+     baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure'
+  },
+
+  expect: { timeout: 10_000 },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

ui/scripts/generate-html-report.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const reportsDir = path.resolve(__dirname, '..', 'reports');
+const combinedFile = path.join(reportsDir, 'combined-report.json');
+const outFile = path.join(reportsDir, 'combined-report.html');
+
+function safeReadJSON(file) {
+  try {
+    const raw = fs.readFileSync(file, 'utf8');
+    return JSON.parse(raw.replace(/^```json\n|\n```$/g, '').trim());
+  } catch (err) {
+    return null;
+  }
+}
+
+function fileExists(rel) {
+  return fs.existsSync(path.join(reportsDir, rel));
+}
+
+function readFileIfExists(rel) {
+  const p = path.join(reportsDir, rel);
+  if (fs.existsSync(p)) return fs.readFileSync(p, 'utf8');
+  return null;
+}
+
+function toHtmlEscaped(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
+function build() {
+  const combined = safeReadJSON(combinedFile);
+  if (!combined) {
+    console.error('Could not read', combinedFile);
+    process.exit(1);
+  }
+
+  const counts = { passed: 0, failed: 0, other: 0 };
+  for (const r of combined.reports) {
+    const st = r.data && r.data.status;
+    if (st === 'passed') counts.passed++;
+    else if (st === 'failed') counts.failed++;
+    else counts.other++;
+  }
+
+  let rows = '';
+  for (const r of combined.reports) {
+    const folder = r.path;
+    const status = r.data && r.data.status ? r.data.status : 'unknown';
+    const failedTests = Array.isArray(r.data && r.data.failedTests) ? r.data.failedTests : [];
+
+    // recursively search for error-context.md and images
+    let errorHtml = '';
+    let screenshotsHtml = '';
+    function walkDir(relDir) {
+      const abs = path.join(reportsDir, relDir);
+      if (!fs.existsSync(abs)) return;
+      const items = fs.readdirSync(abs, { withFileTypes: true });
+      for (const it of items) {
+        const childRel = path.join(relDir, it.name);
+        const childAbs = path.join(reportsDir, childRel);
+        if (it.isDirectory()) {
+          walkDir(childRel);
+        } else if (it.isFile()) {
+          if (it.name.toLowerCase() === 'error-context.md' && !errorHtml) {
+            const c = fs.readFileSync(childAbs, 'utf8');
+            errorHtml = `<details><summary>Error context</summary><pre>${toHtmlEscaped(c)}</pre></details>`;
+          }
+          if (/\.(png|jpe?g|gif|webp)$/i.test(it.name)) {
+            screenshotsHtml += `<a href="${encodeURI(folder + '/' + childRel.slice(folder.length + 1))}"><img src="${encodeURI(folder + '/' + childRel.slice(folder.length + 1))}" style="max-width:200px;max-height:150px;margin:4px;border:1px solid #ccc"></a>`;
+          }
+        }
+      }
+    }
+    walkDir(folder);
+
+    rows += `
+      <tr class="${status}">
+        <td>${toHtmlEscaped(folder)}</td>
+        <td>${toHtmlEscaped(status)}</td>
+        <td>${toHtmlEscaped(failedTests.join(', ') || '-')}</td>
+  <td>${errorHtml || '-'}</td>
+  <td>${screenshotsHtml || '-'}</td>
+      </tr>`;
+  }
+
+  const html = `<!doctype html>
+  <html>
+  <head>
+    <meta charset="utf-8">
+    <title>Combined Test Report</title>
+    <style>
+      body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; padding: 20px }
+      table { border-collapse: collapse; width: 100%; }
+      th, td { border: 1px solid #ddd; padding: 8px; }
+      th { background: #f4f4f4; text-align: left }
+      tr.failed { background: #ffeef0 }
+      tr.passed { background: #ecffed }
+      .summary { margin-bottom: 12px }
+      a { color: #0366d6 }
+    </style>
+  </head>
+  <body>
+    <h1>Combined Test Report</h1>
+    <p class="summary">Generated: ${toHtmlEscaped(combined.generatedAt || new Date().toISOString())} — ${combined.sourceCount} reports — Passed: ${counts.passed} Failed: ${counts.failed} Other: ${counts.other}</p>
+    <table>
+      <thead>
+        <tr><th>Report folder</th><th>Status</th><th>Failed tests</th><th>Error context</th><th>Screenshots</th></tr>
+      </thead>
+      <tbody>
+        ${rows}
+      </tbody>
+    </table>
+    <p>Note: Links are relative to the repository root. Open this file from the <code>ui/reports</code> folder in a browser or via file:/// path for local access to artifacts.</p>
+  </body>
+  </html>`;
+
+  fs.writeFileSync(outFile, html, 'utf8');
+  console.log('Wrote HTML report to', outFile);
+}
+
+if (require.main === module) build();

ui/scripts/merge-reports.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const reportsDir = path.resolve(__dirname, '..', 'reports');
+const outFile = path.join(reportsDir, 'combined-report.json');
+
+function findLastRunFiles(dir) {
+  const results = [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const e of entries) {
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      results.push(...findLastRunFiles(full));
+    } else if (e.isFile() && e.name === '.last-run.json') {
+      results.push(full);
+    }
+  }
+  return results;
+}
+
+function readJsonSafe(file) {
+  try {
+    const raw = fs.readFileSync(file, 'utf8');
+    // strip possible markdown code fences
+    const cleaned = raw.replace(/^```json\n|\n```$/g, '').trim();
+    return JSON.parse(cleaned);
+  } catch (err) {
+    return { __error: String(err) };
+  }
+}
+
+function main() {
+  if (!fs.existsSync(reportsDir)) {
+    console.error('reports dir not found:', reportsDir);
+    process.exit(1);
+  }
+
+  const files = findLastRunFiles(reportsDir);
+  const combined = {
+    generatedAt: new Date().toISOString(),
+    sourceCount: files.length,
+    reports: [],
+  };
+
+  for (const f of files) {
+    const rel = path.relative(reportsDir, path.dirname(f));
+    const data = readJsonSafe(f);
+    combined.reports.push({
+      path: rel,
+      file: path.basename(f),
+      data,
+    });
+  }
+
+  fs.writeFileSync(outFile, JSON.stringify(combined, null, 2), 'utf8');
+  console.log('Wrote combined report to', outFile);
+}
+
+if (require.main === module) main();