skopix 2.0.87 → 2.0.89

package/cli/commands/dashboard.js

@@ -3885,6 +3885,9 @@ async function matchStepsToLibrary(suitesDir, steps) {
   const matched = steps.map(step => {
     const sSel = (step.stableSelector || step.selector || '').toLowerCase().trim();
     if (!sSel) return step;
+    // Never replace steps that already have stable selectors
+    const isStable = /pi-test-identifier|aria-label|data-testid|\[title=|has-text\(/.test(sSel);
+    if (isStable) return step;
 
     const match = library.find(lib => {
       const lSel = (lib.stableSelector || lib.selector || '').toLowerCase().trim();
@@ -3981,8 +3984,21 @@ async function syncSelectorsInternal(suitesDir, fromSelectors, toSelector, toNam
     (sel.match(/\.[a-z][a-z0-9_-]+|\[[\w-]+=["'][^"']+["']\]|#[a-z][a-z0-9_-]+/g) || []).filter(t => t.length > 5)
   );
 
+  function isStableSel(sel) {
+    if (!sel) return false;
+    if (/pi-test-identifier/.test(sel)) return true;
+    if (/aria-label/.test(sel)) return true;
+    if (/data-testid/.test(sel)) return true;
+    if (/\[title=/.test(sel)) return true;
+    if (/has-text\(/.test(sel)) return true;
+    if (/^#[a-z][a-z0-9_-]+$/i.test(sel)) return true;
+    return false;
+  }
+
   function matchesSel(sSel) {
     if (!sSel) return false;
+    // Never touch steps that already have stable selectors — prevents false matches
+    if (isStableSel(sSel)) return false;
     const sLower = sSel.toLowerCase();
     if (fromLower.includes(sLower)) return true;
     if (allFromTokens.some(tok => sLower.includes(tok))) return true;

package/core/llm.js

@@ -552,25 +552,25 @@ export async function processRecording({ steps, testName, url, provider, apiKey,
     + JSON.stringify(stepsContext, null, 2)
     + setupSection
     + '\n\nYour jobs:\n'
-    + '1. For each step, write a STABLE SELECTOR. Priority order:\n'
-    + '   - data-testid, data-test, data-cy, data-qa, pi-test-identifier attributes use [attr="value"]\n'
-    + '   - MOST IMPORTANT: If the element data contains piTestId, use [pi-test-identifier="VALUE"] as the selector — this is the most reliable selector possible. Always check piTestId first.\n'
-    + '   - If parentTestId exists and piTestId does not, use [pi-test-identifier="parentTestId"] as anchor\n'
-    + '   - title attribute — if the element has a title, use a[title="..."] or button[title="..."] — this is VERY reliable\n'
-    + '   - Unique meaningful id (NOT random/generated IDs) use #id\n'
-    + '   - Semantic selector e.g. button:has-text("Login"), input[name="email"]\n'
-    + '   - Role + text e.g. [role="button"]:has-text("Submit")\n'
-    + '   - Class-based selector for well-named classes e.g. .chart-container, .save-btn\n'
-    + '   - Fall back to the original selector if nothing better\n'
-    + '   CRITICAL RULES FOR SELECTORS:\n'
-    + '   - ONLY use attributes that ACTUALLY EXIST on the element from the captured data. NEVER invent aria-label, title, or other attributes that are not in the element info.\n'
-    + '   - For icon elements (<i>, <span> with fa/icon classes): use the PARENT title or pi-test-identifier as the anchor e.g. a[title="Create new chart"] or [pi-test-identifier="x"] i. Check parentTitle and parentTestId fields.\n'
-    + '   - NEVER use IDs that look randomly generated (e.g. #highcharts-abc123-58, #ng-view-1, anything with random hex/numbers)\n'
-    + '   - NEVER use :nth-child or :nth-of-type positional selectors\n'
-    + '   - For chart/visualization containers: use class-based selectors like .highcharts-container, .chart-wrapper, [class*="chart"]\n'
-    + '   - CRITICAL: pi-test-identifier values ending in a long number are DYNAMIC (e.g. "ChartColumn.operandOne.sort.option.desc.885249556") — strip the number and use *= contains: [pi-test-identifier*="ChartColumn.operandOne.sort.option.desc"] NOT exact =\n'
-    + '   - Any attribute value ending in 5+ digits is almost certainly a dynamic runtime ID — use *= instead of =\n'
-    + '   - For assert steps especially: make sure the selector will match on every run, not just once\n\n'
+    + '1. For each step, write a STABLE SELECTOR using this STRICT priority order — always use the HIGHEST priority option available:\n'
+    + '   PRIORITY 1 (ALWAYS USE IF AVAILABLE): piTestId field → [pi-test-identifier="VALUE"]\n'
+    + '   PRIORITY 2: parentTestId field (when clicking icon inside element) → [pi-test-identifier="parentTestId"]\n'
+    + '   PRIORITY 3: dataTestId field → [data-testid="VALUE"]\n'
+    + '   PRIORITY 4: Unique non-random id → #id\n'
+    + '   PRIORITY 5: title attribute (from element.title field) → a[title="VALUE"] or button[title="VALUE"]\n'
+    + '   PRIORITY 6: Semantic selector → button:has-text("Login"), input[name="email"]\n'
+    + '   PRIORITY 7: Class-based → .meaningful-class-name\n'
+    + '   PRIORITY 8: Original selector as fallback\n'
+    + '\n'
+    + '   EXAMPLE: If element has piTestId="ChartEditor.saveChartButton" AND title="Save" → use [pi-test-identifier="ChartEditor.saveChartButton"] NOT a[title="Save"]\n'
+    + '   EXAMPLE: If element has piTestId=null AND title="Create new chart" → use a[title="Create new chart"]\n'
+    + '\n'
+    + '   HARD RULES:\n'
+    + '   - NEVER use IDs with random hex/numbers (e.g. #chart-abc123, #ng-view-1)\n'
+    + '   - NEVER use :nth-child or :nth-of-type\n'
+    + '   - NEVER invent attributes — only use what is in the captured element data\n'
+    + '   - pi-test-identifier values ending in 5+ digits are DYNAMIC — use *= e.g. [pi-test-identifier*="ChartColumn.sort.desc"]\n'
+    + '   - For icon elements (<i>, <svg>): use piTestId or parentTestId as anchor, never bare i.fa-something\n\n'
     + '2. For each step, write a SHORT human-readable description (max 10 words). Examples:\n'
     + '   - "Click the Login button"\n'
     + '   - "Type username into email field"\n'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skopix",
-  "version": "2.0.87",
+  "version": "2.0.89",
   "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);