skopix 2.0.60 → 2.0.61

package/cli/commands/dashboard.js

@@ -3952,6 +3952,36 @@ async function startStepTester(testerId, url, selector, mode, steps) {
   const page = await ctx.newPage();
 
   if (mode === 'preview' && steps && steps.length > 0) {
+    // Register expose functions FIRST before addInitScript so they're available on DOMContentLoaded
+    await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
+      const s = steps[index];
+      if (!s) return;
+      await page.evaluate((i, status) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, index, `Running step ${index+1}/${steps.length}...`).catch(()=>{});
+      const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+      await page.evaluate((i, r, total) => {
+        if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `✓ Step ${i+1} passed`) : `✗ Step ${i+1} failed`);
+      }, index, result, steps.length).catch(()=>{});
+    });
+
+    await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
+      for (let i = fromIndex; i < steps.length; i++) {
+        const s = steps[i];
+        await page.evaluate((i, total) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, i, steps.length).catch(()=>{});
+        const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
+        await page.evaluate((i, r, total) => {
+          if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`);
+        }, i, result, steps.length).catch(()=>{});
+        if (!result.passed) break;
+        await new Promise(r => setTimeout(r, 400));
+      }
+    });
+
+    await ctx.exposeFunction('__skopixStopPreview', async () => {
+      try { await browser.close(); } catch {}
+      stepTesterSessions.delete(testerId);
+    });
+
+    // THEN inject toolbar via addInitScript
     // PREVIEW MODE — inject steps list toolbar
     await ctx.addInitScript((stepsData) => {
       window.__skopixPreviewSteps = stepsData;
@@ -4059,37 +4089,38 @@ async function startStepTester(testerId, url, selector, mode, steps) {
       });
     }, steps.map(s => ({ action: s.action, selector: s.stableSelector||s.selector||'', description: s.description||s.action, value: s.value||'' })));
 
-    // Expose run functions
-    await ctx.exposeFunction('__skopixPreviewRun', async ({ index }) => {
-      const s = steps[index];
-      if (!s) return;
-      await page.evaluate((i, status) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, status); }, index, `Running step ${index+1}/${steps.length}...`);
-      const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
-      await page.evaluate((i, r, total) => {
-        if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `✓ Step ${i+1} passed`) : `✗ Step ${i+1} failed`);
-      }, index, result, steps.length);
-    });
-
-    await ctx.exposeFunction('__skopixPreviewRunAll', async ({ fromIndex }) => {
-      for (let i = fromIndex; i < steps.length; i++) {
-        const s = steps[i];
-        await page.evaluate((i, total) => { if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, null, `Running step ${i+1}/${total}...`); }, i, steps.length);
-        const result = await executeStepTesterAction(page, { selector: s.stableSelector||s.selector, action: s.action, value: s.value||'', assertType: s.assertType });
-        await page.evaluate((i, r, total) => {
-          if(window.__skopixUpdatePreview) window.__skopixUpdatePreview(i, r, r.passed ? (i+1 >= total ? `✓ All ${total} steps passed!` : `Running...`) : `✗ Step ${i+1} failed — fix and retry`);
-        }, i, result, steps.length);
-        if (!result.passed) break;
-        await new Promise(r => setTimeout(r, 400));
-      }
+  } else {
+    // STEP TESTER MODE — register expose functions FIRST
+    await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
+      const result = await executeStepTesterAction(page, { selector: sel, action, value });
+      await page.evaluate((passed, errMsg) => {
+        const el = document.getElementById('__skopix_result');
+        if (el) { el.textContent = passed ? '✓' : '✗'; el.style.color = passed ? '#34d399' : '#ef4444'; }
+      }, result.passed, result.error || '').catch(async () => {
+        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(() => {});
+      });
+      await page.evaluate((passed, sel) => {
+        try {
+          const target = document.querySelector(sel);
+          if (target) {
+            const orig = target.style.outline;
+            target.style.outline = passed ? '3px solid #34d399' : '3px solid #ef4444';
+            setTimeout(() => { target.style.outline = orig; }, 1500);
+          }
+        } catch {}
+      }, result.passed, sel).catch(() => {});
     });
 
-    await ctx.exposeFunction('__skopixStopPreview', async () => {
+    await ctx.exposeFunction('__skopixTesterStop', async () => {
       try { await browser.close(); } catch {}
       stepTesterSessions.delete(testerId);
     });
 
-  } else {
-    // STEP TESTER MODE — single step toolbar
+    // THEN inject toolbar
     await ctx.addInitScript((sel) => {
       window.__skopixTesterSelector = sel;
       document.addEventListener('DOMContentLoaded', () => {
@@ -4146,41 +4177,6 @@ async function startStepTester(testerId, url, selector, mode, steps) {
         });
       });
     }, selector || '');
-
-    await ctx.exposeFunction('__skopixTesterRun', async ({ sel, action, value }) => {
-      const result = await executeStepTesterAction(page, { selector: sel, action, value });
-      // Update toolbar via exposeFunction callback — more reliable than evaluate
-      await page.evaluate((passed, errMsg) => {
-        const el = document.getElementById('__skopix_result');
-        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 = passed ? '3px solid #34d399' : '3px solid #ef4444';
-            setTimeout(() => { target.style.outline = orig; }, 1500);
-          }
-        } catch {}
-      }, 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(() => {});

package/package.json

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