create-backlist 10.0.3 → 10.0.5

package/src/qa/browser/interactions.js

@@ -0,0 +1,320 @@
+// Real browser interactions with HTTP fallback
+import { shortId, sleep }       from '../qa-engine.js';
+import { getBrowserLaunchOptions } from './installer.js';
+
+// ── HTTP-only page tester (fallback) ──────────────────────────────────────
+export class HTTPPageTester {
+  async testPage(url, { onConsoleError, onNetworkEvent } = {}) {
+    const t0 = Date.now();
+    try {
+      const controller = new AbortController();
+      const timer      = setTimeout(() => controller.abort(), 15_000);
+      const res        = await fetch(url, {
+        signal  : controller.signal,
+        headers : { 'User-Agent': 'Backlist-QA/12.0' },
+        redirect: 'follow',
+      });
+      clearTimeout(timer);
+
+      const duration    = Date.now() - t0;
+      const status      = res.status;
+      const contentType = res.headers.get('content-type') || '';
+      const headers     = {};
+      res.headers.forEach((v, k) => { headers[k] = v; });
+
+      let text = '';
+      if (contentType.includes('text/html')) {
+        try { text = await res.text(); } catch {}
+      }
+
+      const pass = status >= 200 && status < 400;
+
+      // Extract forms from HTML
+      const forms = this.#extractForms(text);
+
+      onNetworkEvent?.({ type: 'response', url, status, headers });
+
+      return {
+        pass,
+        failReason      : pass ? null : `HTTP ${status}`,
+        page            : null,   // no real browser page
+        loadTime        : duration,
+        consoleErrors   : [],     // HTTP mode — no JS execution
+        networkErrors   : [],
+        jsErrors        : [],
+        resourcesFailed : [],
+        interactedElements: [],
+        renderTime      : null,
+        domContentLoaded: null,
+        forms,
+        status,
+        headers,
+        message: pass ? `HTTP ${status} in ${duration}ms` : `HTTP ${status}`,
+        mode    : 'http-fallback',
+      };
+    } catch (err) {
+      return {
+        pass: false, failReason: err.message, page: null,
+        loadTime: Date.now() - t0, consoleErrors: [], networkErrors: [],
+        jsErrors: [], resourcesFailed: [], interactedElements: [],
+        forms: [], message: err.message, mode: 'http-fallback',
+      };
+    }
+  }
+
+  async testForm(page, form) {
+    return { pass: true, validationOk: true, submissionOk: true, errors: [], duration: 0, message: 'HTTP mode — form structure detected' };
+  }
+
+  async testAuthFlow(page, url, opts) {
+    // HTTP-mode auth check: verify login page exists + returns 200
+    try {
+      const res = await fetch(url, { redirect: 'follow', signal: AbortSignal.timeout(8000) });
+      return {
+        pass   : res.status === 200,
+        details: [{ url, status: res.status, note: 'Login page reachable (HTTP mode)' }],
+        duration: 0,
+        message: res.status === 200 ? 'Login page accessible' : `Login page returned ${res.status}`,
+      };
+    } catch (err) {
+      return { pass: false, details: [], duration: 0, message: err.message };
+    }
+  }
+
+  #extractForms(html) {
+    if (!html) return [];
+    const forms = [];
+    const re    = /<form([^>]*)>([\s\S]*?)<\/form>/gi;
+    let   m;
+    while ((m = re.exec(html)) !== null) {
+      const attrs  = m[1];
+      const body   = m[2];
+      const action = (attrs.match(/action=["']([^"']+)["']/) || [])[1] || '';
+      const method = (attrs.match(/method=["']([^"']+)["']/) || [])[1] || 'GET';
+      const fields = [];
+      const inpRe  = /<input([^>]*)>/gi;
+      let inp;
+      while ((inp = inpRe.exec(body)) !== null) {
+        const name     = (inp[1].match(/name=["']([^"']+)["']/)  || [])[1];
+        const type     = (inp[1].match(/type=["']([^"']+)["']/)  || [])[1] || 'text';
+        const required = /required/i.test(inp[1]);
+        if (name) fields.push({ name, type, required });
+      }
+      if (fields.length > 0) forms.push({ action, method, fields });
+    }
+    return forms;
+  }
+}
+
+// ── Browser-powered interactor (Playwright) ───────────────────────────────
+export class BrowserInteractor {
+  #playwright;
+  #session;
+  #browser    = null;
+  #context    = null;
+  #launchOpts = null;
+  #httpFallback;
+  #useFallback = false;
+
+  constructor(playwright, session) {
+    this.#playwright   = playwright;
+    this.#session      = session;
+    this.#httpFallback = new HTTPPageTester();
+  }
+
+  async launch() {
+    this.#launchOpts = await getBrowserLaunchOptions();
+
+    if (!this.#launchOpts.available) {
+      this.#useFallback = true;
+      console.log(chalk.yellow('\n  ⚠  Browser unavailable — using HTTP-only mode'));
+      console.log(chalk.gray('  Browser-dependent tests (JS errors, screenshots, interactions)'));
+      console.log(chalk.gray('  will be skipped. All HTTP-based tests will still run.\n'));
+      return;
+    }
+
+    try {
+      const { executablePath, headless, args } = this.#launchOpts;
+      this.#browser = await this.#playwright.chromium.launch({ executablePath, headless, args });
+      this.#context = await this.#browser.newContext({
+        viewport         : { width: 1280, height: 800 },
+        ignoreHTTPSErrors: true,
+      });
+      console.log(chalk.gray(`  ✓ Browser ready (${this.#launchOpts.source})`));
+    } catch (err) {
+      this.#useFallback = true;
+      console.log(chalk.yellow(`  ⚠  Browser launch failed: ${err.message}`));
+      console.log(chalk.gray('  Switching to HTTP-only mode...\n'));
+    }
+  }
+
+  async close() {
+    await this.#context?.close().catch(() => {});
+    await this.#browser?.close().catch(() => {});
+  }
+
+  get isUsingBrowser() { return !this.#useFallback && !!this.#browser; }
+
+  async testPage(url, opts = {}) {
+    if (this.#useFallback || !this.#browser) {
+      return this.#httpFallback.testPage(url, opts);
+    }
+
+    const page             = await this.#context.newPage();
+    const consoleErrors    = [];
+    const networkErrors    = [];
+    const jsErrors         = [];
+    const resourcesFailed  = [];
+    const interactedElements = [];
+
+    page.on('console', msg => {
+      if (msg.type() === 'error' || msg.type() === 'warning') {
+        const entry = { type: msg.type(), text: msg.text(), timestamp: Date.now() };
+        consoleErrors.push(entry);
+        opts.onConsoleError?.(entry);
+      }
+    });
+
+    page.on('pageerror', err => {
+      const entry = { message: err.message, stack: err.stack, timestamp: Date.now() };
+      jsErrors.push(entry);
+      opts.onConsoleError?.({ type: 'pageerror', text: err.message, stack: err.stack });
+    });
+
+    page.on('requestfailed', req => {
+      const entry = { url: req.url(), method: req.method(), failure: req.failure()?.errorText || 'unknown', timestamp: Date.now() };
+      networkErrors.push(entry);
+      resourcesFailed.push({ url: req.url(), type: req.resourceType(), failure: entry.failure });
+      opts.onNetworkEvent?.({ type: 'failed', ...entry });
+    });
+
+    page.on('response', async res => {
+      opts.onNetworkEvent?.({ type: 'response', url: res.url(), status: res.status() });
+    });
+
+    const t0 = Date.now();
+    let pass = true, failReason = null, renderTime = null, domContentLoaded = null;
+
+    try {
+      const response = await page.goto(url, { waitUntil: 'networkidle', timeout: 20_000 });
+      const status   = response?.status() || 0;
+
+      if (status >= 500) { pass = false; failReason = `Server error: HTTP ${status}`; }
+      else if (status >= 400) { pass = false; failReason = `Client error: HTTP ${status}`; }
+
+      const timing = await page.evaluate(() => {
+        const t = window.performance?.timing;
+        if (!t) return null;
+        return { renderTime: t.domComplete - t.navigationStart, domContentLoaded: t.domContentLoadedEventEnd - t.navigationStart };
+      }).catch(() => null);
+
+      renderTime       = timing?.renderTime;
+      domContentLoaded = timing?.domContentLoaded;
+
+      const forms = await page.$$eval('form', els => els.map(f => ({
+        action: f.action, method: f.method || 'GET',
+        fields: Array.from(f.elements).map(el => ({
+          name: el.name, type: el.type, required: el.required,
+          tagName: el.tagName?.toLowerCase(),
+        })).filter(f => f.name),
+      }))).catch(() => []);
+
+      // Real interactions
+      const navLinks = await page.$$('nav a, header a').catch(() => []);
+      for (const link of navLinks.slice(0, 5)) {
+        try {
+          const href = await link.getAttribute('href');
+          if (href && !href.startsWith('mailto:') && !href.startsWith('tel:')) {
+            await link.hover();
+            interactedElements.push({ type: 'hover', tag: 'a', href });
+          }
+        } catch {}
+      }
+
+      return {
+        pass, failReason, page,
+        loadTime          : Date.now() - t0,
+        consoleErrors, networkErrors, jsErrors,
+        resourcesFailed, interactedElements,
+        renderTime, domContentLoaded, forms,
+        message: pass ? `Loaded in ${Date.now() - t0}ms` : failReason,
+        mode   : 'browser',
+      };
+
+    } catch (err) {
+      return {
+        pass: false, failReason: err.message, page,
+        loadTime: Date.now() - t0,
+        consoleErrors, networkErrors, jsErrors,
+        resourcesFailed, interactedElements,
+        forms: [], message: err.message, mode: 'browser',
+      };
+    }
+  }
+
+  async testForm(page, form) {
+    if (this.#useFallback || !page) return this.#httpFallback.testForm(null, form);
+
+    const t0 = Date.now(), errors = [];
+    try {
+      for (const field of form.fields) {
+        try {
+          await page.fill(`[name="${field.name}"]`, this.#testValue(field), { timeout: 3000 });
+        } catch {}
+      }
+      const btn = await page.$('[type="submit"]');
+      if (btn) { await btn.click(); await sleep(1000); }
+
+      const msgs = await page.$$eval(
+        '[class*="error"],[class*="invalid"],[aria-invalid="true"]',
+        els => els.map(e => e.textContent?.trim()).filter(Boolean)
+      ).catch(() => []);
+
+      return { pass: true, validationOk: msgs.length > 0, submissionOk: true, errors, duration: Date.now() - t0, message: 'Form tested' };
+    } catch (err) {
+      errors.push(err.message);
+      return { pass: false, validationOk: false, submissionOk: false, errors, duration: Date.now() - t0, message: err.message };
+    }
+  }
+
+  async testAuthFlow(page, url, opts) {
+    if (this.#useFallback || !page) return this.#httpFallback.testAuthFlow(null, url, opts);
+
+    const t0 = Date.now(), details = [];
+    let pass = true;
+
+    for (const cred of (opts.testCredentials || [])) {
+      try {
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 15_000 });
+        const uf = await page.$('input[type="email"],input[name="email"],input[name="username"]');
+        const pf = await page.$('input[type="password"]');
+        if (!uf || !pf) { details.push({ note: 'Login fields not found' }); continue; }
+        await uf.fill(cred.username);
+        await pf.fill(cred.password);
+        const btn = await page.$('[type="submit"]');
+        if (btn) { await btn.click(); await page.waitForTimeout(2000); }
+
+        const body    = await page.textContent('body').catch(() => '');
+        const curUrl  = page.url();
+        const rejected = /invalid|incorrect|error|wrong|fail/i.test(body) || curUrl.includes('login');
+
+        details.push({ credentials: cred.username.slice(0, 8) + '...', expectFail: cred.expectFail, wasRejected: rejected, currentUrl: curUrl });
+        if (cred.expectFail && !rejected) { pass = false; }
+      } catch (err) {
+        details.push({ error: err.message });
+      }
+    }
+    return { pass, details, duration: Date.now() - t0, message: pass ? 'Auth flow validated' : 'Auth issues detected' };
+  }
+
+  #testValue(field) {
+    const t = (field.type || 'text').toLowerCase();
+    const n = (field.name || '').toLowerCase();
+    if (t === 'email'    || n.includes('email'))    return 'test@backlist-qa.dev';
+    if (t === 'password' || n.includes('pass'))     return 'TestPass123!';
+    if (t === 'tel'      || n.includes('phone'))    return '+1-555-000-0000';
+    if (t === 'number')                             return '42';
+    if (n.includes('name'))                         return 'QA Test User';
+    return 'backlist-qa-test';
+  }
+}

package/src/qa/browser/screenshot.js

@@ -0,0 +1,34 @@
+import fs   from 'fs-extra';
+import path from 'node:path';
+import { timestamp } from '../qa-engine.js';
+
+export class ScreenshotCapture {
+  #dir;
+
+  constructor(dir) { this.#dir = dir; }
+
+  async init() {
+    await fs.ensureDir(this.#dir);
+  }
+
+  async capture(page, label = 'shot') {
+    if (!page) return null;
+    try {
+      const filename = `${label}-${Date.now()}.png`;
+      const filepath = path.join(this.#dir, filename);
+      await page.screenshot({ path: filepath, fullPage: true, timeout: 8000 });
+      return filepath;
+    } catch { return null; }
+  }
+
+  async captureElement(page, selector, label) {
+    try {
+      const el       = await page.$(selector);
+      if (!el) return null;
+      const filename  = `${label}-element-${Date.now()}.png`;
+      const filepath  = path.join(this.#dir, filename);
+      await el.screenshot({ path: filepath });
+      return filepath;
+    } catch { return null; }
+  }
+}