siesa-agents 2.1.72-qa.2 → 2.1.72-qa.21

package/siesa-agents/resources/playwright-kit/tools/locator-recorder.spec.ts

@@ -0,0 +1,986 @@
+/**
+ * Grabador de Localizadores para Playwright v4.0
+ * Adaptado del Grabador Flotante Selenium de Juan Manuel Reina
+ *
+ * Uso:
+ *   npx playwright test --config=playwright.recorder.config.ts
+ *
+ * Mejoras v4.0:
+ *   - Assertions capturadas (clic derecho): toHaveText / toHaveValue / toBeVisible
+ *   - Screenshots / visual baseline: boton Screenshot → toHaveScreenshot()
+ *   - Modulos reutilizables: guardar/insertar secuencias JSON entre grabaciones
+ * Mejoras v3.0:
+ *   - Modo Grabar automatico: captura clicks, fills y selects sin Ctrl+Click
+ *   - Acciones reales en export TS: click(), fill('valor'), selectOption()
+ *   - Boton flotante DETENER REC con animacion pulsante
+ *   - Badges de accion con colores (naranja=click, azul=fill, morado=select)
+ *   - Deduplicacion inteligente (400ms clicks, merge fills)
+ * Mejoras v2.0:
+ *   - Descarga fiable via Node.js (page.exposeFunction) — no mas UUIDs
+ *   - Agrupacion de localizadores por seccion/pagina
+ *   - Export Playwright TS ejecutable con objetos agrupados + test scaffold
+ *   - Persistencia de capturas entre navegaciones (sessionStorage)
+ *   - Eliminar capturas individuales desde el panel
+ *   - Overlay JS separado para mantenibilidad
+ */
+
+import { test, expect, type Page } from '@playwright/test';
+import { config as dotenvConfig } from 'dotenv';
+import * as fs from 'fs';
+import * as path from 'path';
+
+dotenvConfig({ path: path.join(__dirname, '..', '.env') });
+
+const CRED = {
+  user: process.env.TEST_USER || 'Carlos1',
+  password: process.env.TEST_PASS || '1234',
+  dbEngine: process.env.DB_ENGINE || 'sqlserver',
+};
+const OUTPUT_DIR = path.join(__dirname, '..', 'captured-locators');
+const SCREENSHOTS_DIR = path.join(OUTPUT_DIR, 'screenshots'); // v4: visual baseline
+const MODULES_DIR = path.join(OUTPUT_DIR, 'modules');         // v4: modulos reutilizables
+
+// ─── Login reutilizado del flujo encuestas ──────────────────────
+async function login(page: Page) {
+  await page.goto('/login');
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.waitForTimeout(1500);
+
+  // Seleccionar BD desde .env (DB_ENGINE)
+  const dbCombo = page.locator('select').first();
+  if (await dbCombo.isVisible({ timeout: 3000 }).catch(() => false)) {
+    const options = await page.locator('select option').allTextContents();
+    const dbIndex = options.findIndex(o => new RegExp(CRED.dbEngine, 'i').test(o));
+    if (dbIndex >= 0) {
+      await dbCombo.selectOption({ index: dbIndex });
+      await page.waitForTimeout(500);
+    }
+  }
+
+  const userInput = page.locator(
+    '[data-automation-id="SDKCharField_BLLogin.Username"] input.dxbl-text-edit-input'
+  );
+  await userInput.waitFor({ state: 'visible', timeout: 30_000 });
+  // Esperar a que Blazor SDK termine de inicializar el campo
+  await page.locator('.sdk-loader').waitFor({ state: 'hidden', timeout: 10_000 }).catch(() => {});
+  await page.waitForTimeout(500);
+  await userInput.click();
+  await expect(userInput).toBeFocused({ timeout: 5_000 });
+  await userInput.fill(CRED.user);
+  await expect(userInput).toHaveValue(CRED.user, { timeout: 5_000 });
+  await page.locator('input[type="password"]').fill(CRED.password);
+  await page.locator('[data-automation-id="SDKButton_submit"]').click();
+  await page.waitForURL(/.*(?!.*login).*/, { timeout: 30_000 });
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.waitForTimeout(3000);
+}
+
+// ─── Login Portal de Empleo (pre-load + pressSequentially) ──────
+// Uso: PORTAL_LOGIN=1 PORTAL_URL='https://...' npx playwright test ...
+async function loginPortal(page: Page) {
+  const portalUrl = process.env.PORTAL_URL!;
+  const portalUser = process.env.PORTAL_USER || 'user@example.com';
+  const portalPass = process.env.PORTAL_PASS || '';
+
+  // Pre-load: navegar al dominio base para que Blazor cargue recursos de localizacion
+  const baseUrl = portalUrl.replace(/\/Login\/?\?.*$/, '/');
+  await page.goto(baseUrl);
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.waitForTimeout(3000);
+
+  // Ahora ir al login real con parametro dat=
+  await page.goto(portalUrl);
+  const userInput = page.locator(
+    '[data-automation-id="SDKCharField_BLLogin.Username"] input.dxbl-text-edit-input'
+  );
+  await userInput.waitFor({ state: 'visible', timeout: 30_000 });
+  await userInput.click();
+  await userInput.fill('');
+  await userInput.pressSequentially(portalUser, { delay: 30 });
+
+  const passInput = page.locator('[data-automation-id="SDKPasswordField_BLLogin.Password"]');
+  await passInput.click();
+  await passInput.fill(portalPass);
+
+  await page.locator('[data-automation-id="SDKButton_"][type="submit"]').click();
+  await page.waitForLoadState('networkidle').catch(() => {});
+  await page.waitForTimeout(3000);
+  console.log('[LR] Login portal completado');
+}
+
+// ─── Guardado server-side ───────────────────────────────────────
+function saveLocatorFile(filename: string, content: string): string {
+  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  const filePath = path.join(OUTPUT_DIR, filename);
+  fs.writeFileSync(filePath, content, 'utf-8');
+  console.log(`[LR] Archivo guardado: ${filePath}`);
+  return filePath;
+}
+
+// ─── Generador de Playwright TS ejecutable ──────────────────────
+function generatePlaywrightTS(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.ts`;
+
+  if (captures.length === 0) {
+    const content = '// No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  // ── Agrupar capturas ──
+  const groups: Record<string, any[]> = {};
+  captures.forEach((c: any) => {
+    const g = c.group || 'General';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(c);
+  });
+
+  const urls = [...new Set(captures.map((c: any) => c.url).filter(Boolean))];
+  const groupNames = Object.keys(groups);
+
+  // ── Asignar nombres de variable unicos ──
+  const usedNames: Record<string, number> = {};
+  captures.forEach((c: any) => {
+    let base = '';
+    if (c.autoId) {
+      // Quitar prefijo SDK: SDKCharField_BLSurvey.Name → BLSurvey_Name
+      base = c.autoId
+        .replace(
+          /^SDK(CharField|NumericField|Button|DateField|ComboBox|CheckBox|Grid|DataGrid|Dialog|TreeView|RadioGroup|Toolbar|DropDown|ListBox|Tab|Panel|Switch|Menu|Popup|Upload)_/,
+          ''
+        )
+        .replace(/[^a-zA-Z0-9]/g, '_');
+    } else if (c.title) {
+      base = c.title.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 30);
+    } else if (c.text) {
+      base = c.text
+        .replace(/[^a-zA-Z0-9\s]/g, '')
+        .trim()
+        .replace(/\s+/g, '_')
+        .substring(0, 20);
+    } else {
+      base = `${c.tag}_${c.num}`;
+    }
+    // Variable no puede empezar con numero
+    if (/^[0-9]/.test(base)) base = 'el_' + base;
+    // Evitar vacios
+    if (!base) base = `${c.tag}_${c.num}`;
+    // Deduplicar
+    if (usedNames[base]) {
+      usedNames[base]++;
+      base = `${base}_${usedNames[base]}`;
+    } else {
+      usedNames[base] = 1;
+    }
+    c._varName = base;
+  });
+
+  // ── Construir TS ──
+  const L: string[] = [];
+
+  L.push(`// Localizadores capturados \u2014 ${timestamp}`);
+  L.push('// Generado por Grabador de Localizadores Playwright v4.0');
+  if (urls.length > 0) L.push(`// URL(s): ${urls.join(', ')}`);
+  L.push(
+    `// Total: ${captures.length} elementos en ${groupNames.length} grupo(s)`
+  );
+  L.push('');
+  L.push("import { test, expect, type Page } from '@playwright/test';");
+  L.push('');
+
+  // v4: detectar modulos reutilizables insertados (source: 'module:<name>')
+  const moduleNames = [
+    ...new Set(
+      captures
+        .filter((c: any) => typeof c.source === 'string' && c.source.startsWith('module:'))
+        .map((c: any) => c.source.slice('module:'.length))
+    ),
+  ];
+  if (moduleNames.length > 0) {
+    L.push('// Modulos reutilizables detectados — descomenta para extraerlos a archivos compartidos:');
+    moduleNames.forEach((m: any) => {
+      const fn = String(m).replace(/[^a-zA-Z0-9]/g, '_');
+      L.push(`// import { ${fn} } from './modules/${m}';`);
+    });
+    L.push('');
+  }
+
+  // Detectar fills con sufijo numerico para auto-incremento
+  const fillsWithNumbers = captures.filter(
+    (c: any) => c.actionType === 'fill' && c.actionValue && /\d+\s*$/.test(c.actionValue)
+  );
+  const hasAutoIncrement = fillsWithNumbers.length > 0;
+  if (hasAutoIncrement) {
+    L.push('// Auto-incremento: si un registro ya existe, sube el numero');
+    L.push("const RUN_ID = Date.now().toString().slice(-4);");
+    L.push('');
+  }
+
+  // Objetos de localizadores por grupo
+  groupNames.forEach((groupName) => {
+    const safeName =
+      groupName.replace(/[^a-zA-Z0-9]/g, '') || 'General';
+    const items = groups[groupName];
+    const barLen = Math.max(1, 55 - groupName.length);
+    const bar = '\u2550'.repeat(barLen);
+
+    L.push(`// \u2550\u2550\u2550 ${groupName} ${bar}`);
+    L.push(`const ${safeName} = {`);
+
+    items.forEach((c: any) => {
+      // JSDoc comment con info del elemento
+      const parts = [`#${c.num}`, `<${c.tag}>`];
+      if (c.isDisabled) parts.push('[DISABLED]');
+      if (c.autoId) parts.push(c.autoId);
+      if (c.text && c.text !== c.autoId)
+        parts.push(`"${c.text.substring(0, 30)}"`);
+      L.push(`  /** ${parts.join(' ')} */`);
+      L.push(`  ${c._varName}: (page: Page) => ${c.bestPlaywright},`);
+
+      // Alternativas como comentarios
+      if (c.allStrategies && c.allStrategies.length > 1) {
+        c.allStrategies.slice(1, 3).forEach((s: any) => {
+          L.push(`  //   alt ${s.type} (${s.reliability}%): ${s.playwright}`);
+        });
+      }
+    });
+
+    L.push('};');
+    L.push('');
+  });
+
+  // Test scaffold
+  L.push(
+    '// \u2500\u2500\u2500 Test Scaffold \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500'
+  );
+  L.push("test.describe('Flujo capturado', () => {");
+  L.push(
+    "  test('validar elementos capturados', async ({ page }) => {"
+  );
+
+  if (urls.length > 0) {
+    L.push(`    await page.goto('${urls[0]}');`);
+    L.push('');
+  }
+
+  groupNames.forEach((groupName) => {
+    const safeName =
+      groupName.replace(/[^a-zA-Z0-9]/g, '') || 'General';
+    L.push(`    // \u2500\u2500 ${groupName} \u2500\u2500`);
+    groups[groupName].forEach((c: any) => {
+      const expr = `${safeName}.${c._varName}(page)`;
+      if (c.isDisabled) {
+        L.push(
+          `    // await expect(${expr}).toBeVisible(); // DISABLED en captura`
+        );
+      } else if (c.actionType === 'click') {
+        L.push(`    await ${expr}.click();`);
+        L.push(`    await page.waitForLoadState('networkidle').catch(() => {});`);
+        L.push(`    await page.waitForTimeout(1500);`);
+      } else if (c.actionType === 'fill') {
+        const raw = c.actionValue || 'valor';
+        const escaped = raw.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+        // Auto-incremento: reemplazar sufijo numerico con RUN_ID
+        if (hasAutoIncrement && /\d+\s*$/.test(raw)) {
+          const prefix = escaped.replace(/\d+\s*$/, '').replace(/\s+$/, '');
+          L.push(`    await ${expr}.fill('${prefix} ' + RUN_ID);`);
+        } else {
+          L.push(`    await ${expr}.fill('${escaped}');`);
+        }
+      } else if (c.actionType === 'select') {
+        const val = c.actionValue
+          ? c.actionValue.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+          : '';
+        L.push(`    await ${expr}.selectOption('${val}');`);
+      } else if (c.actionType === 'assert') {
+        // v4: assertion capturada via clic derecho
+        const av = (c.assertionValue || '').replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+        if (c.assertionType === 'text') {
+          L.push(`    await expect(${expr}).toHaveText('${av}');`);
+        } else if (c.assertionType === 'value') {
+          L.push(`    await expect(${expr}).toHaveValue('${av}');`);
+        } else {
+          L.push(`    await expect(${expr}).toBeVisible();`);
+        }
+      } else if (c.actionType === 'screenshot') {
+        // v4: visual baseline
+        const shot = c.screenshotFile || `step-${c.num}.png`;
+        L.push(`    await expect(page).toHaveScreenshot('${shot}');`);
+      } else if (
+        c.tag === 'input' ||
+        c.tag === 'textarea' ||
+        c.tag === 'select'
+      ) {
+        // inspect mode — sugerir accion segun tag
+        L.push(`    await expect(${expr}).toBeVisible();`);
+        L.push(`    // await ${expr}.fill('valor');`);
+      } else if (
+        c.tag === 'button' ||
+        (c.autoId && c.autoId.includes('Button'))
+      ) {
+        L.push(`    await expect(${expr}).toBeVisible();`);
+        L.push(`    // await ${expr}.click();`);
+      } else {
+        L.push(`    await expect(${expr}).toBeVisible();`);
+      }
+    });
+    L.push('');
+  });
+
+  L.push('  });');
+  L.push('});');
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+// ─── Generador de Robot Framework (SeleniumLibrary) ─────────────
+function generateRobotSelenium(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.robot`;
+
+  if (captures.length === 0) {
+    const content = '# No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  const urls = [...new Set(captures.map((c: any) => c.url).filter(Boolean))];
+  const groups: Record<string, any[]> = {};
+  captures.forEach((c: any) => {
+    const g = c.group || 'General';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(c);
+  });
+  const groupNames = Object.keys(groups);
+
+  const L: string[] = [];
+  L.push('*** Settings ***');
+  L.push('Library    SeleniumLibrary');
+  L.push('');
+  L.push(`# Localizadores capturados — ${timestamp}`);
+  L.push('# Generado por Grabador de Localizadores Playwright v4.0');
+  L.push(`# Total: ${captures.length} elementos en ${groupNames.length} grupo(s)`);
+  L.push('');
+  L.push('*** Test Cases ***');
+  L.push('Flujo Capturado');
+
+  if (urls.length > 0) {
+    L.push(`    Open Browser    ${urls[0]}    chrome`);
+    L.push('    Maximize Browser Window');
+    L.push('');
+  }
+
+  groupNames.forEach((groupName) => {
+    L.push(`    # ── ${groupName} ──`);
+    groups[groupName].forEach((c: any) => {
+      const selector = `css=${c.bestLocator}`;
+      const comment = `    # #${c.num} <${c.tag}>${c.autoId ? ' ' + c.autoId : ''}`;
+      L.push(comment);
+
+      if (c.actionType === 'click') {
+        L.push(`    Wait Until Element Is Visible    ${selector}    timeout=10s`);
+        L.push(`    Click Element    ${selector}`);
+        L.push('    Sleep    1s');
+      } else if (c.actionType === 'fill') {
+        const val = c.actionValue || 'valor';
+        L.push(`    Wait Until Element Is Visible    ${selector}    timeout=10s`);
+        L.push(`    Input Text    ${selector}    ${val}`);
+      } else if (c.actionType === 'select') {
+        const val = c.actionValue || '';
+        L.push(`    Wait Until Element Is Visible    ${selector}    timeout=10s`);
+        L.push(`    Select From List By Value    ${selector}    ${val}`);
+      } else if (c.actionType === 'assert') {
+        // v4: assertion capturada
+        if (c.assertionType === 'text') {
+          L.push(`    Element Text Should Be    ${selector}    ${c.assertionValue || ''}`);
+        } else if (c.assertionType === 'value') {
+          L.push(`    Textfield Value Should Be    ${selector}    ${c.assertionValue || ''}`);
+        } else {
+          L.push(`    Element Should Be Visible    ${selector}`);
+        }
+      } else if (c.actionType === 'screenshot') {
+        // v4: visual baseline
+        L.push(`    Capture Page Screenshot    ${c.screenshotFile || 'step-' + c.num + '.png'}`);
+      } else {
+        L.push(`    Wait Until Element Is Visible    ${selector}    timeout=10s`);
+        L.push(`    # Element visible: ${selector}`);
+      }
+    });
+    L.push('');
+  });
+
+  if (urls.length > 0) {
+    L.push('    [Teardown]    Close Browser');
+  }
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+// ─── Generador de Playwright Python ─────────────────────────────
+function generatePlaywrightPython(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.py`;
+
+  if (captures.length === 0) {
+    const content = '# No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  const urls = [...new Set(captures.map((c: any) => c.url).filter(Boolean))];
+  const groups: Record<string, any[]> = {};
+  captures.forEach((c: any) => {
+    const g = c.group || 'General';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(c);
+  });
+  const groupNames = Object.keys(groups);
+
+  // Detectar fills con sufijo numerico para auto-incremento
+  const fillsWithNumbers = captures.filter(
+    (c: any) => c.actionType === 'fill' && c.actionValue && /\d+\s*$/.test(c.actionValue)
+  );
+  const hasAutoIncrement = fillsWithNumbers.length > 0;
+
+  const L: string[] = [];
+  L.push(`# Localizadores capturados — ${timestamp}`);
+  L.push('# Generado por Grabador de Localizadores Playwright v4.0');
+  L.push(`# Total: ${captures.length} elementos en ${groupNames.length} grupo(s)`);
+  L.push('');
+  L.push('import pytest');
+  L.push('from playwright.sync_api import Page, expect');
+  if (hasAutoIncrement) {
+    L.push('import time');
+  }
+  L.push('');
+  L.push('');
+
+  if (hasAutoIncrement) {
+    L.push('# Auto-incremento: si un registro ya existe, sube el numero');
+    L.push('RUN_ID = str(int(time.time()))[-4:]');
+    L.push('');
+    L.push('');
+  }
+
+  L.push('def test_flujo_capturado(page: Page):');
+  L.push(`    """Flujo capturado desde el Grabador de Localizadores v4.0."""`);
+
+  if (urls.length > 0) {
+    L.push(`    page.goto("${urls[0]}")`);
+    L.push('');
+  }
+
+  groupNames.forEach((groupName) => {
+    L.push(`    # ── ${groupName} ──`);
+    groups[groupName].forEach((c: any) => {
+      const sel = c.bestLocator.replace(/"/g, '\\"');
+      const comment = `    # #${c.num} <${c.tag}>${c.autoId ? ' ' + c.autoId : ''}`;
+      L.push(comment);
+
+      if (c.actionType === 'click') {
+        L.push(`    page.locator("${sel}").click()`);
+        L.push('    page.wait_for_load_state("networkidle")');
+        L.push('    page.wait_for_timeout(1500)');
+      } else if (c.actionType === 'fill') {
+        const raw = c.actionValue || 'valor';
+        const escaped = raw.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+        if (hasAutoIncrement && /\d+\s*$/.test(raw)) {
+          const prefix = escaped.replace(/\d+\s*$/, '').replace(/\s+$/, '');
+          L.push(`    page.locator("${sel}").fill(f"${prefix} {RUN_ID}")`);
+        } else {
+          L.push(`    page.locator("${sel}").fill("${escaped}")`);
+        }
+      } else if (c.actionType === 'select') {
+        const val = (c.actionValue || '').replace(/"/g, '\\"');
+        L.push(`    page.locator("${sel}").select_option("${val}")`);
+      } else if (c.actionType === 'assert') {
+        // v4: assertion capturada
+        const av = (c.assertionValue || '').replace(/"/g, '\\"');
+        if (c.assertionType === 'text') {
+          L.push(`    expect(page.locator("${sel}")).to_have_text("${av}")`);
+        } else if (c.assertionType === 'value') {
+          L.push(`    expect(page.locator("${sel}")).to_have_value("${av}")`);
+        } else {
+          L.push(`    expect(page.locator("${sel}")).to_be_visible()`);
+        }
+      } else if (c.actionType === 'screenshot') {
+        // v4: visual baseline
+        L.push(`    expect(page).to_have_screenshot("${c.screenshotFile || 'step-' + c.num + '.png'}")`);
+      } else {
+        L.push(`    expect(page.locator("${sel}")).to_be_visible()`);
+      }
+    });
+    L.push('');
+  });
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+// ─── Generador de Cypress ───────────────────────────────────────
+function generateCypress(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.cy.js`;
+
+  if (captures.length === 0) {
+    const content = '// No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  const urls = [...new Set(captures.map((c: any) => c.url).filter(Boolean))];
+  const groups: Record<string, any[]> = {};
+  captures.forEach((c: any) => {
+    const g = c.group || 'General';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(c);
+  });
+  const groupNames = Object.keys(groups);
+
+  // Detectar fills con sufijo numerico para auto-incremento
+  const fillsWithNumbers = captures.filter(
+    (c: any) => c.actionType === 'fill' && c.actionValue && /\d+\s*$/.test(c.actionValue)
+  );
+  const hasAutoIncrement = fillsWithNumbers.length > 0;
+
+  const L: string[] = [];
+  L.push(`// Localizadores capturados — ${timestamp}`);
+  L.push('// Generado por Grabador de Localizadores Playwright v4.0');
+  L.push(`// Total: ${captures.length} elementos en ${groupNames.length} grupo(s)`);
+  L.push('');
+
+  if (hasAutoIncrement) {
+    L.push('// Auto-incremento: si un registro ya existe, sube el numero');
+    L.push("const RUN_ID = Date.now().toString().slice(-4);");
+    L.push('');
+  }
+
+  L.push("describe('Flujo capturado', () => {");
+  L.push("  it('validar elementos capturados', () => {");
+
+  if (urls.length > 0) {
+    L.push(`    cy.visit('${urls[0]}');`);
+    L.push('');
+  }
+
+  groupNames.forEach((groupName) => {
+    L.push(`    // ── ${groupName} ──`);
+    groups[groupName].forEach((c: any) => {
+      const sel = c.bestLocator.replace(/'/g, "\\'");
+      const comment = `    // #${c.num} <${c.tag}>${c.autoId ? ' ' + c.autoId : ''}`;
+      L.push(comment);
+
+      if (c.actionType === 'click') {
+        L.push(`    cy.get('${sel}').click();`);
+        L.push('    cy.wait(1500);');
+      } else if (c.actionType === 'fill') {
+        const raw = c.actionValue || 'valor';
+        const escaped = raw.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+        if (hasAutoIncrement && /\d+\s*$/.test(raw)) {
+          const prefix = escaped.replace(/\d+\s*$/, '').replace(/\s+$/, '');
+          L.push(`    cy.get('${sel}').clear().type('${prefix} ' + RUN_ID);`);
+        } else {
+          L.push(`    cy.get('${sel}').clear().type('${escaped}');`);
+        }
+      } else if (c.actionType === 'select') {
+        const val = (c.actionValue || '').replace(/'/g, "\\'");
+        L.push(`    cy.get('${sel}').select('${val}');`);
+      } else if (c.actionType === 'assert') {
+        // v4: assertion capturada
+        const av = (c.assertionValue || '').replace(/'/g, "\\'");
+        if (c.assertionType === 'text') {
+          L.push(`    cy.get('${sel}').should('have.text', '${av}');`);
+        } else if (c.assertionType === 'value') {
+          L.push(`    cy.get('${sel}').should('have.value', '${av}');`);
+        } else {
+          L.push(`    cy.get('${sel}').should('exist');`);
+        }
+      } else if (c.actionType === 'screenshot') {
+        // v4: visual baseline
+        const shot = (c.screenshotFile || `step-${c.num}.png`).replace(/\.png$/, '');
+        L.push(`    cy.screenshot('${shot}');`);
+      } else {
+        L.push(`    cy.get('${sel}').should('be.visible');`);
+      }
+    });
+    L.push('');
+  });
+
+  L.push('  });');
+  L.push('});');
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+// ─── Generador de CSV ───────────────────────────────────────────
+function generateCSV(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.csv`;
+
+  if (captures.length === 0) {
+    const content = '# No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  const headers = [
+    'Paso', 'Grupo', 'Acción', 'Tag', 'AutomationId', 'Título',
+    'Texto', 'Valor', 'TipoAssertion', 'ValorAssertion', 'Screenshot',
+    'Selector', 'Playwright', 'Confiabilidad',
+    'Habilitado', 'Visible', 'URL'
+  ];
+
+  const L: string[] = [];
+  L.push(headers.join(','));
+
+  captures.forEach((c: any) => {
+    const row = [
+      c.num,
+      csvEscape(c.group || 'General'),
+      csvEscape(c.actionType || 'inspect'),
+      csvEscape(c.tag),
+      csvEscape(c.autoId),
+      csvEscape(c.title),
+      csvEscape(c.text),
+      csvEscape(c.actionValue || ''),
+      csvEscape(c.assertionType || ''),
+      csvEscape(c.assertionValue || ''),
+      csvEscape(c.screenshotFile || ''),
+      csvEscape(c.bestLocator),
+      csvEscape(c.bestPlaywright),
+      c.reliability + '%',
+      c.isDisabled ? 'No' : 'Sí',
+      c.isVisible ? 'Sí' : 'No',
+      csvEscape(c.url || '')
+    ];
+    L.push(row.join(','));
+  });
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+function csvEscape(val: string | null | undefined): string {
+  if (!val) return '""';
+  const s = String(val);
+  if (s.includes(',') || s.includes('"') || s.includes('\n')) {
+    return '"' + s.replace(/"/g, '""') + '"';
+  }
+  return s;
+}
+
+// ─── Generador de Gherkin (.feature) ────────────────────────────
+function generateGherkin(captures: any[]): {
+  filename: string;
+  filePath: string;
+  content: string;
+} {
+  const timestamp = new Date().toISOString();
+  const filename = `locators-${timestamp.slice(0, 19).replace(/:/g, '-')}.feature`;
+
+  if (captures.length === 0) {
+    const content = '# No hay elementos capturados\n';
+    const filePath = saveLocatorFile(filename, content);
+    return { filename, filePath, content };
+  }
+
+  const urls = [...new Set(captures.map((c: any) => c.url).filter(Boolean))];
+  const groups: Record<string, any[]> = {};
+  captures.forEach((c: any) => {
+    const g = c.group || 'General';
+    if (!groups[g]) groups[g] = [];
+    groups[g].push(c);
+  });
+  const groupNames = Object.keys(groups);
+
+  const L: string[] = [];
+  L.push(`# Generado por Grabador de Localizadores Playwright v4.0`);
+  L.push(`# ${timestamp}`);
+  L.push(`# Total: ${captures.length} pasos en ${groupNames.length} grupo(s)`);
+  L.push('');
+  L.push('Feature: Flujo capturado');
+  L.push('  Como usuario del ERP Siesa');
+  L.push('  Quiero ejecutar el flujo capturado');
+  L.push('  Para validar que los elementos funcionan correctamente');
+  L.push('');
+
+  L.push('  Scenario: Validar elementos capturados');
+
+  if (urls.length > 0) {
+    L.push(`    Given I navigate to "${urls[0]}"`);
+    L.push('');
+  }
+
+  let stepIndex = 0;
+  groupNames.forEach((groupName) => {
+    L.push(`    # ── ${groupName} ──`);
+    groups[groupName].forEach((c: any) => {
+      const sel = c.bestLocator;
+      const keyword = stepIndex === 0 ? 'When' : 'And';
+      const desc = c.autoId || c.title || c.text?.substring(0, 40) || c.tag;
+
+      if (c.actionType === 'click') {
+        L.push(`    ${keyword} I click on "${desc}"    # ${sel}`);
+      } else if (c.actionType === 'fill') {
+        const val = c.actionValue || 'valor';
+        L.push(`    ${keyword} I fill "${desc}" with "${val}"    # ${sel}`);
+      } else if (c.actionType === 'select') {
+        const val = c.actionValue || '';
+        L.push(`    ${keyword} I select "${val}" from "${desc}"    # ${sel}`);
+      } else if (c.actionType === 'assert') {
+        // v4: assertion capturada
+        if (c.assertionType === 'text') {
+          L.push(`    Then el elemento "${desc}" debe mostrar "${c.assertionValue || ''}"    # ${sel}`);
+        } else if (c.assertionType === 'value') {
+          L.push(`    Then el elemento "${desc}" debe tener valor "${c.assertionValue || ''}"    # ${sel}`);
+        } else {
+          L.push(`    Then el elemento "${desc}" debe ser visible    # ${sel}`);
+        }
+      } else if (c.actionType === 'screenshot') {
+        // v4: visual baseline
+        L.push(`    And se captura screenshot de verificacion visual    # ${c.screenshotFile || 'step-' + c.num + '.png'}`);
+      } else {
+        L.push(`    ${keyword} I see "${desc}"    # ${sel}`);
+      }
+      stepIndex++;
+    });
+    L.push('');
+  });
+
+  // Then final — verificar último elemento visible
+  const lastCapture = captures[captures.length - 1];
+  const lastDesc = lastCapture.autoId || lastCapture.title || lastCapture.text?.substring(0, 40) || lastCapture.tag;
+  L.push(`    Then "${lastDesc}" should be visible    # ${lastCapture.bestLocator}`);
+  L.push('');
+
+  const content = L.join('\n');
+  const filePath = saveLocatorFile(filename, content);
+  return { filename, filePath, content };
+}
+
+// ─── Overlay JS (cargado desde archivo separado) ────────────────
+const OVERLAY_JS = fs.readFileSync(
+  path.join(__dirname, 'locator-overlay.js'),
+  'utf-8'
+);
+
+// ─── Test principal ─────────────────────────────────────────────
+test.describe('Grabador de Localizadores', () => {
+  let page: Page;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+
+    // Exponer funciones Node.js al navegador para guardado fiable
+    await page.exposeFunction(
+      '__lrSaveJSON',
+      (json: string) => {
+        const timestamp = new Date().toISOString();
+        const filename = `locators-${timestamp
+          .slice(0, 19)
+          .replace(/:/g, '-')}.json`;
+        const formatted = JSON.stringify(JSON.parse(json), null, 2);
+        const filePath = saveLocatorFile(filename, formatted);
+        return { filename, filePath };
+      }
+    );
+
+    // Helper: wraps generator to catch errors and return a safe result
+    function safeGenerate<T extends { filename: string; filePath: string; content: string }>(
+      name: string,
+      ext: string,
+      fn: (captures: any[]) => T,
+      json: string
+    ): T {
+      try {
+        return fn(JSON.parse(json));
+      } catch (e: any) {
+        console.error(`[LR] Error in ${name}:`, e.message, e.stack);
+        return { filename: `error${ext}`, filePath: '', content: `// Error generando ${name}: ${e.message}` } as T;
+      }
+    }
+
+    await page.exposeFunction(
+      '__lrGenerateTS',
+      (json: string) => safeGenerate('generatePlaywrightTS', '.ts', generatePlaywrightTS, json)
+    );
+
+    await page.exposeFunction(
+      '__lrGenerateRobot',
+      (json: string) => safeGenerate('generateRobotSelenium', '.robot', generateRobotSelenium, json)
+    );
+
+    await page.exposeFunction(
+      '__lrGeneratePwPy',
+      (json: string) => safeGenerate('generatePlaywrightPython', '.py', generatePlaywrightPython, json)
+    );
+
+    await page.exposeFunction(
+      '__lrGenerateCypress',
+      (json: string) => safeGenerate('generateCypress', '.cy.js', generateCypress, json)
+    );
+
+    await page.exposeFunction(
+      '__lrGenerateGherkin',
+      (json: string) => safeGenerate('generateGherkin', '.feature', generateGherkin, json)
+    );
+
+    await page.exposeFunction(
+      '__lrGenerateCSV',
+      (json: string) => safeGenerate('generateCSV', '.csv', generateCSV, json)
+    );
+
+    // ── v4: Mejora 2 — capturar screenshot de pagina completa ──
+    await page.exposeFunction('__lrCaptureScreenshot', async (stepNum: number) => {
+      fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+      const filename = `step-${stepNum}.png`;
+      const filePath = path.join(SCREENSHOTS_DIR, filename);
+      await page.screenshot({ path: filePath, fullPage: true });
+      console.log(`[LR] Screenshot guardado: ${filePath}`);
+      return { filename, filePath };
+    });
+
+    // ── v4: Mejora 3 — modulos reutilizables ──
+    await page.exposeFunction('__lrSaveModule', (json: string) => {
+      fs.mkdirSync(MODULES_DIR, { recursive: true });
+      const mod = JSON.parse(json);
+      const safeName = String(mod.name || 'modulo').replace(/[^a-zA-Z0-9_-]/g, '-');
+      const filename = `${safeName}.json`;
+      const filePath = path.join(MODULES_DIR, filename);
+      fs.writeFileSync(filePath, JSON.stringify(mod, null, 2), 'utf-8');
+      console.log(`[LR] Modulo guardado: ${filePath}`);
+      return { filename, filePath };
+    });
+
+    await page.exposeFunction('__lrListModules', () => {
+      if (!fs.existsSync(MODULES_DIR)) return JSON.stringify([]);
+      const modules = fs
+        .readdirSync(MODULES_DIR)
+        .filter((f) => f.endsWith('.json'))
+        .map((f) => {
+          try {
+            const mod = JSON.parse(fs.readFileSync(path.join(MODULES_DIR, f), 'utf-8'));
+            return {
+              name: mod.name || f.replace(/\.json$/, ''),
+              displayName: mod.displayName || mod.name || f.replace(/\.json$/, ''),
+              description: mod.description || '',
+              stepCount: mod.stepCount || (mod.captures ? mod.captures.length : 0),
+            };
+          } catch {
+            return null;
+          }
+        })
+        .filter(Boolean);
+      return JSON.stringify(modules);
+    });
+
+    await page.exposeFunction('__lrLoadModule', (name: string) => {
+      const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, '-');
+      const filePath = path.join(MODULES_DIR, `${safeName}.json`);
+      if (!fs.existsSync(filePath)) throw new Error(`Modulo no encontrado: ${safeName}`);
+      return fs.readFileSync(filePath, 'utf-8');
+    });
+
+    // PORTAL_LOGIN=1 para Portal de Empleo (pre-load + login automatico)
+    // SKIP_LOGIN=1 para portales públicos (no requieren login ERP)
+    if (process.env.PORTAL_LOGIN === '1' && process.env.PORTAL_URL) {
+      await loginPortal(page);
+    } else if ((process.env.SKIP_LOGIN || '').trim() !== '1') {
+      await login(page);
+    }
+  });
+
+  test.afterAll(async () => {
+    // No cerrar — el usuario navega manualmente
+  });
+
+  test('Iniciar grabador interactivo', async () => {
+    // Navegar a URL inicial si se especificó via env var
+    const startUrl = process.env.START_URL;
+    const skipLogin = (process.env.SKIP_LOGIN || '').trim() === '1';
+    if (startUrl) {
+      await page.goto(startUrl);
+      await page.waitForLoadState('domcontentloaded');
+      await page.waitForTimeout(2000);
+    } else if (skipLogin) {
+      await page.goto('https://www.google.com');
+      await page.waitForLoadState('domcontentloaded');
+    }
+
+    // Inyectar overlay
+    await page.evaluate(OVERLAY_JS);
+
+    console.log(
+      '\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550'
+    );
+    console.log('  GRABADOR DE LOCALIZADORES v4.0 \u2014 ACTIVO');
+    console.log(
+      '\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550'
+    );
+    console.log('  Grabar       \u2192 captura automatica de clicks/fills/selects');
+    console.log('  Ctrl+Click   \u2192 captura manual (modo inspeccion)');
+    console.log('  Shift+Click  \u2192 capturar elemento + hijos');
+    console.log('  Clic derecho \u2192 assertion (texto/existe/valor) [solo grabando]');
+    console.log('  Screenshot   \u2192 captura visual baseline (toHaveScreenshot)');
+    console.log('  Modulos      \u2192 guardar/insertar secuencias reutilizables');
+    console.log('  Hover        \u2192 ver localizadores del elemento');
+    console.log('  Escape       \u2192 minimizar/restaurar panel');
+    console.log('  Grupo        \u2192 agrupa capturas para el export TS');
+    console.log('  Panel        \u2192 Detectar / Exportar / Copiar');
+    console.log(
+      '\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550'
+    );
+    console.log(`  Archivos se guardan en: ${OUTPUT_DIR}`);
+    console.log(
+      '\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n'
+    );
+
+    // Re-inyectar overlay despues de cada navegacion
+    page.on('load', async () => {
+      try {
+        await page.waitForTimeout(1000);
+        await page.evaluate(OVERLAY_JS);
+        console.log('[LR] Overlay re-inyectado tras navegacion');
+      } catch {
+        /* pagina cerrada */
+      }
+    });
+
+    // Mantener el navegador abierto 1 hora
+    await page.waitForTimeout(3_600_000);
+  });
+});