skopix 2.0.38 → 2.0.39

package/cli/commands/dashboard.js

@@ -1811,6 +1811,25 @@ export async function dashboardCommand(options) {
         sendJSON(res, 200, result);
         return;
       }
+      if (pathname.match(/^\/api\/step-tester\/[^/]+\/run-sequence$/) && method === 'POST') {
+        const testerId = pathname.split('/')[3];
+        const { steps } = JSON.parse(await readBody(req));
+        const session = stepTesterSessions.get(testerId);
+        if (!session) { sendJSON(res, 404, { error: 'Session not found' }); return; }
+        // Run steps one at a time, streaming results via SSE
+        res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*' });
+        for (let i = 0; i < steps.length; i++) {
+          const step = steps[i];
+          res.write(`data: ${JSON.stringify({ type: 'step-start', index: i })}\n\n`);
+          const result = await executeStepTesterAction(session.page, step);
+          res.write(`data: ${JSON.stringify({ type: 'step-result', index: i, ...result })}\n\n`);
+          if (!result.passed) break; // stop on first failure
+          await new Promise(r => setTimeout(r, 300)); // small gap between steps
+        }
+        res.write(`data: ${JSON.stringify({ type: 'done' })}\n\n`);
+        res.end();
+        return;
+      }
       if (pathname.match(/^\/api\/step-tester\/[^/]+\/stop$/) && method === 'POST') {
         const testerId = pathname.split('/')[3];
         await stopStepTester(testerId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.38",
+  "version": "2.0.39",
   "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

@@ -1681,6 +1681,10 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
         <div style="display:flex;gap:8px;align-items:center">
           <input class="form-input" id="builder-test-name" type="text" placeholder="Test name..." style="width:220px">
+          <button class="btn btn-ghost" id="btn-preview-test" onclick="startBuilderPreview()" style="color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            Preview
+          </button>
           <button class="btn btn-primary" onclick="saveBuiltTest()">Save test</button>
         </div>
       </div>
@@ -1704,7 +1708,7 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         </div>
 
         <!-- RIGHT: Test steps being built -->
-        <div style="display:flex;flex-direction:column;overflow:hidden">
+        <div style="display:flex;flex-direction:column;overflow:hidden;position:relative">
           <div style="padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between">
             <div>
               <div style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">TEST STEPS</div>
@@ -1720,6 +1724,36 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
               ← Click steps from the library to add them here
             </div>
           </div>
+
+          <!-- PREVIEW OVERLAY -->
+          <div id="builder-preview-overlay" style="display:none;position:absolute;inset:0;background:var(--bg);flex-direction:column;z-index:10">
+            <div style="padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;background:rgba(245,158,11,0.06)">
+              <div style="display:flex;align-items:center;gap:10px">
+                <span style="color:#f59e0b;font-size:14px" id="preview-status-dot">⏸</span>
+                <div>
+                  <div style="font-family:var(--mono);font-size:10px;color:#f59e0b;letter-spacing:0.1em">PREVIEW MODE</div>
+                  <div style="font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px" id="preview-status-text">Browser open — ready to run</div>
+                </div>
+              </div>
+              <div style="display:flex;gap:8px">
+                <button class="btn btn-ghost" id="btn-preview-run-all" onclick="previewRunAll()" style="font-size:11px;padding:4px 12px;color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+                  ▶▶ Run all
+                </button>
+                <button class="btn btn-ghost" id="btn-preview-run-next" onclick="previewRunNext()" style="font-size:11px;padding:4px 12px;color:#f59e0b;border-color:rgba(245,158,11,0.3)">
+                  ▶ Run next
+                </button>
+                <button class="btn btn-ghost" onclick="stopBuilderPreview()" style="font-size:11px;padding:4px 10px">
+                  ✕ Stop preview
+                </button>
+              </div>
+            </div>
+            <div id="preview-steps-list" style="overflow-y:auto;flex:1;padding:8px 0"></div>
+            <div style="padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:10px" id="preview-summary" style="display:none">
+              <span id="preview-passed" style="font-family:var(--mono);font-size:12px;color:#34d399"></span>
+              <span id="preview-failed" style="font-family:var(--mono);font-size:12px;color:#ef4444"></span>
+            </div>
+          </div>
+
         </div>
 
       </div>
@@ -6083,9 +6117,14 @@ function openTestBuilder() {
 }
 
 function closeTestBuilder() {
+  // Stop preview if active
+  if (previewState.testerId) {
+    fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/stop', { method: 'POST' }).catch(() => {});
+    previewState.testerId = null;
+  }
+  document.getElementById('builder-preview-overlay').style.display = 'none';
   const builder = document.getElementById('view-test-builder');
   if (builder) builder.style.display = 'none';
-  // Restore all views to their default display state before switching
   document.querySelectorAll('.view').forEach(v => {
     if (v.id !== 'view-test-builder') v.style.display = '';
   });
@@ -6382,6 +6421,204 @@ function harvestAnother() {
   document.getElementById('harvester-status').textContent = 'Navigate to the next element, then click Capture.';
 }
 
+// ── TEST BUILDER PREVIEW ─────────────────────────────────────────────────────
+let previewState = { testerId: null, currentStep: 0, results: [], running: false };
+
+function renderPreviewSteps() {
+  const container = document.getElementById('preview-steps-list');
+  if (!container) return;
+  const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+
+  container.innerHTML = builderSteps.map((s, i) => {
+    const result = previewState.results[i];
+    const isCurrent = i === previewState.currentStep && !result;
+    const status = result ? (result.passed ? '✓' : '✗') : (isCurrent ? '▶' : '○');
+    const statusColor = result ? (result.passed ? '#34d399' : '#ef4444') : (isCurrent ? '#f59e0b' : 'var(--muted2)');
+    const bg = isCurrent ? 'rgba(245,158,11,0.06)' : result && !result.passed ? 'rgba(239,68,68,0.04)' : '';
+    return `<div style="display:flex;align-items:flex-start;gap:12px;padding:10px 20px;border-bottom:1px solid var(--border);background:${bg}">
+      <span style="font-family:var(--mono);font-size:13px;color:${statusColor};min-width:20px;margin-top:1px">${status}</span>
+      <div style="flex:1;min-width:0">
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="font-family:var(--mono);font-size:10px;color:${actionColors[s.action]||'var(--muted)'}">${s.action}</span>
+          <span style="font-size:12px;color:var(--text)">${escapeHtml(s.description||'')}</span>
+        </div>
+        <code style="font-size:10px;color:var(--muted2)">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+        ${result && !result.passed ? `<div style="font-family:var(--mono);font-size:11px;color:#ef4444;margin-top:4px">✗ ${escapeHtml(result.error||'Failed')}</div>` : ''}
+        ${result && result.screenshot ? `<img src="data:image/jpeg;base64,${result.screenshot}" style="width:100%;max-width:300px;border-radius:6px;margin-top:8px;border:1px solid var(--border)" loading="lazy">` : ''}
+      </div>
+    </div>`;
+  }).join('');
+
+  // Scroll current step into view
+  const items = container.querySelectorAll('div[style*="border-bottom"]');
+  if (items[previewState.currentStep]) items[previewState.currentStep].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+function updatePreviewSummary() {
+  const passed = previewState.results.filter(r => r && r.passed).length;
+  const failed = previewState.results.filter(r => r && !r.passed).length;
+  const total = previewState.results.filter(r => r).length;
+  if (total === 0) return;
+  document.getElementById('preview-passed').textContent = `✓ ${passed} passed`;
+  document.getElementById('preview-failed').textContent = failed > 0 ? `✗ ${failed} failed` : '';
+  document.getElementById('preview-summary').style.display = 'flex';
+}
+
+async function startBuilderPreview() {
+  const url = document.getElementById('builder-url')?.value?.trim();
+  if (builderSteps.length === 0) { showToast('Add steps first'); return; }
+  if (!url) { showToast('Set a start URL first'); document.getElementById('builder-url').focus(); return; }
+
+  const btn = document.getElementById('btn-preview-test');
+  btn.disabled = true;
+  btn.textContent = 'Opening...';
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-tester/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, selector: builderSteps[0]?.stableSelector || '' }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Failed');
+
+    previewState = { testerId: data.testerId, currentStep: 0, results: [], running: false };
+
+    // Show overlay
+    document.getElementById('builder-preview-overlay').style.display = 'flex';
+    document.getElementById('preview-status-text').textContent = 'Browser open — navigate to start, then click Run next or Run all';
+    document.getElementById('preview-summary').style.display = 'none';
+    renderPreviewSteps();
+    btn.textContent = '⏸ Previewing';
+  } catch (err) {
+    showToast('Error: ' + err.message);
+    btn.disabled = false;
+    btn.textContent = 'Preview';
+  }
+}
+
+async function stopBuilderPreview() {
+  if (previewState.testerId) {
+    await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/stop', { method: 'POST' }).catch(() => {});
+    previewState.testerId = null;
+  }
+  document.getElementById('builder-preview-overlay').style.display = 'none';
+  const btn = document.getElementById('btn-preview-test');
+  btn.disabled = false;
+  btn.textContent = 'Preview';
+}
+
+async function previewRunNext() {
+  if (!previewState.testerId || previewState.running) return;
+  if (previewState.currentStep >= builderSteps.length) return;
+
+  previewState.running = true;
+  const step = builderSteps[previewState.currentStep];
+  document.getElementById('preview-status-text').textContent = `Running step ${previewState.currentStep + 1}/${builderSteps.length}...`;
+  document.getElementById('btn-preview-run-next').disabled = true;
+  document.getElementById('btn-preview-run-all').disabled = true;
+  renderPreviewSteps();
+
+  try {
+    const res = await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/run', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ selector: step.stableSelector || step.selector, action: step.action, value: step.value || '', assertType: step.assertType }),
+    });
+    const result = await res.json();
+    previewState.results[previewState.currentStep] = result;
+
+    if (result.passed) {
+      previewState.currentStep++;
+      document.getElementById('preview-status-text').textContent =
+        previewState.currentStep >= builderSteps.length
+          ? `✓ All ${builderSteps.length} steps passed!`
+          : `✓ Step ${previewState.currentStep} passed — ready for next`;
+      document.getElementById('preview-status-dot').textContent = previewState.currentStep >= builderSteps.length ? '✓' : '⏸';
+      document.getElementById('preview-status-dot').style.color = previewState.currentStep >= builderSteps.length ? '#34d399' : '#f59e0b';
+    } else {
+      document.getElementById('preview-status-text').textContent = `✗ Step ${previewState.currentStep + 1} failed — fix the step and try again`;
+      document.getElementById('preview-status-dot').textContent = '✗';
+      document.getElementById('preview-status-dot').style.color = '#ef4444';
+    }
+  } catch (err) {
+    previewState.results[previewState.currentStep] = { passed: false, error: err.message };
+  }
+
+  previewState.running = false;
+  document.getElementById('btn-preview-run-next').disabled = previewState.currentStep >= builderSteps.length;
+  document.getElementById('btn-preview-run-all').disabled = false;
+  renderPreviewSteps();
+  updatePreviewSummary();
+}
+
+async function previewRunAll() {
+  if (!previewState.testerId || previewState.running) return;
+  previewState.running = true;
+  previewState.results = [];
+  previewState.currentStep = 0;
+  document.getElementById('btn-preview-run-all').disabled = true;
+  document.getElementById('btn-preview-run-next').disabled = true;
+  document.getElementById('preview-summary').style.display = 'none';
+
+  const steps = builderSteps.map(s => ({
+    selector: s.stableSelector || s.selector,
+    action: s.action,
+    value: s.value || '',
+    assertType: s.assertType,
+  }));
+
+  try {
+    const es = new EventSource(API_BASE + '/api/step-tester/' + previewState.testerId + '/run-sequence?' + new URLSearchParams({ steps: JSON.stringify(steps) }));
+
+    // Use POST with EventSource workaround — send steps via a separate POST then listen
+    const res = await fetch(API_BASE + '/api/step-tester/' + previewState.testerId + '/run-sequence', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ steps }),
+    });
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop();
+      for (const line of lines) {
+        if (!line.startsWith('data: ')) continue;
+        try {
+          const msg = JSON.parse(line.slice(6));
+          if (msg.type === 'step-start') {
+            previewState.currentStep = msg.index;
+            document.getElementById('preview-status-text').textContent = `Running step ${msg.index + 1}/${builderSteps.length}...`;
+            renderPreviewSteps();
+          } else if (msg.type === 'step-result') {
+            previewState.results[msg.index] = { passed: msg.passed, error: msg.error, screenshot: msg.screenshot };
+            previewState.currentStep = msg.passed ? msg.index + 1 : msg.index;
+            renderPreviewSteps();
+            updatePreviewSummary();
+          } else if (msg.type === 'done') {
+            const allPassed = previewState.results.every(r => r && r.passed);
+            document.getElementById('preview-status-text').textContent = allPassed ? `✓ All ${builderSteps.length} steps passed!` : `✗ Preview complete — some steps failed`;
+            document.getElementById('preview-status-dot').textContent = allPassed ? '✓' : '✗';
+            document.getElementById('preview-status-dot').style.color = allPassed ? '#34d399' : '#ef4444';
+          }
+        } catch {}
+      }
+    }
+  } catch (err) {
+    document.getElementById('preview-status-text').textContent = 'Error: ' + err.message;
+  }
+
+  previewState.running = false;
+  document.getElementById('btn-preview-run-all').disabled = false;
+  document.getElementById('btn-preview-run-next').disabled = previewState.currentStep >= builderSteps.length;
+}
+
 // ── SUITE TEST PICKER ────────────────────────────────────────────────────────
 function openSuiteTestPicker() {
   const list = document.getElementById('stp-test-list');