@nhonh/qabot 1.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhonh/qabot",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "AI-powered universal QA automation tool. Import any project, AI analyzes and runs tests across all layers.",
   "main": "src/index.js",
   "bin": {
@@ -59,7 +59,6 @@
   "files": [
     "bin/",
     "src/",
-    "templates/",
-    "assets/"
+    "templates/"
   ]
 }

package/src/cli/commands/test.js

@@ -77,7 +77,7 @@ async function runTest(feature, options) {
   try {
     await ensurePlaywright(projectDir);
     await ensureE2EStructure(projectDir);
-    await writePlaywrightConfig(projectDir, config);
+    await writePlaywrightConfig(projectDir, config, baseUrl);
     await writeAuthHelper(projectDir, config);
     spinner.succeed(G(" Playwright ready"));
   } catch (err) {
@@ -277,6 +277,7 @@ function runPlaywrightStreaming(projectDir, specFile, options, baseUrl) {
       `--config=${configPath}`,
       "--project=chromium",
       "--reporter=line",
+      "--timeout=60000",
     );
     if (options.headed) args.push("--headed");
 

package/src/core/constants.js

@@ -1,4 +1,4 @@
-export const VERSION = "1.0.2";
+export const VERSION = "1.1.0";
 export const TOOL_NAME = "qabot";
 
 export const PROJECT_TYPES = [

package/src/e2e/e2e-generator.js

@@ -30,12 +30,20 @@ ${code}
 - Base URL: ${context.baseUrl || "http://localhost:3000"}
 - Auth: ${context.authProvider || "none"}
 
-## Common Playwright fixes
-1. Wrong selector — use getByRole, getByText, getByTestId instead of CSS selectors
-2. Timing — add waitForLoadState("networkidle") or waitForSelector
-3. Element not visible — scroll into view or wait for animation
-4. Navigation — ensure page.goto uses correct path
-5. Auth — ensure login completed before testing
+## CRITICAL: Architecture rules (DO NOT CHANGE)
+1. MUST use \`test.describe.serial\` — all tests share ONE browser session
+2. MUST use \`let page\` at describe scope — shared across all tests
+3. \`test.beforeAll\` creates page + login + navigate ONCE
+4. \`test.afterAll\` closes page ONCE
+5. Each \`test()\` does NOT take \`{ page }\` argument — uses shared \`page\`
+
+## Common fixes
+1. Wrong selector — use getByRole, getByText, getByTestId
+2. Timing — add waitForLoadState("networkidle") or waitForTimeout(2000)
+3. Element not visible — add .first() for multiple matches, or more specific selector
+4. Navigation — use full URL with baseURL prefix
+5. Auth — ensure login completes before assertions
+6. Timeout — increase timeout for slow elements: { timeout: 15000 }
 
 Return the COMPLETE fixed test file. No markdown fences.`;
 

package/src/e2e/e2e-prompts.js

@@ -1,6 +1,6 @@
 export function buildE2EPrompt(featureName, context) {
   const sourceSection = context.sourceCode
-    ? `\n## Source Code Analysis\nUse this to understand the page structure, components, routes, buttons, forms, modals, and data flow:\n\`\`\`\n${context.sourceCode.slice(0, 8000)}\n\`\`\`\n`
+    ? `\n## Source Code Analysis\n\`\`\`\n${context.sourceCode.slice(0, 8000)}\n\`\`\`\n`
     : "";
 
   const routeSection = context.route
@@ -8,60 +8,87 @@ export function buildE2EPrompt(featureName, context) {
     : "";
 
   const useCaseSection = context.useCases?.length
-    ? `\n## QA Use Cases (from QA team)\n${context.useCases.map((uc) => `### ${uc.scenario}\n${uc.steps.map((s, i) => `${i + 1}. ${s}`).join("\n")}`).join("\n\n")}\n`
+    ? `\n## QA Use Cases\n${context.useCases.map((uc) => `### ${uc.scenario}\n${uc.steps.map((s, i) => `${i + 1}. ${s}`).join("\n")}`).join("\n\n")}\n`
     : "";
 
-  return `You are an expert QA automation engineer. Write comprehensive Playwright E2E tests.
+  const baseUrl = context.baseUrl || "http://localhost:3000";
+  const route = context.route || "/" + featureName;
+
+  return `You are an expert Playwright E2E automation engineer.
 
 ## Feature: ${featureName}
-## Base URL: ${context.baseUrl || "http://localhost:3000"}
-## Auth: ${context.authProvider || "none"} (use auth helper if needed)
-${routeSection}${sourceSection}${useCaseSection}
-
-## REQUIREMENTS — Generate AT LEAST 8 test cases covering:
-
-### Must Include (P0 — Critical):
-1. Page Load & Layout — verify page loads, key sections visible, no console errors
-2. Navigation — verify URL is correct, breadcrumbs/tabs work
-3. Primary User Action — the main thing a user does on this page (click button, submit form, etc)
-4. Data Display — verify data renders correctly (lists, cards, tables, amounts)
-
-### Should Include (P1 — Important):
-5. Secondary Actions — other clickable elements, links, toggles
-6. Error States — what happens when something goes wrong (empty data, network error)
-7. Loading States — skeleton/spinner shows while data loads
-8. Responsive/Mobile — if applicable, test viewport changes
-
-### Nice to Have (P2 — Edge Cases):
-9. Edge Cases — empty states, boundary values, special characters
-10. Authentication Guards — verify redirects when not logged in
-
-## PLAYWRIGHT RULES:
-1. Use \`const { test, expect } = require("@playwright/test");\`
-2. ALWAYS start with \`test.describe("${featureName}", () => { ... })\`
-3. Use \`test.beforeEach\` for common setup (login + navigate)
-4. Use accessible selectors IN THIS ORDER of preference:
-   - \`page.getByRole("button", { name: /text/i })\`
-   - \`page.getByText(/text/i)\`
-   - \`page.getByTestId("id")\`
-   - \`page.locator("css-selector")\` (LAST resort)
-5. After every navigation: \`await page.waitForLoadState("networkidle")\`
-6. Take screenshot at EVERY test: \`await page.screenshot({ path: "e2e/screenshots/${featureName}-{testname}.png", fullPage: true })\`
-7. Use \`expect(locator).toBeVisible()\` not \`toBeTruthy()\`
-8. Use \`{ timeout: 15000 }\` for slow-loading elements
-9. Handle auth:
-   \`\`\`
-   const { login } = require("../helpers/auth.js");
-   test.beforeEach(async ({ page, baseURL }) => {
-     await login(page, baseURL);
-     await page.goto("${context.route || "/" + featureName}");
-     await page.waitForLoadState("networkidle");
-   });
-   \`\`\`
-10. Each test MUST have a clear assertion with \`expect()\`
-11. Add \`test.slow()\` for tests that need extra time
-
-## OUTPUT FORMAT:
-Return ONLY JavaScript code. No markdown fences. No explanation.
-Generate a COMPLETE runnable spec file with 8-12 tests.`;
+## Base URL: ${baseUrl}
+## Page Route: ${route}
+## Auth: ${context.authProvider || "none"}
+${sourceSection}${useCaseSection}
+
+## CRITICAL ARCHITECTURE — ONE BROWSER SESSION
+
+All tests run in a SINGLE browser session. The browser opens ONCE, logs in ONCE, then navigates between tests WITHOUT closing.
+
+Use this EXACT structure:
+
+\`\`\`
+const { test, expect } = require("@playwright/test");
+const { login } = require("../helpers/auth.js");
+
+test.describe.serial("${featureName}", () => {
+  let page;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    await login(page, "${baseUrl}");
+    await page.goto("${baseUrl}${route}");
+    await page.waitForLoadState("networkidle");
+    await page.screenshot({ path: "e2e/screenshots/${featureName}-00-initial.png", fullPage: true });
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test("TC-01: page loads and displays main content", async () => {
+    // use the shared 'page' variable — NOT the argument
+    await expect(page).toHaveURL(/${featureName.replace(/-/g, "[-/]")}/i);
+    // verify main content visible
+    await page.screenshot({ path: "e2e/screenshots/${featureName}-01-loaded.png", fullPage: true });
+  });
+
+  test("TC-02: next test case...", async () => {
+    // continue using shared 'page' — same browser, same session
+  });
+});
+\`\`\`
+
+## IMPORTANT RULES:
+1. Use \`test.describe.serial\` — tests run IN ORDER on the SAME page
+2. Use \`let page\` declared at describe level — shared across ALL tests
+3. \`test.beforeAll\` creates page + login + navigate ONCE
+4. \`test.afterAll\` closes page ONCE
+5. Each \`test()\` does NOT take \`{ page }\` argument — uses the shared \`page\` variable
+6. Take screenshot in EVERY test with path: \`e2e/screenshots/${featureName}-{number}-{name}.png\`
+7. Use \`page.getByRole()\`, \`page.getByText()\`, \`page.getByTestId()\` selectors
+8. After navigation within tests: \`await page.waitForLoadState("networkidle")\`
+9. Use \`{ timeout: 15000 }\` for slow-loading elements
+10. Prefix each test name with TC-XX: for tracking
+
+## GENERATE 8-12 TEST CASES:
+
+### P0 Critical (must have):
+- TC-01: Page loads, main content visible, URL correct
+- TC-02: Key data displays correctly (lists, cards, amounts)
+- TC-03: Primary user action (main button/form/interaction)
+- TC-04: Navigation within the feature works
+
+### P1 Important:
+- TC-05: Secondary actions (links, toggles, modals)
+- TC-06: Different UI states (loading, empty, error)
+- TC-07: Form validation if applicable
+- TC-08: Responsive check (viewport resize)
+
+### P2 Edge cases:
+- TC-09: Edge cases relevant to the feature
+- TC-10: Back navigation / breadcrumbs
+
+Return ONLY JavaScript code. No markdown fences. No explanation.`;
 }

package/src/e2e/playwright-setup.js

@@ -43,9 +43,12 @@ export async function ensureE2EStructure(projectDir) {
   }
 }
 
-export async function writePlaywrightConfig(projectDir, config) {
+export async function writePlaywrightConfig(
+  projectDir,
+  config,
+  overrideBaseUrl,
+) {
   const configPath = path.join(projectDir, "e2e", "playwright.config.js");
-  if (await fileExists(configPath)) return configPath;
 
   const envUrls = {};
   if (config.environments) {
@@ -54,6 +57,10 @@ export async function writePlaywrightConfig(projectDir, config) {
     }
   }
 
+  const baseUrlExpr = overrideBaseUrl
+    ? `"${overrideBaseUrl}"`
+    : `ENV_URLS[process.env.E2E_ENV || "default"] || "http://localhost:3000"`;
+
   const content = `const { defineConfig, devices } = require("@playwright/test");
 
 const ENV_URLS = ${JSON.stringify(envUrls, null, 2)};
@@ -61,19 +68,25 @@ const ENV_URLS = ${JSON.stringify(envUrls, null, 2)};
 module.exports = defineConfig({
   testDir: "./tests",
   fullyParallel: false,
-  retries: 1,
+  retries: 0,
   workers: 1,
+  timeout: 60000,
+  expect: { timeout: 10000 },
   reporter: [
-    ["html", { open: "never", outputFolder: "../qabot-reports/playwright" }],
+    ["line"],
     ["json", { outputFile: "../qabot-reports/playwright/results.json" }],
   ],
   use: {
-    baseURL: ENV_URLS[process.env.E2E_ENV || "default"] || "http://localhost:3000",
+    baseURL: ${baseUrlExpr},
     trace: "on-first-retry",
     screenshot: "on",
+    video: "retain-on-failure",
     ignoreHTTPSErrors: true,
-    actionTimeout: 10000,
+    actionTimeout: 15000,
     navigationTimeout: 30000,
+    launchOptions: {
+      slowMo: 100,
+    },
   },
   projects: [
     {
@@ -90,7 +103,6 @@ module.exports = defineConfig({
 
 export async function writeAuthHelper(projectDir, config) {
   const helperPath = path.join(projectDir, "e2e", "helpers", "auth.js");
-  if (await fileExists(helperPath)) return;
 
   const authProvider = config.auth?.provider || "none";
   const content = `const { expect } = require("@playwright/test");
@@ -100,8 +112,8 @@ async function login(page, baseURL) {
   const password = process.env.E2E_TEST_PASSWORD || "";
 
   if (!email || !password) {
-    console.warn("E2E_TEST_EMAIL or E2E_TEST_PASSWORD not set — skipping login");
-    return;
+    console.warn("[QABot] E2E_TEST_EMAIL or E2E_TEST_PASSWORD not set — skipping login");
+    return false;
   }
 
   await page.goto(baseURL || "/");
@@ -127,14 +139,16 @@ async function login(page, baseURL) {
     const submitBtn = page.getByRole("button", { name: /continue|log in|sign in|submit/i });
     await submitBtn.click();
     await page.waitForLoadState("networkidle");
+    await page.waitForTimeout(2000);
   }`
       : `
-  // Generic login — customize for your auth provider
   await page.getByLabel(/email/i).fill(email);
   await page.getByLabel(/password/i).fill(password);
   await page.getByRole("button", { name: /sign in|log in|submit/i }).click();
   await page.waitForLoadState("networkidle");`
   }
+
+  return true;
 }
 
 module.exports = { login };

package/src/reporter/html-builder.js

@@ -15,7 +15,6 @@ export class HtmlBuilder {
     return `<!DOCTYPE html>
 <html lang="en"><head>
 <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='sg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23A78BFA'/%3E%3Cstop offset='100%25' stop-color='%237C3AED'/%3E%3C/linearGradient%3E%3ClinearGradient id='cg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2334D399'/%3E%3Cstop offset='100%25' stop-color='%2310B981'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M16 2L28 7.5C28 7.5 29 18 16 29.5 3 18 4 7.5 4 7.5Z' fill='url(%23sg)'/%3E%3Cpath d='M16 5L25.5 9.5C25.5 9.5 26.2 17.5 16 27 5.8 17.5 6.5 9.5 6.5 9.5Z' fill='%230C0A1A'/%3E%3Cpath d='M11.5 15.5L14.5 18.5 20.5 12.5' stroke='url(%23cg)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E">
 <title>QABot Report \u2014 ${esc(meta.feature || "all")} | ${esc(meta.projectName || "")}</title>
 <style>
 :root{--bg:#0C0A1A;--bg2:#13102A;--card:#1A1635;--card2:#221E3D;--border:#2D2852;--text:#E8E4F0;--dim:#8B85A0;--v:#A78BFA;--v2:#7C3AED;--v3:#C4B5FD;--g:#34D399;--r:#F87171;--y:#FBBF24;--cyan:#22D3EE;--font:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;--mono:'SF Mono',SFMono-Regular,'JetBrains Mono',Menlo,monospace}
@@ -104,7 +103,6 @@ footer{text-align:center;padding:2rem 0 1rem;color:var(--dim);font-size:.8rem;bo
 <div class="wrap">
 
 <div class="hero">
-  <div style="margin-bottom:1rem"><svg width="48" height="48" viewBox="0 0 32 32" fill="none"><defs><linearGradient id="hsg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#A78BFA"/><stop offset="100%" stop-color="#7C3AED"/></linearGradient><linearGradient id="hcg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#34D399"/><stop offset="100%" stop-color="#10B981"/></linearGradient></defs><path d="M16 2L28 7.5C28 7.5 29 18 16 29.5 3 18 4 7.5 4 7.5Z" fill="url(#hsg)"/><path d="M16 5L25.5 9.5C25.5 9.5 26.2 17.5 16 27 5.8 17.5 6.5 9.5 6.5 9.5Z" fill="#0C0A1A"/><path d="M11.5 15.5L14.5 18.5 20.5 12.5" stroke="url(#hcg)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
   <h1>QABot Test Report</h1>
   <div class="meta">
     <span>${esc(meta.projectName || "")}</span> &middot;

package/assets/favicon.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
-  <defs>
-    <linearGradient id="sg" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#A78BFA"/>
-      <stop offset="100%" stop-color="#7C3AED"/>
-    </linearGradient>
-    <linearGradient id="cg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#34D399"/>
-      <stop offset="100%" stop-color="#10B981"/>
-    </linearGradient>
-  </defs>
-  <path d="M16 2 L28 7.5 C28 7.5 29 18 16 29.5 C3 18 4 7.5 4 7.5 Z" fill="url(#sg)"/>
-  <path d="M16 5 L25.5 9.5 C25.5 9.5 26.2 17.5 16 27 C5.8 17.5 6.5 9.5 6.5 9.5 Z" fill="#0C0A1A"/>
-  <path d="M11.5 15.5 L14.5 18.5 L20.5 12.5" stroke="url(#cg)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-</svg>

package/assets/logo.svg

@@ -1,56 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
-  <defs>
-    <linearGradient id="shieldGrad" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#A78BFA"/>
-      <stop offset="100%" stop-color="#7C3AED"/>
-    </linearGradient>
-    <linearGradient id="innerGrad" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0%" stop-color="#1A1635"/>
-      <stop offset="100%" stop-color="#0C0A1A"/>
-    </linearGradient>
-    <linearGradient id="checkGrad" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#34D399"/>
-      <stop offset="100%" stop-color="#10B981"/>
-    </linearGradient>
-    <filter id="glow">
-      <feGaussianBlur stdDeviation="8" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-    <filter id="innerShadow">
-      <feGaussianBlur stdDeviation="4" result="blur"/>
-      <feOffset dx="0" dy="2" result="offset"/>
-      <feComposite in="SourceGraphic" in2="offset" operator="over"/>
-    </filter>
-  </defs>
-
-  <!-- Outer glow -->
-  <path d="M256 28 L462 120 C462 120 474 300 256 484 C38 300 50 120 50 120 Z" fill="#A78BFA" opacity="0.15" filter="url(#glow)"/>
-
-  <!-- Shield body -->
-  <path d="M256 42 L448 128 C448 128 458 290 256 468 C54 290 64 128 64 128 Z" fill="url(#shieldGrad)" stroke="#C4B5FD" stroke-width="3"/>
-
-  <!-- Inner shield -->
-  <path d="M256 72 L420 146 C420 146 428 280 256 438 C84 280 92 146 92 146 Z" fill="url(#innerGrad)" stroke="#2D2852" stroke-width="2"/>
-
-  <!-- Checkmark circle background -->
-  <circle cx="256" cy="245" r="105" fill="#7C3AED" opacity="0.3"/>
-  <circle cx="256" cy="245" r="90" fill="none" stroke="#A78BFA" stroke-width="3" stroke-dasharray="6 4" opacity="0.5"/>
-
-  <!-- Main checkmark -->
-  <path d="M196 245 L236 285 L316 205" fill="none" stroke="url(#checkGrad)" stroke-width="24" stroke-linecap="round" stroke-linejoin="round" filter="url(#innerShadow)"/>
-
-  <!-- Small decorative checkmarks (verified layers) -->
-  <path d="M152 175 L162 185 L182 165" fill="none" stroke="#34D399" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
-  <path d="M340 175 L350 185 L370 165" fill="none" stroke="#34D399" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
-  <path d="M152 315 L162 325 L182 305" fill="none" stroke="#34D399" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
-  <path d="M340 315 L350 325 L370 305" fill="none" stroke="#34D399" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
-
-  <!-- QA text -->
-  <text x="256" y="400" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="52" font-weight="800" fill="#C4B5FD" letter-spacing="8">QA</text>
-
-  <!-- Horizontal scan lines (inspection feel) -->
-  <line x1="130" y1="210" x2="170" y2="210" stroke="#A78BFA" stroke-width="2" opacity="0.3"/>
-  <line x1="342" y1="210" x2="382" y2="210" stroke="#A78BFA" stroke-width="2" opacity="0.3"/>
-  <line x1="130" y1="280" x2="170" y2="280" stroke="#A78BFA" stroke-width="2" opacity="0.3"/>
-  <line x1="342" y1="280" x2="382" y2="280" stroke="#A78BFA" stroke-width="2" opacity="0.3"/>
-</svg>