@zibby/core 0.1.21 → 0.1.22

package/templates/browser-test-automation/nodes/utils.mjs

@@ -2,6 +2,9 @@ import { readFileSync, existsSync } from 'fs';
 
 const ACTIONABLE_EVENTS = ['navigate', 'type', 'fill', 'click', 'select_option', 'select'];
 
+// ARIA roles that accept text input via Playwright .fill()
+const FILLABLE_ROLES = new Set(['textbox', 'combobox', 'spinbutton', 'searchbox']);
+
 /**
  * Load recorded browser events from a session's events.json,
  * filtering to only actionable events (navigate, fill, click, etc.)
@@ -51,23 +54,63 @@ function tokenOverlapScore(a, b) {
   return tokensA.filter(t => tokensB.some(tb => tb.includes(t) || t.includes(tb))).length;
 }
 
-/** Find a fallback selector for an element by fuzzy-matching against the selector map. */
-function findFallbackSelector(elementKey, selectorMap) {
+/**
+ * Check whether an ARIA role is compatible with an action type.
+ * Prevents click actions from getting textbox fallbacks and vice versa.
+ */
+function isRoleCompatible(role, actionType) {
+  if (!role || role === 'generic' || role === 'none') return true;
+  if (actionType === 'click' && FILLABLE_ROLES.has(role)) return false;
+  if ((actionType === 'fill' || actionType === 'type') && !FILLABLE_ROLES.has(role)) return false;
+  return true;
+}
+
+function formatRoleSelector(roleObj) {
+  if (!roleObj) return '';
+  const { role, name } = roleObj;
+  if (role === 'generic' || role === 'none') {
+    return name ? ` | fallback: getByText('${name}')` : '';
+  }
+  return ` | fallback: getByRole('${role}'${name ? `, { name: '${name}' }` : ''})`;
+}
+
+/**
+ * Find a fallback selector for an element by matching against the AI selector map.
+ * 1. Try exact description match first.
+ * 2. Try role.name containment — prefer the longest (most specific) role name found in the element description.
+ * 3. Fall back to fuzzy token matching with ≥2 token overlap threshold.
+ * 4. Validate ARIA role compatibility with the action type.
+ */
+function findFallbackSelector(elementKey, selectorMap, actionType) {
+  if (selectorMap[elementKey]?.role && isRoleCompatible(selectorMap[elementKey].role.role, actionType)) {
+    return formatRoleSelector(selectorMap[elementKey].role);
+  }
+
+  let bestNameMatch = null;
+  let bestNameLen = 0;
+  for (const [, selectors] of Object.entries(selectorMap)) {
+    if (!isRoleCompatible(selectors.role?.role, actionType)) continue;
+    const roleName = selectors.role?.name;
+    if (!roleName) continue;
+    if (elementKey.includes(roleName.toLowerCase()) && roleName.length > bestNameLen) {
+      bestNameLen = roleName.length;
+      bestNameMatch = selectors;
+    }
+  }
+  if (bestNameMatch?.role) return formatRoleSelector(bestNameMatch.role);
+
   let bestMatch = null;
   let bestScore = 0;
   for (const [k, selectors] of Object.entries(selectorMap)) {
+    if (!isRoleCompatible(selectors.role?.role, actionType)) continue;
     const score = tokenOverlapScore(elementKey, k);
     if (score > bestScore) {
       bestScore = score;
       bestMatch = selectors;
     }
   }
-  if (!bestMatch?.role || bestScore < 1) return '';
-  const { role, name } = bestMatch.role;
-  if (role === 'generic' || role === 'none') {
-    return name ? ` | fallback: getByText('${name}')` : '';
-  }
-  return ` | fallback: getByRole('${role}'${name ? `, { name: '${name}' }` : ''})`;
+  if (!bestMatch?.role || bestScore < 2) return '';
+  return formatRoleSelector(bestMatch.role);
 }
 
 /** Extract visible text hint from element description for use as a getByText fallback. */
@@ -80,12 +123,91 @@ function extractTextHint(elementDesc) {
   return '';
 }
 
+/**
+ * Mark duplicate stableIds across actions. When the same stableId appears
+ * on different steps, the second+ occurrence gets nullified with a marker
+ * so the LLM knows to use the fallback selector instead.
+ */
+export function deduplicateStableIds(actions) {
+  const seen = new Map();
+  return actions.map((a, i) => {
+    if (!a.stableId || a.stableId === 'undefined') return a;
+    if (seen.has(a.stableId)) {
+      return { ...a, _dupOf: seen.get(a.stableId), stableId: null };
+    }
+    seen.set(a.stableId, i);
+    return a;
+  });
+}
+
+/**
+ * Detect a form-submission setup sequence at the start of recorded actions.
+ * Purely structural — no hardcoded keywords. Finds a block of fill/type/click
+ * actions near the start containing ≥2 fills, ending with a click (submit).
+ * The LLM decides what it is (login, registration, etc.) from context.
+ */
+export function detectLoginPattern(actions) {
+  if (!actions || actions.length < 3) return null;
+
+  let start = 0;
+  while (start < actions.length && actions[start].type === 'navigate') start++;
+  if (start >= actions.length) return null;
+
+  let lastFillIdx = -1;
+  let fillCount = 0;
+  let i = start;
+  while (i < actions.length) {
+    const t = actions[i].type;
+    if (t === 'fill' || t === 'type') {
+      fillCount++;
+      lastFillIdx = i;
+    } else if (t !== 'click') {
+      break;
+    }
+    i++;
+  }
+
+  if (fillCount < 2 || lastFillIdx < 0) return null;
+
+  let submitIdx = -1;
+  for (let j = lastFillIdx + 1; j < actions.length; j++) {
+    if (actions[j].type === 'click') { submitIdx = j; break; }
+    if (actions[j].type !== 'fill' && actions[j].type !== 'type') break;
+  }
+  if (submitIdx < 0) return null;
+
+  const remaining = actions.length - submitIdx - 1;
+  if (remaining < 1) return null;
+
+  return {
+    startIndex: 0,
+    endIndex: submitIdx,
+    fillCount,
+    actions: actions.slice(0, submitIdx + 1),
+  };
+}
+
 /** Format a single recorded event into a human-readable action line with stableId and fallback selector. */
 export function formatAction(event, index, selectorMap) {
   const num = index + 1;
   const reason = event.reasoning ? ` | reason: "${event.reasoning}"` : '';
   const hasStableId = event.stableId && event.stableId !== 'undefined';
-  const fallback = findFallbackSelector((event.element || '').toLowerCase(), selectorMap);
+
+  if (event._dupOf !== undefined) {
+    const dupHint = `[DUPLICATE_STABLE_ID — same as step ${event._dupOf + 1}, use fallback]`;
+    const fallback = findFallbackSelector((event.element || '').toLowerCase(), selectorMap, event.type);
+    const textFb = !fallback ? (() => { const h = extractTextHint(event.element); return h ? ` | fallback: getByText('${h}')` : ''; })() : '';
+    switch (event.type) {
+      case 'click':
+        return `${num}. CLICK ${dupHint} - ${event.element || 'element'}${fallback || textFb}${reason}`;
+      case 'fill': case 'type':
+        return `${num}. FILL ${dupHint} with "${event.value}" - ${event.element || 'field'}${fallback || textFb}${reason}`;
+      default:
+        return `${num}. ${event.type} ${dupHint} ${event.value || ''}${fallback || textFb}${reason}`;
+    }
+  }
+
+  const fallback = findFallbackSelector((event.element || '').toLowerCase(), selectorMap, event.type);
   const idPart = hasStableId ? `[stableId="${event.stableId}"]` : '[NO_STABLE_ID]';
 
   let textFallback = '';
@@ -111,14 +233,35 @@ export function formatAction(event, index, selectorMap) {
 /**
  * Build the full RECORDED ACTIONS prompt block by loading events.json
  * and merging with AI-captured selectors from execution output.
+ * Auto-deduplicates stableIds before formatting.
  */
 export function formatRecordedActions(sessionPath, executionActions) {
-  const recorded = loadRecordedActions(sessionPath);
+  let recorded = loadRecordedActions(sessionPath);
   if (recorded.length === 0) return '';
+  recorded = deduplicateStableIds(recorded);
   const selectorMap = buildSelectorMap(executionActions);
   return `RECORDED ACTIONS:\n${recorded.map((e, i) => formatAction(e, i, selectorMap)).join('\n')}\n\nGenerate a CLEAN script from these — not a 1:1 replay. If stableId fails, use the fallback selector.`;
 }
 
+/**
+ * Format a prompt hint when a setup sequence (form submission) is detected
+ * at the start of the recorded actions. Tells the LLM to check for or
+ * create a shared fixture — no prescriptive file names or code patterns.
+ */
+export function formatSetupHint(setup) {
+  if (!setup) return '';
+  return `
+SETUP SEQUENCE DETECTED (steps ${setup.startIndex + 1}–${setup.endIndex + 1}, ${setup.fillCount} form fields):
+The first ${setup.endIndex + 1} actions are a form-submission sequence that will repeat across tests.
+BEFORE writing ANY new files, you MUST search the codebase:
+1. Search tests/ for existing fixture, helper, or setup files (e.g. grep for "export.*function" in tests/)
+2. Read any found files to see what they export
+3. If an existing function already handles this setup → import and reuse it, skip steps ${setup.startIndex + 1}–${setup.endIndex + 1}
+4. ONLY create a new fixture if nothing existing covers these steps
+DO NOT create a duplicate fixture. Reuse what exists.
+`;
+}
+
 /** Format preflight assertions into a simple numbered checklist for the execute_live prompt. */
 export function formatAssertionChecklist(assertions) {
   if (!assertions?.length) return '';

package/templates/browser-test-automation/pipeline-ids.js

@@ -0,0 +1,12 @@
+/**
+ * Browser-test **template only** — ordered graph node ids used for:
+ * - JSONL `recordKind: 'progress'` validation in this template’s `run-index.mjs`
+ * - Studio UI that visualizes this workflow (imports from this path, not from `src/`).
+ *
+ * Other workflows should define their own ordered id list alongside their template.
+ */
+export const BROWSER_TEST_PIPELINE_NODE_IDS = Object.freeze([
+  'preflight',
+  'execute_live',
+  'generate_script',
+]);

package/templates/browser-test-automation/result-handler.mjs

@@ -4,8 +4,17 @@
  * and assertion → event ID resolution.
  */
 
-import { writeFileSync, existsSync, readFileSync, readdirSync, renameSync, statSync } from 'fs';
-import { join } from 'path';
+import {
+  writeFileSync,
+  existsSync,
+  readFileSync,
+  readdirSync,
+  renameSync,
+  statSync,
+  copyFileSync,
+  mkdirSync,
+} from 'fs';
+import { join, isAbsolute, normalize } from 'path';
 import { spawnSync } from 'child_process';
 import { ResultHandler, logger } from '@zibby/core';
 
@@ -283,4 +292,71 @@ export class BrowserTestResultHandler extends ResultHandler {
       console.warn('⚠️  Could not enrich events:', err.message);
     }
   }
+
+  /**
+   * Copy the final Playwright/Selenium file into `session/generate_script/` under stable names
+   * so Studio (Electron + web bridge) can load scripts without resolving arbitrary `scriptPath`.
+   * Safe to run even when the agent already wrote into that folder.
+   */
+  static ensureStudioCodegenMirror(sessionRoot, cwd) {
+    if (!sessionRoot || typeof sessionRoot !== 'string') return;
+    const gsDir = join(sessionRoot, 'generate_script');
+    const resultPath = join(gsDir, 'result.json');
+    if (!existsSync(resultPath)) return;
+
+    let data;
+    try {
+      data = JSON.parse(readFileSync(resultPath, 'utf-8'));
+    } catch {
+      return;
+    }
+    const raw = data?.scriptPath;
+    if (!raw || typeof raw !== 'string' || !raw.trim()) return;
+
+    const t = raw.trim();
+    const candidates = [];
+    if (isAbsolute(t)) candidates.push(normalize(t));
+    if (cwd && typeof cwd === 'string') candidates.push(join(cwd, t));
+    candidates.push(join(sessionRoot, t));
+    candidates.push(join(gsDir, t));
+
+    let src = null;
+    for (const c of candidates) {
+      try {
+        if (existsSync(c) && statSync(c).isFile()) {
+          src = c;
+          break;
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+    if (!src) {
+      logger.debug(`[Studio] Codegen mirror: could not resolve scriptPath "${t}"`);
+      return;
+    }
+
+    const lower = src.toLowerCase();
+    const destName = lower.endsWith('.py')
+      ? 'test.selenium.py'
+      : lower.endsWith('.ts') || lower.endsWith('.tsx')
+        ? 'playwright.spec.ts'
+        : 'generated-test.spec.js';
+    const dest = join(gsDir, destName);
+
+    try {
+      if (existsSync(dest)) {
+        try {
+          if (statSync(dest).mtimeMs >= statSync(src).mtimeMs) return;
+        } catch {
+          /* replace if unsure */
+        }
+      }
+      mkdirSync(gsDir, { recursive: true });
+      copyFileSync(src, dest);
+      logger.info(`[Studio] Mirrored script for discovery: ${dest}`);
+    } catch (e) {
+      logger.debug(`[Studio] Codegen mirror failed: ${e.message}`);
+    }
+  }
 }