skopix 2.0.3 → 2.0.5

package/cli/commands/agent.js

@@ -383,7 +383,15 @@ export async function agentCommand(options) {
     } else if (step.action === 'assert') {
       const assertSel = sanitiseSelector(step.stableSelector || step.selector);
       switch (step.assertType) {
-        case 'visible': await page.locator(assertSel).first().waitFor({ state: 'visible', timeout: 10000 }); break;
+        case 'visible': {
+          try {
+            await page.locator(assertSel).first().waitFor({ state: 'visible', timeout: 10000 });
+          } catch {
+            // Fall back to checking element exists in DOM (some elements are technically hidden but visually present via opacity/transform)
+            await page.locator(assertSel).first().waitFor({ state: 'attached', timeout: 5000 });
+          }
+          break;
+        }
         case 'text_contains': { const txt = await page.locator(assertSel).first().textContent({ timeout: 10000 }); if (!txt || !txt.includes(step.value || '')) throw new Error('Expected to contain "' + step.value + '"'); break; }
         case 'text_equals': { const txt = await page.locator(assertSel).first().textContent({ timeout: 10000 }); if ((txt || '').trim() !== (step.value || '').trim()) throw new Error('Expected "' + step.value + '"'); break; }
         case 'url_contains': if (!page.url().includes(step.value || '')) throw new Error('URL does not contain "' + step.value + '"'); break;

package/cli/commands/dashboard.js

@@ -2898,7 +2898,11 @@ function startReplay(test, setupTest, activeRuns, reportsDir, currentUser, env)
             const assertSel = sanitiseSelector(step.stableSelector || step.selector);
             switch (step.assertType) {
               case 'visible':
-                await page.locator(assertSel).first().waitFor({ state: 'visible', timeout: 10000 });
+                try {
+                  await page.locator(assertSel).first().waitFor({ state: 'visible', timeout: 10000 });
+                } catch {
+                  await page.locator(assertSel).first().waitFor({ state: 'attached', timeout: 5000 });
+                }
                 broadcast({ type: 'stdout', text: '    \u2713 Visible: ' + assertSel });
                 break;
               case 'text_contains': {

package/core/llm.js

@@ -581,7 +581,7 @@ export async function processRecording({ steps, testName, url, provider, apiKey,
     + '   - For scroll actions: if selector is window use await page.evaluate(() => window.scrollTo(x, y)), otherwise use document.querySelector(sel).scrollTo(x, y)\n'
     + '   - Add await page.waitForLoadState("networkidle") after navigation actions\n'
     + '   - For assert steps: generate correct Playwright expect() calls:\n'
-    + '     visible -> await expect(page.locator(selector)).toBeVisible();\n'
+    + '     visible -> await expect(page.locator(selector)).toBeAttached(); // use toBeAttached not toBeVisible — elements may be in DOM but hidden via CSS\n'
     + '     text_contains -> await expect(page.locator(selector)).toContainText("value");\n'
     + '     text_equals -> await expect(page.locator(selector)).toHaveText("value");\n'
     + '     url_contains -> await expect(page).toHaveURL(/value/);\n'

package/package.json

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

@@ -5535,9 +5535,10 @@ function renderReSteps() {
       + '<button class="btn-icon" style="width:22px;height:22px;font-size:11px;color:#ef4444" title="Delete step" onclick="reStepDelete(' + i + ')">✕</button>'
       + '</div></div>'
       + (isAssert
-        ? '<div style="display:grid;grid-template-columns:1fr' + (s.assertType !== 'visible' ? ' 1fr' : '') + ';gap:6px">'
+        ? '<div style="display:grid;grid-template-columns:1fr' + (s.assertType !== 'visible' ? ' 1fr' : '') + (s.assertType === 'attribute_contains' ? ' 1fr' : '') + ';gap:6px">'
           + '<div><div style="font-family:var(--mono);font-size:9px;color:var(--muted);margin-bottom:3px">SELECTOR (assertType: ' + escapeHtml(s.assertType||'') + ')</div>'
           + '<input class="form-input" type="text" value="' + sel + '" placeholder="CSS selector..." style="padding:4px 8px;font-size:11px;height:auto;font-family:var(--mono)" onchange="reEditorState.steps[' + i + '].stableSelector=this.value;reEditorState.steps[' + i + '].selector=this.value"></div>'
+          + (s.assertType === 'attribute_contains' ? '<div><div style="font-family:var(--mono);font-size:9px;color:var(--muted);margin-bottom:3px">ATTRIBUTE</div><input class="form-input" type="text" value="' + escapeHtml(s.attribute||'title') + '" placeholder="e.g. fill, style, aria-label" style="padding:4px 8px;font-size:11px;height:auto;font-family:var(--mono)" onchange="reEditorState.steps[' + i + '].attribute=this.value"></div>' : '')
           + (s.assertType !== 'visible' ? '<div><div style="font-family:var(--mono);font-size:9px;color:var(--muted);margin-bottom:3px">EXPECTED</div><input class="form-input" type="text" value="' + val + '" style="padding:4px 8px;font-size:11px;height:auto" onchange="reEditorState.steps[' + i + '].value=this.value"></div>' : '')
           + '</div>'
         : '<div style="display:grid;grid-template-columns:1fr' + (s.action === 'type' || s.action === 'select' ? ' 1fr' : '') + ';gap:6px">'