skopix 2.0.81 → 2.0.83

package/cli/commands/dashboard.js

@@ -1572,6 +1572,8 @@ export async function dashboardCommand(options) {
         const data = JSON.parse(body);
         try {
           const result = await updateTest(suitesDir, scope, testId, data);
+          // Extract any new steps to pending review queue
+          extractStepsToLibrary(suitesDir, data.steps || [], data.name || testId).catch(() => {});
           sendJSON(res, 200, result);
         } catch (err) {
           sendJSON(res, 400, { error: err.message });

package/core/llm.js

@@ -509,6 +509,13 @@ export async function processRecording({ steps, testName, url, provider, apiKey,
       type: s.element.type,
       text: s.element.text,
       classes: s.element.classes,
+      title: s.element.title || null,
+      ariaLabel: s.element.ariaLabel || null,
+      piTestId: s.element.piTestId || null,
+      dataTestId: s.element.dataTestId || null,
+      parentTitle: s.element.parentTitle || null,
+      parentTestId: s.element.parentTestId || null,
+      parentClasses: s.element.parentClasses || null,
     } : null,
     value: s.action === 'type' && s.isPassword ? '[password - use process.env.TEST_PASSWORD]' : (s.value || null),
     isPassword: s.isPassword || false,
@@ -547,13 +554,17 @@ export async function processRecording({ steps, testName, url, provider, apiKey,
     + '\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'
-    + '   - For icon elements (<i>, <span> with fa/icon classes): use the parent element as the anchor if it has a meaningful class/attribute, e.g. .chart-panel__panel-heading__panel-button i, [aria-label="Options"] i. NEVER generate a bare i.fa-something if there are multiple on the page — always scope it to its parent container\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'

package/core/recorder.js

@@ -87,23 +87,32 @@ export class RecordingSession {
       }
 
       function getElementInfo(el) {
+        const piTestId = el.getAttribute('pi-test-identifier') || null;
+        const title = el.getAttribute('title') || null;
+        const ariaLabel = el.getAttribute('aria-label') || null;
+        const dataTestId = el.getAttribute('data-testid') || el.getAttribute('data-test-id') || null;
         const info = {
           tag: el.tagName.toLowerCase(),
           id: el.id || null,
           name: el.name || null,
           type: el.type || null,
-          text: (el.innerText || el.value || el.placeholder || el.getAttribute('aria-label') || '').trim().slice(0, 80),
+          text: (el.innerText || el.value || el.placeholder || ariaLabel || title || '').trim().slice(0, 80),
           selector: getSelector(el),
           classes: el.className ? el.className.toString().trim().slice(0, 100) : null,
+          title,
+          ariaLabel,
+          piTestId,
+          dataTestId,
         };
         // For icon elements with no meaningful ID/text, capture parent context for better selector generation
-        const isIcon = ['i', 'span', 'svg'].includes(info.tag) && !info.id && !info.text;
+        const isIcon = ['i', 'span', 'svg'].includes(info.tag) && !info.id && !info.text && !piTestId;
         if (isIcon && el.parentElement) {
           const p = el.parentElement;
           info.parentTag = p.tagName.toLowerCase();
           info.parentClasses = p.className ? p.className.toString().trim().slice(0, 100) : null;
           info.parentSelector = getSelector(p);
           info.parentAriaLabel = p.getAttribute('aria-label') || null;
+          info.parentTitle = p.getAttribute('title') || null;
           info.parentTestId = p.getAttribute('pi-test-identifier') || p.getAttribute('data-testid') || null;
         }
         return info;

package/package.json

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