skopix 2.0.28 → 2.0.30

package/package.json

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

@@ -1620,27 +1620,25 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
         <div class="modal-body" style="display:flex;flex-direction:column;gap:14px">
           <input type="hidden" id="lib-step-id">
           <div class="form-field">
-            <label class="form-label">Name</label>
-            <input class="form-input" id="lib-step-name" type="text" placeholder="e.g. Click chart settings icon">
+            <label class="form-label">Element name</label>
+            <input class="form-input" id="lib-step-name" type="text" placeholder="e.g. Chart settings icon, Username input">
           </div>
           <div class="form-field">
-            <label class="form-label">Action</label>
+            <label class="form-label">Selector</label>
+            <input class="form-input" id="lib-step-selector" type="text" placeholder="CSS selector" style="font-family:var(--mono)">
+            <div class="form-help">The CSS selector that identifies this element</div>
+          </div>
+          <div class="form-field">
+            <label class="form-label">Default action (optional)</label>
             <select class="form-select" id="lib-step-action">
+              <option value="">— No default —</option>
               <option value="click">click</option>
               <option value="type">type</option>
               <option value="check">check</option>
               <option value="assert">assert</option>
               <option value="select">select</option>
-              <option value="scroll">scroll</option>
             </select>
-          </div>
-          <div class="form-field">
-            <label class="form-label">Selector</label>
-            <input class="form-input" id="lib-step-selector" type="text" placeholder="CSS selector" style="font-family:var(--mono)">
-          </div>
-          <div class="form-field" id="lib-step-value-row">
-            <label class="form-label">Value (for type/assert)</label>
-            <input class="form-input" id="lib-step-value" type="text" placeholder="Value to type or assert">
+            <div class="form-help">Suggested action when used in the test builder — can be overridden</div>
           </div>
           <div class="form-field">
             <label class="form-label">Tags (comma separated)</label>
@@ -5583,14 +5581,14 @@ function renderLibrarySteps(steps) {
           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>'}
+      ${fragileCount > 0 ? `<div style="font-family:var(--mono);font-size:11px;color:#f59e0b">⚠ ${fragileCount} element${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 20px;text-align:left;border-bottom:1px solid var(--border)">ELEMENT NAME</th>
         <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">SELECTOR</th>
+        <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">DEFAULT ACTION</th>
         <th style="padding:10px 16px;text-align:left;border-bottom:1px solid var(--border)">USES</th>
         <th style="padding:10px 16px;text-align:right;border-bottom:1px solid var(--border)"></th>
       </tr></thead>
@@ -5599,23 +5597,28 @@ function renderLibrarySteps(steps) {
           const sel = s.stableSelector || s.selector || '';
           const fragile = isSelectorFragile(sel);
           const warning = getSelectorWarning(sel);
+          const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
           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>
+              <div style="font-size:13px;color:var(--text)">${escapeHtml(s.name||'')}</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">
+            <td style="padding:12px 16px;max-width:300px">
               <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>
+                <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">
+              <span style="font-family:var(--mono);font-size:11px;color:${actionColors[s.defaultAction]||'var(--muted2)'}">
+                ${s.defaultAction||'—'}
+              </span>
+            </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>
@@ -5730,11 +5733,10 @@ async function loadLibraryView() {
 function openAddLibraryStep() {
   document.getElementById('lib-step-id').value = '';
   document.getElementById('lib-step-name').value = '';
-  document.getElementById('lib-step-action').value = 'click';
   document.getElementById('lib-step-selector').value = '';
-  document.getElementById('lib-step-value').value = '';
+  document.getElementById('lib-step-action').value = '';
   document.getElementById('lib-step-tags').value = '';
-  document.getElementById('library-step-modal-title').textContent = 'Add step to library';
+  document.getElementById('library-step-modal-title').textContent = 'Add element to library';
   document.getElementById('library-step-modal').style.display = 'flex';
 }
 
@@ -5743,11 +5745,10 @@ function editLibraryStep(id) {
   if (!step) return;
   document.getElementById('lib-step-id').value = step.id;
   document.getElementById('lib-step-name').value = step.name || '';
-  document.getElementById('lib-step-action').value = step.action || 'click';
   document.getElementById('lib-step-selector').value = step.stableSelector || step.selector || '';
-  document.getElementById('lib-step-value').value = step.value || '';
+  document.getElementById('lib-step-action').value = step.defaultAction || '';
   document.getElementById('lib-step-tags').value = (step.tags || []).join(', ');
-  document.getElementById('library-step-modal-title').textContent = 'Edit step';
+  document.getElementById('library-step-modal-title').textContent = 'Edit element';
   document.getElementById('library-step-modal').style.display = 'flex';
 }
 
@@ -5758,22 +5759,22 @@ function closeLibraryStepModal() {
 async function saveLibraryStep() {
   const id = document.getElementById('lib-step-id').value;
   const name = document.getElementById('lib-step-name').value.trim();
-  const action = document.getElementById('lib-step-action').value;
   const selector = document.getElementById('lib-step-selector').value.trim();
-  const value = document.getElementById('lib-step-value').value.trim();
+  const defaultAction = document.getElementById('lib-step-action').value;
   const tags = (document.getElementById('lib-step-tags').value || '').split(',').map(t=>t.trim()).filter(Boolean);
 
-  if (!name) { showToast('Name is required'); return; }
+  if (!name) { showToast('Element name is required'); return; }
+  if (!selector) { showToast('Selector is required'); return; }
 
   try {
-    const body = { name, action, selector, stableSelector: selector, value: value || null, tags };
+    const body = { name, selector, stableSelector: selector, defaultAction: defaultAction || null, tags };
     const url = id ? `${API_BASE}/api/step-library/${encodeURIComponent(id)}` : `${API_BASE}/api/step-library`;
     const method = id ? 'PUT' : 'POST';
     const res = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
     if (!res.ok) throw new Error(await res.text());
     closeLibraryStepModal();
     await loadLibraryView();
-    showToast(id ? 'Step updated' : 'Step added to library');
+    showToast(id ? 'Element updated' : 'Element added to library');
   } catch (err) { showToast('Error: ' + err.message); }
 }
 
@@ -5857,23 +5858,26 @@ function renderBuilderLibrary() {
   const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
 
   let steps = libraryStepsCache;
-  if (builderActionFilter) steps = steps.filter(s => s.action === builderActionFilter);
+  if (builderActionFilter) steps = steps.filter(s => s.defaultAction === builderActionFilter);
   if (q) steps = steps.filter(s => (s.name||'').toLowerCase().includes(q) || (s.selector||'').toLowerCase().includes(q));
 
   if (steps.length === 0) {
-    container.innerHTML = `<div style="padding:24px 16px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px">No steps match</div>`;
+    container.innerHTML = `<div style="padding:24px 16px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px">No elements match</div>`;
     return;
   }
 
   container.innerHTML = steps.map(s => `
-    <div onclick="addBuilderStepFromLibrary('${escapeAttr(s.id)}')"
-      style="padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background 0.1s"
-      onmouseover="this.style.background='var(--surface2)'" onmouseout="this.style.background=''">
-      <div style="display:flex;align-items:center;gap:8px;margin-bottom:3px">
-        <span style="font-family:var(--mono);font-size:10px;color:${actionColors[s.action]||'var(--muted)'};min-width:40px">${s.action||''}</span>
-        <span style="font-size:12px;color:var(--text)">${escapeHtml(s.name||s.description||'')}</span>
+    <div style="padding:10px 16px;border-bottom:1px solid var(--border)">
+      <div style="font-size:12px;color:var(--text);margin-bottom:4px">${escapeHtml(s.name||'')}</div>
+      <code style="font-size:10px;color:var(--muted2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px">${escapeHtml(s.stableSelector||s.selector||'')}</code>
+      <div style="display:flex;gap:4px;flex-wrap:wrap">
+        ${['click','type','check','assert','select'].map(a => `
+          <button onclick="addBuilderStepFromLibrary('${escapeAttr(s.id)}','${a}')"
+            style="font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid ${actionColors[a]};background:transparent;color:${actionColors[a]};cursor:pointer;transition:background 0.1s"
+            onmouseover="this.style.background='${actionColors[a]}22'" onmouseout="this.style.background='transparent'">
+            ${a}
+          </button>`).join('')}
       </div>
-      <code style="font-size:10px;color:var(--muted2);margin-left:48px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${escapeHtml(s.stableSelector||s.selector||'')}</code>
     </div>`).join('');
 }
 
@@ -5881,17 +5885,16 @@ function filterBuilderLibrary() {
   renderBuilderLibrary();
 }
 
-function addBuilderStepFromLibrary(id) {
+function addBuilderStepFromLibrary(id, action) {
   const libStep = libraryStepsCache.find(s => s.id === id);
   if (!libStep) return;
   const step = {
     id: 'bs-' + Math.random().toString(36).slice(2, 8),
-    action: libStep.action,
+    action: action || libStep.defaultAction || 'click',
     stableSelector: libStep.stableSelector || libStep.selector,
     selector: libStep.selector || libStep.stableSelector,
-    value: libStep.value || null,
-    assertType: libStep.assertType || null,
-    attribute: libStep.attribute || null,
+    value: action === 'type' ? '' : null,
+    assertType: action === 'assert' ? 'visible' : null,
     description: libStep.name || libStep.description,
     libraryId: libStep.id,
     timestamp: Date.now(),
@@ -6082,8 +6085,10 @@ function captureNextInteraction() {
 
 async function saveHarvestedStep(step) {
   const actionColors = { click:'#22d3ee', type:'#a78bfa', check:'#34d399', assert:'#fb923c', select:'#f472b6', scroll:'#6b7280' };
-  const name = harvesterState.stepName || step.description || (step.action + ' ' + (step.stableSelector || step.selector || '').slice(0, 40));
   const sel = step.stableSelector || step.selector || '';
+  // Strip action prefix from description for cleaner element name
+  let name = harvesterState.stepName || step.description || '';
+  name = name.replace(/^(click|type|check|assert|select|scroll)\s+/i, '').trim() || sel.slice(0, 50);
 
   try {
     const res = await fetch(API_BASE + '/api/step-library', {
@@ -6091,10 +6096,10 @@ async function saveHarvestedStep(step) {
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
         name,
-        action: step.action,
         selector: sel,
         stableSelector: sel,
-        value: step.value || null,
+        defaultAction: step.action || null,
+        defaultValue: step.value || null,
         assertType: step.assertType || null,
         description: step.description || null,
         tags: [],
@@ -6102,19 +6107,17 @@ async function saveHarvestedStep(step) {
     });
     if (!res.ok) throw new Error(await res.text());
 
-    // Show captured step
-    document.getElementById('harvester-status').textContent = 'Step saved to library ✓';
+    document.getElementById('harvester-status').textContent = 'Element saved to library ✓';
     document.getElementById('harvester-captured').style.display = 'flex';
     document.getElementById('harvester-captured-desc').innerHTML =
-      `<span style="font-family:var(--mono);font-size:11px;color:${actionColors[step.action]||'var(--muted)'};margin-right:8px">${step.action}</span>${escapeHtml(name)}`;
+      `<span style="font-family:var(--mono);font-size:11px;color:${actionColors[step.action]||'var(--muted)'};margin-right:8px">${step.action||''}</span>${escapeHtml(name)}`;
     document.getElementById('harvester-captured-sel').textContent = sel;
     document.getElementById('btn-harvest-another').style.display = '';
     document.getElementById('btn-capture-next').style.display = 'none';
 
-    // Refresh library if visible
     if (libraryStepsCache.length > 0) fetchLibrarySteps().then(() => { if (document.getElementById('view-step-library')?.classList.contains('active')) filterLibrarySteps(); });
   } catch (err) {
-    showToast('Failed to save step: ' + err.message);
+    showToast('Failed to save element: ' + err.message);
     document.getElementById('btn-capture-next').disabled = false;
     document.getElementById('btn-capture-next').textContent = 'Capture next interaction';
   }