skopix 2.0.11 → 2.0.13

package/cli/commands/agent.js

@@ -247,8 +247,17 @@ export async function agentCommand(options) {
       send({ type: 'sessionId', sessionId: runId });
 
       const browser = await chromium.launch({ headless: test.headless || false, args: ['--no-sandbox'] });
-      const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 }, recordVideo: { dir: sessionDir, size: { width: 1280, height: 800 } } });
+      const wantReport = test.generateReport !== false;
+      const browserZoom = test.browserZoom || 0.8;
+      const ctx = await browser.newContext({
+        viewport: { width: 1920, height: 1080 },
+        deviceScaleFactor: 1,
+        ...(wantReport ? { recordVideo: { dir: sessionDir, size: { width: 1920, height: 1080 } } } : {}),
+      });
       const page = await ctx.newPage();
+      if (browserZoom !== 1) {
+        await page.addInitScript((zoom) => { document.documentElement.style.zoom = zoom; }, browserZoom);
+      }
 
       const allSteps = [...(setupTest ? (setupTest.steps || []) : []), ...(test.steps || [])];
       let stepNum = 0, passed = true, failReason = '';
@@ -354,12 +363,16 @@ export async function agentCommand(options) {
             if (count > 1) {
               let bi = 0, bd = Infinity;
               for (let i = 0; i < count; i++) { try { const box = await page.locator(s).nth(i).boundingBox({ timeout: 2000 }); if (!box) continue; const d = Math.sqrt(Math.pow(box.x + box.width / 2 - tx, 2) + Math.pow(box.y + box.height / 2 - ty, 2)); if (d < bd) { bd = d; bi = i; } } catch {} }
+              await page.locator(s).nth(bi).scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {});
               await page.locator(s).nth(bi).click({ timeout: 5000 }); clicked = true;
-            } else if (count === 1) { await page.locator(s).first().click({ timeout: 5000 }); clicked = true; }
+            } else if (count === 1) {
+              await page.locator(s).first().scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {});
+              await page.locator(s).first().click({ timeout: 5000 }); clicked = true;
+            }
           } catch {}
         }
       }
-      if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().click({ timeout: 5000 }); clicked = true; } catch {} } }
+      if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {}); await page.locator(s).first().click({ timeout: 5000 }); clicked = true; } catch {} } }
       if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().click({ force: true, timeout: 5000 }); clicked = true; } catch {} } }
       if (!clicked) throw new Error('Could not click: ' + selectors.join(', '));
       await page.waitForTimeout(400);

package/cli/commands/dashboard.js

@@ -2992,14 +2992,18 @@ function startReplay(test, setupTest, activeRuns, reportsDir, currentUser, env)
                   if (count > 1) {
                     let bestIdx = 0, bestDist = Infinity;
                     for (let i = 0; i < count; i++) { try { const box = await page.locator(s).nth(i).boundingBox({ timeout: 2000 }); if (!box) continue; const d = Math.sqrt(Math.pow(box.x+box.width/2-targetX,2)+Math.pow(box.y+box.height/2-targetY,2)); if (d < bestDist) { bestDist = d; bestIdx = i; } } catch {} }
+                    await page.locator(s).nth(bestIdx).scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {});
                     await page.locator(s).nth(bestIdx).click({ timeout: 5000 });
                     if (count > 1) broadcast({ type: 'stdout', text: '    (matched element ' + (bestIdx+1) + ' of ' + count + ' by position)' });
                     clicked = true;
-                  } else if (count === 1) { await page.locator(s).first().waitFor({ state: 'visible', timeout: 3000 }); await page.locator(s).first().click({ timeout: 5000 }); clicked = true; }
+                  } else if (count === 1) {
+                    await page.locator(s).first().scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {});
+                    await page.locator(s).first().waitFor({ state: 'visible', timeout: 3000 }); await page.locator(s).first().click({ timeout: 5000 }); clicked = true;
+                  }
                 } catch {}
               }
             }
-            if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().waitFor({ state: 'visible', timeout: 3000 }); await page.locator(s).first().click({ timeout: 5000 }); clicked = true; } catch {} } }
+            if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().scrollIntoViewIfNeeded({ timeout: 3000 }).catch(() => {}); await page.locator(s).first().waitFor({ state: 'visible', timeout: 3000 }); await page.locator(s).first().click({ timeout: 5000 }); clicked = true; } catch {} } }
             if (!clicked) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().click({ force: true, timeout: 5000 }); clicked = true; } catch {} } }
             if (!clicked && step.element) { const tag = (step.element.tag||'').toLowerCase(); if (['i','svg','path','span','img'].includes(tag)) { for (const s of selectors) { if (clicked) break; try { await page.locator(s).first().locator('xpath=ancestor-or-self::*[self::a or self::button or @role="button"][1]').first().click({ timeout: 5000 }); clicked = true; } catch {} } } }
             if (!clicked && step.element && step.element.text && step.element.text.length > 1) { try { await page.locator('*:has-text("' + step.element.text.replace(/"/g, '\\"') + '")').first().click({ timeout: 5000 }); clicked = true; } catch {} }
@@ -3073,12 +3077,17 @@ function startReplay(test, setupTest, activeRuns, reportsDir, currentUser, env)
       });
 
       const wantReport = test.generateReport !== false;
+      const browserZoom = test.browserZoom || 0.8;
 
       const ctx = await chromiumBrowser.newContext({
-        viewport: { width: 1280, height: 800 },
-        ...(wantReport ? { recordVideo: { dir: sessionDir, size: { width: 1280, height: 800 } } } : {}),
+        viewport: { width: 1920, height: 1080 },
+        deviceScaleFactor: 1,
+        ...(wantReport ? { recordVideo: { dir: sessionDir, size: { width: 1920, height: 1080 } } } : {}),
       });
       const page = await ctx.newPage();
+      if (browserZoom !== 1) {
+        await page.addInitScript((zoom) => { document.documentElement.style.zoom = zoom; }, browserZoom);
+      }
 
       // Navigate to start URL
       if (test.url) {

package/package.json

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

@@ -4,6 +4,7 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Skopix Dashboard</title>
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230d1117'/%3E%3Cpolygon points='16,6 26,11 16,16 6,11' fill='%2300d4ff'/%3E%3Cpolygon points='6,11 16,16 26,11 26,14 16,19 6,14' fill='%2300a8cc'/%3E%3Cpolygon points='6,14 16,19 26,14 26,17 16,22 6,17' fill='%23007a99'/%3E%3C/svg%3E">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
@@ -2236,6 +2237,16 @@ body.viewer-mode .saved-test-row { cursor: default !important; }
           <input type="checkbox" id="re-generate-report" checked style="width:14px;height:14px;accent-color:var(--cyan)">
           <span style="color:var(--muted)">Generate <span style="color:var(--cyan)">report</span> (video + screenshots)</span>
         </label>
+        <div style="display:flex;align-items:center;gap:8px">
+          <label style="font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap">Browser zoom:</label>
+          <select class="form-select" id="re-browser-zoom" style="padding:5px 8px;font-size:12px;width:90px">
+            <option value="1">100%</option>
+            <option value="0.9">90%</option>
+            <option value="0.8" selected>80%</option>
+            <option value="0.75">75%</option>
+            <option value="0.67">67%</option>
+          </select>
+        </div>
         <div style="display:flex;align-items:center;gap:8px;flex:1">
           <label style="font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap">Run setup:</label>
           <select class="form-select" id="re-setup" style="flex:1;padding:5px 8px;font-size:12px">
@@ -5456,7 +5467,7 @@ async function confirmAddToSuite() {
 }
 
 // ── RECORDED TEST EDITOR ────────────────────────────────────────────────────
-let reEditorState = { scope: null, testId: null, steps: [], testName: '', url: '', reusable: false, setup: '', credentials: '', tags: [], generateReport: true };
+let reEditorState = { scope: null, testId: null, steps: [], testName: '', url: '', reusable: false, setup: '', credentials: '', tags: [], generateReport: true, browserZoom: 0.8 };
 let reAssertInsertAfter = -1;
 
 async function openRecordedTestEditor(scope, testId) {
@@ -5464,11 +5475,12 @@ async function openRecordedTestEditor(scope, testId) {
     const res = await fetch(API_BASE + '/api/test/' + encodeURIComponent(scope) + '/' + encodeURIComponent(testId));
     const test = await res.json();
     if (!res.ok) { showToast(test.error || 'Failed to load test'); return; }
-    reEditorState = { scope, testId, steps: JSON.parse(JSON.stringify(test.steps || [])), testName: test.name || '', url: test.url || '', reusable: !!test.reusable, setup: test.setup || '', credentials: test.credentials || '', tags: test.tags || [], generateReport: test.generateReport !== false };
+    reEditorState = { scope, testId, steps: JSON.parse(JSON.stringify(test.steps || [])), testName: test.name || '', url: test.url || '', reusable: !!test.reusable, setup: test.setup || '', credentials: test.credentials || '', tags: test.tags || [], generateReport: test.generateReport !== false, browserZoom: test.browserZoom || 0.8 };
     document.getElementById('re-name').value = reEditorState.testName;
     document.getElementById('re-url').value = reEditorState.url;
     document.getElementById('re-reusable').checked = reEditorState.reusable;
     document.getElementById('re-generate-report').checked = reEditorState.generateReport;
+    document.getElementById('re-browser-zoom').value = String(reEditorState.browserZoom);
     document.getElementById('re-tags').value = (reEditorState.tags || []).join(', ');
     // Populate credentials dropdown
     const credSel = document.getElementById('re-credentials');
@@ -5725,6 +5737,7 @@ async function saveRecordedEdits() {
   const url = document.getElementById('re-url').value.trim();
   const reusable = document.getElementById('re-reusable').checked;
   const generateReport = document.getElementById('re-generate-report')?.checked !== false;
+  const browserZoom = parseFloat(document.getElementById('re-browser-zoom')?.value || '0.8');
   const setup = document.getElementById('re-setup').value || null;
   const credentials = document.getElementById('re-credentials')?.value || '';
   const tags = (document.getElementById('re-tags')?.value || '').split(',').map(t => t.trim()).filter(Boolean);
@@ -5732,7 +5745,7 @@ async function saveRecordedEdits() {
   try {
     const res = await fetch(API_BASE + '/api/test/' + encodeURIComponent(reEditorState.scope) + '/' + encodeURIComponent(reEditorState.testId), {
       method: 'PUT', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, url, type: 'recorded', steps: reEditorState.steps, reusable, setup, credentials, tags, generateReport }),
+      body: JSON.stringify({ name, url, type: 'recorded', steps: reEditorState.steps, reusable, setup, credentials, tags, generateReport, browserZoom }),
     });
     const data = await res.json();
     if (!res.ok) { showToast(data.error || 'Failed to save'); return; }