skopix 2.0.35 → 2.0.37

package/cli/commands/dashboard.js

@@ -1794,6 +1794,30 @@ export async function dashboardCommand(options) {
         return;
       }
 
+      // ─── STEP TESTER ───────────────────────────────────────────────────
+      if (pathname === '/api/step-tester/start' && method === 'POST') {
+        const { url, selector } = JSON.parse(await readBody(req));
+        try {
+          const testerId = Math.random().toString(36).slice(2, 10);
+          await startStepTester(testerId, url, selector);
+          sendJSON(res, 200, { testerId });
+        } catch (err) { sendJSON(res, 500, { error: err.message }); }
+        return;
+      }
+      if (pathname.match(/^\/api\/step-tester\/[^/]+\/run$/) && method === 'POST') {
+        const testerId = pathname.split('/')[3];
+        const { selector, action, value, assertType } = JSON.parse(await readBody(req));
+        const result = await runStepTesterAction(testerId, { selector, action, value, assertType });
+        sendJSON(res, 200, result);
+        return;
+      }
+      if (pathname.match(/^\/api\/step-tester\/[^/]+\/stop$/) && method === 'POST') {
+        const testerId = pathname.split('/')[3];
+        await stopStepTester(testerId);
+        sendJSON(res, 200, { stopped: true });
+        return;
+      }
+
       // ─── STEP LIBRARY ──────────────────────────────────────────────────
       if (pathname === '/api/step-library' && method === 'GET') {
         sendJSON(res, 200, await listLibrarySteps(suitesDir));
@@ -3784,3 +3808,136 @@ async function syncTestsToLibrary(suitesDir) {
   }
   return { synced, updated };
 }
+
+// ═══════════════════════════════════════════════════════════════
+// STEP TESTER — live browser step testing
+// ═══════════════════════════════════════════════════════════════
+
+const stepTesterSessions = new Map(); // testerId -> { browser, ctx, page }
+
+async function startStepTester(testerId, url, selector) {
+  const { chromium } = await import('playwright');
+  const browser = await chromium.launch({ headless: false, args: ['--no-sandbox'] });
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+  const page = await ctx.newPage();
+
+  // Inject the tester toolbar on every page load
+  await ctx.addInitScript((sel) => {
+    window.__skopixTesterSelector = sel;
+    document.addEventListener('DOMContentLoaded', () => {
+      if (document.getElementById('__skopix_tester')) return;
+      const tb = document.createElement('div');
+      tb.id = '__skopix_tester';
+      tb.style.cssText = [
+        'position:fixed', 'bottom:20px', 'left:50%', 'transform:translateX(-50%)',
+        'z-index:2147483647', 'background:#0f1117', 'border:1px solid #f59e0b',
+        'border-radius:12px', 'padding:12px 16px', 'display:flex', 'align-items:center',
+        'gap:10px', 'font-family:monospace', 'font-size:12px', 'color:#e5e7eb',
+        'box-shadow:0 4px 24px rgba(0,0,0,0.7)', 'min-width:400px',
+      ].join(';');
+      tb.innerHTML = `
+        <span style="color:#f59e0b;font-size:14px">⚡</span>
+        <span style="color:#9ca3af;font-size:11px">STEP TESTER</span>
+        <input id="__skopix_sel" value="${(sel||'').replace(/"/g,'&quot;')}" placeholder="selector..."
+          style="flex:1;background:#1a1d2e;border:1px solid #374151;border-radius:6px;padding:4px 8px;
+          color:#e5e7eb;font-family:monospace;font-size:11px;min-width:160px">
+        <select id="__skopix_action" style="background:#1a1d2e;border:1px solid #374151;border-radius:6px;
+          padding:4px 8px;color:#e5e7eb;font-family:monospace;font-size:11px">
+          <option value="click">click</option>
+          <option value="type">type</option>
+          <option value="check">check</option>
+          <option value="assert">assert (visible)</option>
+          <option value="assert_text">assert (text)</option>
+        </select>
+        <input id="__skopix_value" placeholder="value..." style="width:100px;background:#1a1d2e;
+          border:1px solid #374151;border-radius:6px;padding:4px 8px;color:#e5e7eb;
+          font-family:monospace;font-size:11px;display:none">
+        <button id="__skopix_run" style="background:#f59e0b;border:none;color:#000;
+          border-radius:6px;padding:5px 14px;cursor:pointer;font-size:11px;font-weight:700;
+          font-family:monospace">▶ Run</button>
+        <span id="__skopix_result" style="font-size:13px;min-width:20px"></span>
+      `;
+      document.body.appendChild(tb);
+
+      // Show/hide value input based on action
+      document.getElementById('__skopix_action').addEventListener('change', function() {
+        const needsValue = ['type','assert_text'].includes(this.value);
+        document.getElementById('__skopix_value').style.display = needsValue ? '' : 'none';
+      });
+
+      // Run button — posts to parent via window.__skopixTesterRun
+      document.getElementById('__skopix_run').addEventListener('click', function(e) {
+        e.stopPropagation();
+        const sel = document.getElementById('__skopix_sel').value.trim();
+        const action = document.getElementById('__skopix_action').value;
+        const value = document.getElementById('__skopix_value').value.trim();
+        const resultEl = document.getElementById('__skopix_result');
+        resultEl.textContent = '⏳';
+        if (window.__skopixTesterRun) {
+          window.__skopixTesterRun({ sel, action, value });
+        }
+      });
+    });
+  }, selector || '');
+
+  // Expose run function back to page
+  await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
+    const result = await executeStepTesterAction(page, { selector: sel, action, value });
+    await page.evaluate((r) => {
+      const el = document.getElementById('__skopix_result');
+      if (el) el.textContent = r.passed ? '✓' : '✗';
+      // Highlight element briefly
+      try {
+        const target = document.querySelector(r.selector);
+        if (target) {
+          const orig = target.style.outline;
+          target.style.outline = r.passed ? '3px solid #34d399' : '3px solid #ef4444';
+          setTimeout(() => { target.style.outline = orig; }, 1500);
+        }
+      } catch {}
+    }, { ...result, selector: sel });
+  });
+
+  if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
+
+  stepTesterSessions.set(testerId, { browser, ctx, page });
+}
+
+async function executeStepTesterAction(page, { selector, action, value }) {
+  try {
+    const { sanitiseSelector } = { sanitiseSelector: (s) => s }; // inline since not exported
+    const sel = selector;
+    if (action === 'click') {
+      await page.locator(sel).first().click({ timeout: 5000 });
+    } else if (action === 'type') {
+      await page.locator(sel).first().fill(value || '', { timeout: 5000 });
+    } else if (action === 'check') {
+      await page.locator(sel).first().click({ timeout: 5000 });
+    } else if (action === 'assert' || action === 'assert_text') {
+      if (action === 'assert_text') {
+        const text = await page.locator(sel).first().textContent({ timeout: 5000 });
+        if (!text.includes(value)) throw new Error(`Text "${text}" does not contain "${value}"`);
+      } else {
+        await page.locator(sel).first().waitFor({ state: 'attached', timeout: 5000 });
+      }
+    }
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
+    return { passed: true, screenshot: screenshot ? screenshot.toString('base64') : null };
+  } catch (err) {
+    const screenshot = await page.screenshot({ type: 'jpeg', quality: 70 }).catch(() => null);
+    return { passed: false, error: err.message, screenshot: screenshot ? screenshot.toString('base64') : null };
+  }
+}
+
+async function runStepTesterAction(testerId, stepData) {
+  const session = stepTesterSessions.get(testerId);
+  if (!session) return { passed: false, error: 'Session not found' };
+  return await executeStepTesterAction(session.page, stepData);
+}
+
+async function stopStepTester(testerId) {
+  const session = stepTesterSessions.get(testerId);
+  if (!session) return;
+  try { await session.browser.close(); } catch {}
+  stepTesterSessions.delete(testerId);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.35",
+  "version": "2.0.37",
   "description": "Browser-based QA tool — record tests by using your app, replay them deterministically, generate Playwright code automatically",
   "main": "cli/index.js",
   "bin": {

package/web/app/index.html

@@ -1769,6 +1769,39 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
       </div>
     </div>
+
+    <!-- STEP TESTER MODAL -->
+    <div class="modal-overlay" id="step-tester-modal" style="display:none" onclick="if(event.target===this)closeStepTester()">
+      <div class="modal" style="max-width:520px;width:100%">
+        <div class="modal-header">
+          <div class="modal-title" style="color:#f59e0b">
+            <span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:8px"></span>
+            Step tester
+          </div>
+          <button class="modal-close" onclick="closeStepTester()">✕</button>
+        </div>
+        <div class="modal-body" style="display:flex;flex-direction:column;gap:14px">
+          <p style="font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.7;margin:0">
+            Opens a browser with a floating toolbar. Navigate to where the element is, then use the toolbar to test the step directly in the browser.
+          </p>
+          <div class="form-field">
+            <label class="form-label">URL to open</label>
+            <input class="form-input" id="tester-url" type="text" placeholder="http://localhost:8224/pi">
+          </div>
+          <div class="form-field">
+            <label class="form-label">Selector</label>
+            <input class="form-input" id="tester-selector" type="text" style="font-family:var(--mono)">
+            <div class="form-help">Pre-filled from library — editable in the browser toolbar too</div>
+          </div>
+          <div id="tester-status" style="display:none;padding:12px 14px;border-radius:8px;font-family:var(--mono);font-size:12px"></div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-ghost" onclick="closeStepTester()">Close</button>
+          <button class="btn btn-primary" id="btn-open-tester" style="background:#f59e0b;border-color:#f59e0b;color:#000" onclick="openStepTesterBrowser()">Open browser</button>
+        </div>
+      </div>
+    </div>
+
     <div class="view" id="view-suites">
       <div class="topbar">
         <div>
@@ -5614,6 +5647,7 @@ function renderLibrarySteps(steps) {
             </td>
             <td style="padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--muted)">${s.usageCount||0}</td>
             <td style="padding:12px 16px;text-align:right">
+              <button class="btn btn-ghost lib-test-btn" style="padding:4px 10px;font-size:11px;margin-right:4px;color:#f59e0b;border-color:rgba(245,158,11,0.3)" data-id="${escapeAttr(s.id)}" data-selector="${escapeAttr(sel)}">Test</button>
               <button class="btn btn-ghost lib-edit-btn" style="padding:4px 10px;font-size:11px;margin-right:4px" data-id="${escapeAttr(s.id)}">Edit</button>
               <button class="btn btn-ghost lib-delete-btn" style="padding:4px 10px;font-size:11px;color:var(--red)" data-id="${escapeAttr(s.id)}" data-name="${escapeAttr(s.name||'')}">Delete</button>
             </td>
@@ -5733,10 +5767,69 @@ async function loadLibraryView() {
   renderLibrarySteps(steps);
 }
 
+// ── STEP TESTER ──────────────────────────────────────────────────────────────
+let stepTesterState = { testerId: null };
+
+function openLibraryStepTester(id, selector) {
+  const step = libraryStepsCache.find(s => s.id === id);
+  document.getElementById('tester-selector').value = selector || (step ? (step.stableSelector||step.selector||'') : '');
+  document.getElementById('tester-url').value = '';
+  document.getElementById('tester-status').style.display = 'none';
+  document.getElementById('btn-open-tester').disabled = false;
+  document.getElementById('btn-open-tester').textContent = 'Open browser';
+  document.getElementById('step-tester-modal').style.display = 'flex';
+  setTimeout(() => document.getElementById('tester-url').focus(), 100);
+}
+
+function closeStepTester() {
+  document.getElementById('step-tester-modal').style.display = 'none';
+  if (stepTesterState.testerId) {
+    fetch(API_BASE + '/api/step-tester/' + stepTesterState.testerId + '/stop', { method: 'POST' }).catch(() => {});
+    stepTesterState.testerId = null;
+  }
+}
+
+async function openStepTesterBrowser() {
+  const url = document.getElementById('tester-url').value.trim();
+  const selector = document.getElementById('tester-selector').value.trim();
+  const statusEl = document.getElementById('tester-status');
+  const btn = document.getElementById('btn-open-tester');
+
+  if (!url) { showToast('Enter a URL first'); return; }
+
+  btn.disabled = true;
+  btn.textContent = 'Opening...';
+  statusEl.style.display = 'block';
+  statusEl.style.background = 'var(--surface2)';
+  statusEl.style.color = 'var(--muted)';
+  statusEl.textContent = 'Opening browser...';
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-tester/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, selector }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Failed');
+    stepTesterState.testerId = data.testerId;
+    statusEl.textContent = '✓ Browser open — navigate to the element and use the toolbar to test';
+    statusEl.style.color = '#34d399';
+    btn.textContent = 'Browser open';
+  } catch (err) {
+    statusEl.textContent = '✗ ' + err.message;
+    statusEl.style.color = 'var(--red)';
+    btn.disabled = false;
+    btn.textContent = 'Open browser';
+  }
+}
+
 // Event delegation for library table buttons
 document.addEventListener('click', (e) => {
+  const testBtn = e.target.closest('.lib-test-btn');
   const editBtn = e.target.closest('.lib-edit-btn');
   const deleteBtn = e.target.closest('.lib-delete-btn');
+  if (testBtn) { openLibraryStepTester(testBtn.dataset.id, testBtn.dataset.selector); }
   if (editBtn) { editLibraryStep(editBtn.dataset.id); }
   if (deleteBtn) { deleteLibraryStepUI(deleteBtn.dataset.id, deleteBtn.dataset.name); }
 });