skopix 2.0.42 → 2.0.44

package/cli/commands/dashboard.js

@@ -3978,6 +3978,8 @@ async function startStepTester(testerId, url, selector, mode, steps) {
                   border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">▶ Next</button>
                 <button id="__skopix_run_all" style="background:#f59e0b;border:none;color:#000;
                   border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace;font-weight:700">▶▶ All</button>
+                <button id="__skopix_stop_preview" style="background:transparent;border:1px solid #374151;color:#9ca3af;
+                  border-radius:6px;padding:4px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
               </div>
             </div>
             <div id="__skopix_preview_status" style="color:#9ca3af;font-size:11px">Navigate to start, then click Run</div>
@@ -4023,6 +4025,11 @@ async function startStepTester(testerId, url, selector, mode, steps) {
           if (window.__skopixPreviewRunAll) window.__skopixPreviewRunAll({ fromIndex: window.__skopixPreviewCurrentStep });
         });
 
+        document.getElementById('__skopix_stop_preview').addEventListener('click', (e) => {
+          e.stopPropagation();
+          if (window.__skopixStopPreview) window.__skopixStopPreview({});
+        });
+
         window.__skopixUpdatePreview = (index, result, status) => {
           window.__skopixPreviewResults[index] = result;
           if (result && result.passed) window.__skopixPreviewCurrentStep = index + 1;
@@ -4076,6 +4083,11 @@ async function startStepTester(testerId, url, selector, mode, steps) {
       }
     });
 
+    await ctx.exposeFunction('__skopixStopPreview', async () => {
+      try { await browser.close(); } catch {}
+      stepTesterSessions.delete(testerId);
+    });
+
   } else {
     // STEP TESTER MODE — single step toolbar
     await ctx.addInitScript((sel) => {
@@ -4112,6 +4124,8 @@ async function startStepTester(testerId, url, selector, mode, steps) {
             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>
+          <button id="__skopix_stop" style="background:transparent;border:1px solid #374151;color:#9ca3af;
+            border-radius:6px;padding:5px 10px;cursor:pointer;font-size:11px;font-family:monospace">✕ Stop</button>
         `;
         document.body.appendChild(tb);
         document.getElementById('__skopix_action').addEventListener('change', function() {
@@ -4126,27 +4140,52 @@ async function startStepTester(testerId, url, selector, mode, steps) {
           document.getElementById('__skopix_result').textContent = '⏳';
           if (window.__skopixTesterRun) window.__skopixTesterRun({ sel, action, value });
         });
+        document.getElementById('__skopix_stop').addEventListener('click', function(e) {
+          e.stopPropagation();
+          if (window.__skopixTesterStop) window.__skopixTesterStop({});
+        });
       });
     }, selector || '');
 
     await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
       const result = await executeStepTesterAction(page, { selector: sel, action, value });
-      await page.evaluate((r, sel) => {
+      // Update toolbar via exposeFunction callback — more reliable than evaluate
+      await page.evaluate((passed, errMsg) => {
         const el = document.getElementById('__skopix_result');
-        if (el) el.textContent = r.passed ? '✓' : '✗';
+        if (el) {
+          el.textContent = passed ? '✓' : '✗';
+          el.style.color = passed ? '#34d399' : '#ef4444';
+        }
+      }, result.passed, result.error || '').catch(async () => {
+        // If evaluate fails (e.g. page navigated), wait and retry once
+        await new Promise(r => setTimeout(r, 500));
+        await page.evaluate((passed) => {
+          const el = document.getElementById('__skopix_result');
+          if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
+        }, result.passed).catch(() => {});
+      });
+      // Highlight element
+      await page.evaluate((passed, sel) => {
         try {
           const target = document.querySelector(sel);
           if (target) {
             const orig = target.style.outline;
-            target.style.outline = r.passed ? '3px solid #34d399' : '3px solid #ef4444';
+            target.style.outline = passed ? '3px solid #34d399' : '3px solid #ef4444';
             setTimeout(() => { target.style.outline = orig; }, 1500);
           }
         } catch {}
-      }, result, sel);
+      }, result.passed, sel).catch(() => {});
+    });
+
+    await ctx.exposeFunction('__skopixTesterStop', async () => {
+      try { await browser.close(); } catch {}
+      stepTesterSessions.delete(testerId);
     });
   }
 
   if (url) await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 }).catch(() => {});
+  // Ensure toolbar is injected on first page (DOMContentLoaded may have already fired)
+  await page.evaluate(() => { if (window.__skopixTesterSelector !== undefined && !document.getElementById('__skopix_tester') && !document.getElementById('__skopix_preview')) { document.dispatchEvent(new Event('DOMContentLoaded')); } }).catch(() => {});
   stepTesterSessions.set(testerId, { browser, ctx, page });
 }
 

package/package.json

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