create-backlist 10.0.2 → 10.0.4

package/src/qa/browser/crawler.js

@@ -0,0 +1,223 @@
+// Real smart crawler — discovers all routes via Playwright
+import { URL } from 'node:url';
+import { shortId } from '../qa-engine.js';
+
+export class SmartCrawler {
+  #playwright;
+  #visited = new Set();
+  #queue   = [];
+  #routes  = [];
+
+  constructor(playwright) {
+    this.#playwright = playwright;
+  }
+
+  async crawl(baseUrl, { maxPages = 60, maxDepth = 4, onRoute } = {}) {
+    this.#visited.clear();
+    this.#queue = [{ url: baseUrl, depth: 0 }];
+    this.#routes = [];
+
+    const browser = await this.#playwright.chromium.launch({ headless: true });
+    const context = await browser.newContext({
+      userAgent: 'Backlist-QA-Crawler/12.0',
+      ignoreHTTPSErrors: true,
+    });
+
+    try {
+      while (this.#queue.length > 0 && this.#routes.length < maxPages) {
+        const { url, depth } = this.#queue.shift();
+        const normalized = this.#normalizeUrl(url);
+
+        if (!normalized || this.#visited.has(normalized)) continue;
+        if (!this.#isSameOrigin(normalized, baseUrl))      continue;
+        if (depth > maxDepth)                              continue;
+
+        this.#visited.add(normalized);
+
+        const route = await this.#probePage(context, normalized, depth, baseUrl);
+        if (!route) continue;
+
+        this.#routes.push(route);
+        if (onRoute) onRoute(route);
+
+        // Enqueue discovered links
+        for (const link of route.links || []) {
+          const linkUrl = this.#normalizeUrl(link);
+          if (linkUrl && !this.#visited.has(linkUrl)) {
+            this.#queue.push({ url: linkUrl, depth: depth + 1 });
+          }
+        }
+      }
+    } finally {
+      await context.close();
+      await browser.close();
+    }
+
+    // Also discover APIs from network intercepts
+    const apiRoutes = await this.#discoverAPIs(baseUrl);
+    for (const api of apiRoutes) {
+      if (!this.#routes.find(r => r.url === api.url)) {
+        this.#routes.push(api);
+        if (onRoute) onRoute(api);
+      }
+    }
+
+    return this.#routes;
+  }
+
+  async #probePage(context, url, depth, baseUrl) {
+    const page = await context.newPage();
+    const networkRequests = [];
+    const links = new Set();
+
+    page.on('request', req => {
+      if (req.url().includes('/api/') || req.resourceType() === 'fetch') {
+        networkRequests.push({
+          url   : req.url(),
+          method: req.method(),
+          type  : 'api',
+        });
+      }
+    });
+
+    try {
+      const response = await page.goto(url, {
+        waitUntil: 'networkidle',
+        timeout  : 15_000,
+      });
+
+      const status      = response?.status() || 0;
+      const contentType = response?.headers()['content-type'] || '';
+
+      // Skip non-HTML
+      if (!contentType.includes('text/html') && !contentType.includes('application/xhtml')) {
+        const type = this.#detectResourceType(url, contentType);
+        return { id: shortId(), url, type, status, depth, links: [], forms: [], apis: [] };
+      }
+
+      // Extract all links
+      const hrefs = await page.$$eval('a[href]', els =>
+        els.map(el => el.href).filter(Boolean)
+      ).catch(() => []);
+      hrefs.forEach(h => links.add(h));
+
+      // Extract forms
+      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,
+        })).filter(f => f.name),
+      }))).catch(() => []);
+
+      // Detect page type
+      const type = this.#detectPageType(url, status);
+
+      // Add API routes discovered via network
+      for (const req of networkRequests) {
+        if (this.#isSameOrigin(req.url, baseUrl)) {
+          links.add(req.url);
+        }
+      }
+
+      return {
+        id   : shortId(),
+        url,
+        type,
+        status,
+        depth,
+        links: [...links],
+        forms,
+        apis : networkRequests,
+        contentType,
+      };
+
+    } catch (err) {
+      return {
+        id   : shortId(),
+        url,
+        type : 'error',
+        status: 0,
+        depth,
+        links: [],
+        forms: [],
+        error: err.message,
+      };
+    } finally {
+      await page.close().catch(() => {});
+    }
+  }
+
+  async #discoverAPIs(baseUrl) {
+    const browser = await this.#playwright.chromium.launch({ headless: true });
+    const context = await browser.newContext({ ignoreHTTPSErrors: true });
+    const page    = await context.newPage();
+    const apis    = new Set();
+
+    page.on('request', req => {
+      const url = req.url();
+      if (
+        (url.includes('/api/') || url.includes('/graphql') || url.includes('/rest/')) &&
+        this.#isSameOrigin(url, baseUrl)
+      ) {
+        apis.add(JSON.stringify({ url, method: req.method() }));
+      }
+    });
+
+    try {
+      await page.goto(baseUrl, { waitUntil: 'networkidle', timeout: 20_000 });
+      // Interact briefly to trigger more API calls
+      await page.waitForTimeout(2000);
+    } catch {}
+
+    await page.close();
+    await context.close();
+    await browser.close();
+
+    return [...apis].map(s => {
+      const parsed = JSON.parse(s);
+      return { id: shortId(), url: parsed.url, method: parsed.method, type: 'api' };
+    });
+  }
+
+  #normalizeUrl(url) {
+    try {
+      const u = new URL(url);
+      u.hash  = '';
+      return u.toString().replace(/\/$/, '') || '/';
+    } catch { return null; }
+  }
+
+  #isSameOrigin(url, base) {
+    try {
+      return new URL(url).origin === new URL(base).origin;
+    } catch { return false; }
+  }
+
+  #detectPageType(url, status) {
+    if (status === 0)   return 'error';
+    if (status >= 400)  return 'error-page';
+    const u = url.toLowerCase();
+    if (u.includes('/api/'))       return 'api';
+    if (u.includes('/graphql'))    return 'api';
+    if (u.endsWith('.json'))       return 'api';
+    if (u.endsWith('.xml'))        return 'resource';
+    if (u.endsWith('.txt'))        return 'resource';
+    if (/\/(login|signin|auth)/i.test(u))    return 'auth';
+    if (/\/(register|signup)/i.test(u))      return 'auth';
+    if (/\/(admin)/i.test(u))                return 'admin';
+    if (/\/(dashboard)/i.test(u))            return 'dashboard';
+    return 'page';
+  }
+
+  #detectResourceType(url, ct) {
+    if (ct.includes('json'))       return 'api';
+    if (ct.includes('javascript')) return 'script';
+    if (ct.includes('css'))        return 'style';
+    if (ct.includes('image'))      return 'image';
+    if (url.endsWith('.xml'))      return 'resource';
+    return 'unknown';
+  }
+}

package/src/qa/browser/interactions.js

@@ -0,0 +1,317 @@
+// Real browser interactions — click, type, submit, verify
+import { shortId, sleep } from '../qa-engine.js';
+
+export class BrowserInteractor {
+  #playwright;
+  #session;
+  #browser = null;
+  #context = null;
+
+  constructor(playwright, session) {
+    this.#playwright = playwright;
+    this.#session    = session;
+  }
+
+  async launch() {
+    this.#browser = await this.#playwright.chromium.launch({
+      headless: true,
+      args    : ['--no-sandbox', '--disable-setuid-sandbox'],
+    });
+    this.#context = await this.#browser.newContext({
+      viewport         : { width: 1280, height: 800 },
+      ignoreHTTPSErrors: true,
+      recordVideo      : undefined,
+    });
+  }
+
+  async close() {
+    await this.#context?.close().catch(() => {});
+    await this.#browser?.close().catch(() => {});
+  }
+
+  async testPage(url, { onConsoleError, onNetworkEvent } = {}) {
+    const page         = await this.#context.newPage();
+    const consoleErrors = [];
+    const networkErrors = [];
+    const jsErrors      = [];
+    const resourcesFailed = [];
+    const interactedElements = [];
+
+    // Real console capture
+    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);
+        onConsoleError?.(entry);
+      }
+    });
+
+    // Real JS error capture
+    page.on('pageerror', err => {
+      const entry = { message: err.message, stack: err.stack, timestamp: Date.now() };
+      jsErrors.push(entry);
+      onConsoleError?.({ type: 'pageerror', text: err.message, stack: err.stack });
+    });
+
+    // Real network failure capture
+    page.on('requestfailed', req => {
+      const entry = {
+        url    : req.url(),
+        method : req.method(),
+        failure: req.failure()?.errorText || 'unknown',
+        timestamp: Date.now(),
+      };
+      networkErrors.push(entry);
+      onNetworkEvent?.({ type: 'failed', ...entry });
+    });
+
+    // All network requests
+    page.on('response', async res => {
+      const status = res.status();
+      onNetworkEvent?.({
+        type  : 'response',
+        url   : res.url(),
+        status,
+        headers: await res.allHeaders().catch(() => {}),
+      });
+    });
+
+    // Resources that fail to load
+    page.on('requestfailed', req => {
+      resourcesFailed.push({
+        url    : req.url(),
+        type   : req.resourceType(),
+        failure: req.failure()?.errorText,
+      });
+    });
+
+    const t0 = Date.now();
+    let pass = true;
+    let failReason = null;
+    let renderTime = null;
+    let 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}`;
+      }
+
+      // Real timing metrics
+      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;
+
+      // Discover forms
+      const forms = await page.$$eval('form', els => els.map(f => ({
+        action: f.action,
+        method: f.method || 'GET',
+        id    : f.id,
+        fields: Array.from(f.elements).map(el => ({
+          name    : el.name,
+          type    : el.type,
+          tagName : el.tagName.toLowerCase(),
+          required: el.required,
+          value   : el.type === 'password' ? '[REDACTED]' : (el.value || ''),
+        })).filter(f => f.name),
+      }))).catch(() => []);
+
+      // Interact: try clicking navigation links
+      const navLinks = await page.$$('nav a, header a, [role="navigation"] 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 {}
+      }
+
+      // Try clicking buttons that don't submit forms
+      const buttons = await page.$$('button:not([type="submit"])').catch(() => []);
+      for (const btn of buttons.slice(0, 3)) {
+        try {
+          const text = await btn.textContent();
+          if (text?.trim()) {
+            await btn.click({ timeout: 2000 });
+            interactedElements.push({ type: 'click', tag: 'button', text: text.trim() });
+            await sleep(300);
+          }
+        } catch {}
+      }
+
+      return {
+        pass,
+        failReason,
+        page,
+        loadTime          : Date.now() - t0,
+        consoleErrors,
+        networkErrors,
+        jsErrors,
+        resourcesFailed,
+        interactedElements,
+        renderTime,
+        domContentLoaded,
+        forms,
+        message: pass ? `Page loaded in ${Date.now() - t0}ms` : failReason,
+      };
+
+    } catch (err) {
+      pass       = false;
+      failReason = err.message;
+
+      return {
+        pass: false,
+        failReason,
+        page,
+        loadTime          : Date.now() - t0,
+        consoleErrors,
+        networkErrors,
+        jsErrors,
+        resourcesFailed,
+        interactedElements,
+        forms             : [],
+        message           : err.message,
+      };
+    }
+  }
+
+  async testForm(page, form) {
+    const t0     = Date.now();
+    const errors = [];
+    let validationOk = false;
+    let submissionOk = false;
+
+    try {
+      // Fill form fields with test data
+      for (const field of form.fields) {
+        try {
+          const selector = field.name
+            ? `[name="${field.name}"]`
+            : `#${field.id}`;
+
+          const testValue = this.#generateTestValue(field);
+          await page.fill(selector, testValue, { timeout: 3000 });
+        } catch {}
+      }
+
+      // Test empty submission (validation check)
+      const submitBtn = await page.$('[type="submit"], button[type="submit"]');
+      if (submitBtn) {
+        await submitBtn.click();
+        await sleep(1000);
+
+        // Check for validation messages
+        const validationMsgs = await page.$$eval(
+          '[class*="error"], [class*="invalid"], [aria-invalid="true"], .help-block',
+          els => els.map(e => e.textContent?.trim()).filter(Boolean)
+        ).catch(() => []);
+
+        validationOk = validationMsgs.length > 0 || (form.fields.some(f => f.required));
+        submissionOk = true;
+      }
+
+      return {
+        pass        : validationOk,
+        validationOk,
+        submissionOk,
+        errors,
+        duration    : Date.now() - t0,
+        message     : validationOk ? 'Form validation works' : 'Form may lack validation',
+      };
+
+    } catch (err) {
+      errors.push(err.message);
+      return { pass: false, validationOk, submissionOk, errors, duration: Date.now() - t0, message: err.message };
+    }
+  }
+
+  async testAuthFlow(page, url, { testCredentials = [] } = {}) {
+    const t0      = Date.now();
+    const details = [];
+    let pass      = true;
+
+    try {
+      for (const cred of testCredentials) {
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 15_000 });
+
+        // Find email/username field
+        const usernameField = await page.$(
+          'input[type="email"], input[name="email"], input[name="username"], input[type="text"]'
+        );
+        const passwordField = await page.$('input[type="password"]');
+
+        if (!usernameField || !passwordField) {
+          details.push({ note: 'Could not find login fields' });
+          continue;
+        }
+
+        await usernameField.fill(cred.username);
+        await passwordField.fill(cred.password);
+
+        const submitBtn = await page.$('[type="submit"], button[type="submit"]');
+        if (submitBtn) {
+          await submitBtn.click();
+          await page.waitForTimeout(2000);
+        }
+
+        const currentUrl = page.url();
+        const bodyText   = await page.textContent('body').catch(() => '');
+
+        // Check if invalid credentials were rejected
+        if (cred.expectFail) {
+          const wasRejected = /invalid|incorrect|error|wrong|fail/i.test(bodyText) ||
+            currentUrl === url || currentUrl.includes('login') || currentUrl.includes('error');
+          details.push({
+            credentials: { username: cred.username.slice(0, 8) + '...' },
+            expectedFail: true,
+            wasRejected,
+            currentUrl,
+          });
+          if (!wasRejected) {
+            pass = false;
+            details.push({ warning: 'Weak credentials were accepted — auth may be broken' });
+          }
+        }
+      }
+
+      return { pass, details, duration: Date.now() - t0, message: pass ? 'Auth flow validated' : 'Auth issues detected' };
+
+    } catch (err) {
+      return { pass: false, details, duration: Date.now() - t0, message: err.message };
+    }
+  }
+
+  #generateTestValue(field) {
+    const type = (field.type || 'text').toLowerCase();
+    const name = (field.name || '').toLowerCase();
+    if (type === 'email' || name.includes('email'))   return 'test@backlist-qa.dev';
+    if (type === 'password' || name.includes('pass')) return 'TestPass123!';
+    if (type === 'tel'   || name.includes('phone'))   return '+1-555-000-0000';
+    if (type === 'url'   || name.includes('url'))     return 'https://example.com';
+    if (type === 'number')                             return '42';
+    if (name.includes('name'))                         return 'QA Test User';
+    if (name.includes('address'))                      return '123 QA Street';
+    if (name.includes('city'))                         return 'Test City';
+    if (name.includes('zip') || name.includes('post')) return '10001';
+    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; }
+  }
+}