test: add browser e2e coverage for web ui

Author: Arthur742Ramos

.github/workflows/ci.yml

@@ -59,9 +59,23 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
       - name: Run end-to-end tests
         run: npm run test:e2e
 
+      - name: Upload Playwright artifacts
+        if: failure()
+        uses: actions/upload-artifact@v7
+        with:
+          name: playwright-artifacts
+          path: |
+            playwright-report/
+            test-results/
+          if-no-files-found: ignore
+          retention-days: 7
+
   lint:
     name: Lint
     runs-on: ubuntu-latest

.gitignore

@@ -9,6 +9,11 @@ dist/
 
 # Generated bootcamp output (keep examples)
 bootcamp-*/
+.bootcamp-output/
+
+# Browser E2E artifacts
+playwright-report/
+test-results/
 
 # OS files
 .DS_Store

package-lock.json

@@ -136,7 +136,9 @@
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "typecheck": "tsc -p tsconfig.build.json --noEmit",
     "test": "vitest run",
-    "test:e2e": "vitest run --config vitest.e2e.config.ts",
+    "test:e2e": "npm run test:e2e:cli && npm run test:e2e:web",
+    "test:e2e:cli": "vitest run --config vitest.e2e.config.ts",
+    "test:e2e:web": "playwright test",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "prepublishOnly": "npm run build && npm test"
@@ -160,6 +162,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.58.2",
     "@types/express": "^5.0.6",
     "@types/helmet": "^0.0.48",
     "@types/node": "^25.2.2",

package.json

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./test/playwright",
+  fullyParallel: false,
+  timeout: 120_000,
+  expect: {
+    timeout: 20_000,
+  },
+  outputDir: "test-results/playwright",
+  reporter: process.env.CI
+    ? [
+        ["line"],
+        ["html", { open: "never", outputFolder: "playwright-report" }],
+      ]
+    : [["list"]],
+  retries: process.env.CI ? 1 : 0,
+  use: {
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "off",
+    headless: true,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+  ],
+});

playwright.config.ts

@@ -18,6 +18,17 @@ export function getIndexHtml(): string {
       padding: 2rem;
     }
     .container { max-width: 900px; margin: 0 auto; }
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
     h1 { 
       font-size: 2.5rem; 
       margin-bottom: 0.5rem;
@@ -147,25 +158,33 @@ export function getIndexHtml(): string {
     <h1>Repo Bootcamp</h1>
     <p class="subtitle">Generate onboarding documentation for any GitHub repository</p>
     
-    <div class="input-group">
+    <form class="input-group" id="analyzeForm">
+      <label class="sr-only" for="repoUrl">Repository URL</label>
       <input type="text" id="repoUrl" placeholder="https://github.com/owner/repo" />
-      <button id="analyzeBtn" onclick="analyze()">Analyze</button>
-    </div>
+      <button type="submit" id="analyzeBtn">Analyze</button>
+    </form>
 
-    <div class="progress" id="progress" style="display: none;"></div>
+    <div class="progress" id="progress" style="display: none;" aria-live="polite"></div>
 
-    <div class="results" id="results">
+    <div class="results" id="results" aria-live="polite">
       <div class="stats" id="stats"></div>
       <h2 style="margin-bottom: 1rem;">Generated Files</h2>
       <div class="files" id="files"></div>
     </div>
   </div>
 
-  <div class="modal" id="modal" onclick="if(event.target===this)closeModal()">
+  <div
+    class="modal"
+    id="modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modalTitle"
+    onclick="if(event.target===this)closeModal()"
+  >
     <div class="modal-content">
       <div class="modal-header">
         <h2 id="modalTitle"></h2>
-        <button class="close" onclick="closeModal()">&times;</button>
+        <button class="close" type="button" aria-label="Close file preview" onclick="closeModal()">&times;</button>
       </div>
       <pre id="modalContent"></pre>
     </div>
@@ -338,6 +357,11 @@ export function getIndexHtml(): string {
       btn.textContent = 'Analyze';
     }
 
+    document.getElementById('analyzeForm').addEventListener('submit', (event) => {
+      event.preventDefault();
+      void analyze();
+    });
+
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') closeModal();
     });