skopix 2.0.86 → 2.0.88

package/package.json

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

@@ -7370,11 +7370,27 @@ function mergeDebugSteps(newSteps) {
   });
 }
 
-function insertAndOpenEditor(stepsToInsert) {
+async function insertAndOpenEditor(stepsToInsert) {
   const insertAt = debugRecordingState.insertAfterIndex + 1;
-  reEditorState.steps.splice(insertAt, 0, ...stepsToInsert);
 
-  appendRunLine('<span style="color:var(--green)">\u2713 ' + stepsToInsert.length + ' steps inserted at position ' + (insertAt + 1) + '</span>');
+  // Process new steps through LLM for stable selectors
+  appendRunLine('<span style="color:var(--muted)">Processing new steps...</span>');
+  let processedSteps = stepsToInsert;
+  try {
+    const procRes = await fetch(API_BASE + '/api/record/process', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ steps: stepsToInsert, testName: reEditorState.testName, url: reEditorState.url }),
+    });
+    if (procRes.ok) {
+      const proc = await procRes.json();
+      processedSteps = proc.steps || stepsToInsert;
+    }
+  } catch {}
+
+  reEditorState.steps.splice(insertAt, 0, ...processedSteps);
+
+  appendRunLine('<span style="color:var(--green)">\u2713 ' + processedSteps.length + ' steps inserted at position ' + (insertAt + 1) + '</span>');
   appendRunLine('<span style="color:var(--muted)">Opening editor — review and save when ready</span>');
 
   setTimeout(() => {
@@ -7383,7 +7399,7 @@ function insertAndOpenEditor(stepsToInsert) {
     document.getElementById('re-url').value = reEditorState.url;
     document.getElementById('re-reusable').checked = reEditorState.reusable || false;
     renderReSteps();
-    showToast(stepsToInsert.length + ' steps added — review and save');
+    showToast(processedSteps.length + ' steps added — review and save');
   }, 800);
 }
 function reAddAssertion() { reAddAssertionAfter(reEditorState.steps.length-1); }
@@ -7594,7 +7610,27 @@ async function saveRecordedTest() {
   const scope=document.getElementById('results-scope').value;
   if (!name) { showToast('Please enter a test name'); return; }
   try {
-    const res=await fetch(API_BASE+'/api/record/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,scope,url:recorderState.startUrl,steps:recorderState.steps,playwrightJs:recorderState.playwrightJs,playwrightTs:recorderState.playwrightTs})});
+    // Process steps through LLM first to get stable selectors, then save
+    let steps = recorderState.steps;
+    let playwrightJs = recorderState.playwrightJs;
+    let playwrightTs = recorderState.playwrightTs;
+    if (steps && steps.length && !playwrightJs) {
+      showToast('Processing steps...');
+      try {
+        const procRes = await fetch(API_BASE + '/api/record/process', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ steps, testName: name, url: recorderState.startUrl }),
+        });
+        if (procRes.ok) {
+          const proc = await procRes.json();
+          steps = proc.steps || steps;
+          playwrightJs = proc.playwrightJs || playwrightJs;
+          playwrightTs = proc.playwrightTs || playwrightTs;
+        }
+      } catch {}
+    }
+    const res=await fetch(API_BASE+'/api/record/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name,scope,url:recorderState.startUrl,steps,playwrightJs,playwrightTs})});
     const data=await res.json();
     if (!res.ok) { showToast(data.error||'Failed'); return; }
     showToast('Saved: '+name);