skopix 2.0.23 → 2.0.25

package/package.json

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

@@ -5401,6 +5401,23 @@ async function fetchLibrarySteps() {
   } catch { return []; }
 }
 
+// Detect fragile/dynamic selectors
+function isSelectorFragile(sel) {
+  if (!sel) return false;
+  if (/nth-of-type|nth-child/.test(sel)) return true;  // positional
+  if (/#[a-z]+-\d+/.test(sel)) return true;             // dynamic IDs like #cell-446
+  if (/\[\w+=["'][^"']*\d{3,}[^"']*["']\]/.test(sel)) return true; // long numeric attr values
+  return false;
+}
+
+function getSelectorWarning(sel) {
+  if (!sel) return null;
+  if (/nth-of-type|nth-child/.test(sel)) return 'Positional selector — may break if page layout changes';
+  if (/#[a-z]+-\d+/.test(sel)) return 'Dynamic ID — this number changes between runs';
+  if (/\[\w+=["'][^"']*\d{3,}[^"']*["']\]/.test(sel)) return 'Contains a dynamic numeric value';
+  return null;
+}
+
 function renderLibrarySteps(steps) {
   const container = document.getElementById('library-steps-container');
   if (!container) return;
@@ -5415,9 +5432,27 @@ function renderLibrarySteps(steps) {
   }
 
   const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
+  const fragileCount = steps.filter(s => isSelectorFragile(s.stableSelector || s.selector)).length;
+
   container.innerHTML = `
+    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface2)">
+      <div style="display:flex;align-items:center;gap:12px">
+        <label style="display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer">
+          <input type="checkbox" id="lib-select-all" onchange="toggleSelectAllSteps(this.checked)" style="width:14px;height:14px">
+          Select all
+        </label>
+        <button class="btn btn-ghost" id="btn-merge-steps" style="display:none;padding:4px 10px;font-size:11px" onclick="openMergeSteps()">
+          Merge selected
+        </button>
+        <button class="btn btn-ghost" id="btn-delete-selected" style="display:none;padding:4px 10px;font-size:11px;color:var(--red)" onclick="deleteSelectedSteps()">
+          Delete selected
+        </button>
+      </div>
+      ${fragileCount > 0 ? `<div style="font-family:var(--mono);font-size:11px;color:#f59e0b">⚠ ${fragileCount} step${fragileCount>1?'s':''} with fragile selectors</div>` : '<div style="font-family:var(--mono);font-size:11px;color:#34d399">✓ All selectors look stable</div>'}
+    </div>
     <table style="width:100%;border-collapse:collapse">
       <thead><tr style="font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.1em">
+        <th style="padding:10px 16px;width:32px;border-bottom:1px solid var(--border)"></th>
         <th style="padding:10px 20px;text-align:left;border-bottom:1px solid var(--border)">NAME</th>
         <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">ACTION</th>
         <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">SELECTOR</th>
@@ -5425,24 +5460,122 @@ function renderLibrarySteps(steps) {
         <th style="padding:10px 16px;text-align:right;border-bottom:1px solid var(--border)"></th>
       </tr></thead>
       <tbody>
-        ${steps.map(s => `
-          <tr style="border-bottom:1px solid var(--border);transition:background 0.15s" onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background=''">
+        ${steps.map(s => {
+          const sel = s.stableSelector || s.selector || '';
+          const fragile = isSelectorFragile(sel);
+          const warning = getSelectorWarning(sel);
+          return `
+          <tr data-step-id="${escapeAttr(s.id)}" style="border-bottom:1px solid var(--border);transition:background 0.15s${fragile?';background:rgba(245,158,11,0.04)':''}" onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background='${fragile?'rgba(245,158,11,0.04)':''}'">
+            <td style="padding:12px 16px">
+              <input type="checkbox" class="lib-step-checkbox" data-id="${escapeAttr(s.id)}" onchange="onLibStepCheck()" style="width:14px;height:14px">
+            </td>
             <td style="padding:12px 20px">
               <div style="font-size:13px;color:var(--text)">${escapeHtml(s.name || s.description || '')}</div>
               ${s.tags && s.tags.length ? `<div style="margin-top:4px;display:flex;gap:4px">${s.tags.map(t=>`<span style="font-family:var(--mono);font-size:10px;padding:2px 6px;background:var(--surface2);border-radius:4px;color:var(--muted)">${escapeHtml(t)}</span>`).join('')}</div>` : ''}
             </td>
             <td style="padding:12px 16px"><span style="font-family:var(--mono);font-size:11px;color:${actionColors[s.action]||'var(--muted)'}">${s.action||''}</span></td>
-            <td style="padding:12px 16px;max-width:280px"><code style="font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block">${escapeHtml(s.stableSelector || s.selector || '—')}</code></td>
+            <td style="padding:12px 16px;max-width:280px">
+              <div style="display:flex;align-items:center;gap:6px">
+                ${fragile ? `<span title="${escapeAttr(warning||'')}" style="color:#f59e0b;font-size:14px;cursor:help;flex-shrink:0">⚠</span>` : ''}
+                <code style="font-size:11px;color:${fragile?'#f59e0b':'var(--muted)'};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block">${escapeHtml(sel || '—')}</code>
+              </div>
+            </td>
             <td style="padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--muted)">${s.usageCount || 0}</td>
             <td style="padding:12px 16px;text-align:right">
               <button class="btn btn-ghost" style="padding:4px 10px;font-size:11px;margin-right:4px" onclick="editLibraryStep('${escapeAttr(s.id)}')">Edit</button>
               <button class="btn btn-ghost" style="padding:4px 10px;font-size:11px;color:var(--red)" onclick="deleteLibraryStepUI('${escapeAttr(s.id)}','${escapeAttr(s.name||'')}')">Delete</button>
             </td>
-          </tr>`).join('')}
+          </tr>`;
+        }).join('')}
       </tbody>
     </table>`;
 }
 
+function onLibStepCheck() {
+  const checked = document.querySelectorAll('.lib-step-checkbox:checked');
+  const mergeBtn = document.getElementById('btn-merge-steps');
+  const deleteBtn = document.getElementById('btn-delete-selected');
+  if (mergeBtn) mergeBtn.style.display = checked.length >= 2 ? '' : 'none';
+  if (deleteBtn) deleteBtn.style.display = checked.length >= 1 ? '' : 'none';
+}
+
+function toggleSelectAllSteps(checked) {
+  document.querySelectorAll('.lib-step-checkbox').forEach(cb => cb.checked = checked);
+  onLibStepCheck();
+}
+
+function getSelectedStepIds() {
+  return Array.from(document.querySelectorAll('.lib-step-checkbox:checked')).map(cb => cb.dataset.id);
+}
+
+async function deleteSelectedSteps() {
+  const ids = getSelectedStepIds();
+  if (!ids.length) return;
+  showConfirm('Delete steps?', `Delete ${ids.length} selected step${ids.length>1?'s':''}?`, async () => {
+    for (const id of ids) {
+      await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(id), { method: 'DELETE' });
+    }
+    showToast(`Deleted ${ids.length} steps`);
+    await loadLibraryView();
+  });
+}
+
+function openMergeSteps() {
+  const ids = getSelectedStepIds();
+  if (ids.length < 2) return;
+  const selected = ids.map(id => libraryStepsCache.find(s => s.id === id)).filter(Boolean);
+
+  // Use the confirm overlay but inject HTML into desc
+  const descEl = document.getElementById('confirm-desc');
+  if (descEl) {
+    descEl.innerHTML = `
+      <div style="font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:16px">
+        Select which step to keep. The others will be deleted.
+      </div>
+      <div style="display:flex;flex-direction:column;gap:8px;text-align:left">
+        ${selected.map((s, i) => `
+          <label style="display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:8px;border:1px solid var(--border);cursor:pointer">
+            <input type="radio" name="merge-canonical" value="${escapeAttr(s.id)}" ${i===0?'checked':''} style="margin-top:3px;flex-shrink:0">
+            <div>
+              <div style="font-size:13px;color:var(--text);margin-bottom:4px">${escapeHtml(s.name||'')}</div>
+              <code style="font-size:11px;color:var(--muted);word-break:break-all">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+              <span style="font-family:var(--mono);font-size:10px;color:var(--muted);margin-left:8px">${s.usageCount||0} uses</span>
+            </div>
+          </label>`).join('')}
+      </div>`;
+  }
+  document.getElementById('confirm-title').textContent = `Merge ${selected.length} steps`;
+
+  // Override the confirm button
+  const actions = document.querySelector('.confirm-actions');
+  if (actions) {
+    actions.innerHTML = `
+      <button class="btn btn-ghost" onclick="closeConfirm()">Cancel</button>
+      <button class="btn btn-primary" onclick="confirmMergeSteps(${JSON.stringify(ids)})">Merge</button>`;
+  }
+  document.getElementById('confirm-overlay').classList.add('open');
+}
+
+async function confirmMergeSteps(ids) {
+  const selected = ids.map(id => libraryStepsCache.find(s => s.id === id)).filter(Boolean);
+  const canonicalId = document.querySelector('input[name="merge-canonical"]:checked')?.value;
+  if (!canonicalId) return;
+  const canonical = selected.find(s => s.id === canonicalId);
+  const toDelete = selected.filter(s => s.id !== canonicalId);
+  const totalUses = selected.reduce((sum, s) => sum + (s.usageCount||0), 0);
+  closeConfirm();
+  await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(canonicalId), {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...canonical, usageCount: totalUses })
+  });
+  for (const s of toDelete) {
+    await fetch(API_BASE + '/api/step-library/' + encodeURIComponent(s.id), { method: 'DELETE' });
+  }
+  showToast(`Merged ${selected.length} steps into "${canonical.name}"`);
+  await loadLibraryView();
+}
+
 function filterLibrarySteps() {
   const q = (document.getElementById('library-search')?.value || '').toLowerCase();
   const action = document.getElementById('library-filter-action')?.value || '';