skopix 2.0.88 → 2.0.90

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.88",
+  "version": "2.0.90",
   "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

@@ -6777,10 +6777,30 @@ async function saveBuiltTest() {
   }));
 
   try {
+    showToast('Processing steps...');
+
+    // Run through LLM to generate Playwright code
+    let processedSteps = steps;
+    let playwrightJs = '';
+    let playwrightTs = '';
+    try {
+      const procRes = await fetch(API_BASE + '/api/record/process', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ steps, testName: name, url }),
+      });
+      if (procRes.ok) {
+        const proc = await procRes.json();
+        processedSteps = proc.steps || steps;
+        playwrightJs = proc.playwrightJs || '';
+        playwrightTs = proc.playwrightTs || '';
+      }
+    } catch {}
+
     const res = await fetch(API_BASE + '/api/record/save', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ scope: 'saved', name, url, steps, tags: [] }),
+      body: JSON.stringify({ scope: 'saved', name, url, steps: processedSteps, playwrightJs, playwrightTs, tags: [] }),
     });
     if (!res.ok) throw new Error(await res.text());
     showToast(`Test "${name}" saved`);