synapse-hub 2.4.1 → 2.4.2

package/.agents/skills/playwright-live-interaction/references/advanced_superpowers.md

@@ -1,160 +1,160 @@
-# 5 Advanced Superpowers & 5 AI Paradigms for Playwright Live Interaction
-
-In-depth technical reference for complex testing scenarios across enterprise web test suites.
-
----
-
-## 1. Five Native Advanced Superpowers
-
-### 1.1. Zero-Second Auth (Bypass Login Form)
-```javascript
-// Step 1: Save storage state after login
-async (page) => {
-  await page.context().storageState({ path: '.agents/session.json' });
-  return { status: "Session saved successfully" };
-}
-
-// Step 2: Load stored session in subsequent contexts
-const context = await browser.newContext({ storageState: '.agents/session.json' });
-```
-
-### 1.2. Network Interception & Direct Seeding
-```javascript
-async (page) => {
-  page.on('request', request => {
-    if (request.url().includes('/api/') && request.method() === 'POST') {
-      console.log('API URL:', request.url());
-      console.log('Headers:', request.headers());
-      console.log('Payload:', request.postData());
-    }
-  });
-}
-```
-
-### 1.3. Accessibility Tree (AOM Snapshot — 90% Token Reduction)
-```javascript
-async (page) => {
-  const a11yTree = await page.accessibility.snapshot({
-    interestingOnly: true // Captures interactive elements only
-  });
-  return a11yTree;
-}
-```
-
-### 1.4. Multi-Context Dual Role Testing (Parallel Roles)
-```javascript
-async (browser) => {
-  const specialistContext = await browser.newContext();
-  const leaderContext = await browser.newContext();
-
-  const pageSpecialist = await specialistContext.newPage();
-  const pageLeader = await leaderContext.newPage();
-
-  // Specialist submits dossier
-  await pageSpecialist.goto('https://app.example.com/planning');
-  // Leader reviews and approves
-  await pageLeader.goto('https://app.example.com/planning-approval');
-}
-```
-
-### 1.5. API Route Mocking (Negative Scenarios & Fault Injection)
-```javascript
-async (page) => {
-  await page.route('**/api/**', route => {
-    route.fulfill({
-      status: 500,
-      contentType: 'application/json',
-      body: JSON.stringify({ message: 'Database connection failed!' })
-    });
-  });
-
-  await page.locator('button:has-text("Lưu")').click();
-  await page.waitForTimeout(500);
-  const toastMsg = await page.locator('.p-toast-message').innerText();
-  return { toastMsg };
-}
-```
-
----
-
-## 2. Five AI Engineering Paradigms
-
-### 2.1. Self-Healing Locator Engine (Multi-Tier Fallback)
-```javascript
-async (page, targetName) => {
-  const strategies = [
-    () => page.locator(`button[formcontrolname="${targetName}"]`),
-    () => page.getByRole('button', { name: targetName }),
-    () => page.locator(`button:has-text("${targetName}")`),
-    () => page.locator(`button[title*="${targetName}"]`),
-    () => page.locator(`.p-button:has-text("${targetName}")`)
-  ];
-
-  for (const getLocator of strategies) {
-    const loc = getLocator();
-    if (await loc.count() > 0 && await loc.first().isVisible()) {
-      return loc.first(); // Self-healed successfully
-    }
-  }
-  throw new Error(`Self-healing failed: Element not found: ${targetName}`);
-}
-```
-
-### 2.2. Multimodal Visual Verification (GIS & Layout)
-```javascript
-async (page) => {
-  const mapElement = page.locator('div.ol-viewport');
-  const screenshotBuffer = await mapElement.screenshot({ path: '.agents/screenshots/gis_canvas_live.png' });
-  const box = await mapElement.boundingBox();
-  return {
-    isRenderedProperly: box && box.width > 300 && box.height > 200,
-    width: box ? box.width : 0,
-    height: box ? box.height : 0,
-    screenshotPath: '.agents/screenshots/gis_canvas_live.png'
-  };
-}
-```
-
-### 2.3. Autonomous Exploratory Fuzzing (Edge & Crash Hunting)
-```javascript
-async (page) => {
-  const edgePayloads = [
-    "'-DROP TABLE--",
-    "<script>alert(1)</script>",
-    "-99999999",
-    "   ",
-    "A".repeat(500)
-  ];
-  const results = [];
-  const input = page.locator('input[formcontrolname="code"]').first();
-
-  for (const payload of edgePayloads) {
-    await input.fill(payload);
-    await page.locator('button:has-text("Lưu"), button:has-text("Xác nhận")').first().click();
-    await page.waitForTimeout(600);
-
-    const hasCrash = await page.evaluate(() => {
-      const text = document.body.innerText;
-      return text.includes('500 Internal') || text.includes('HttpErrorResponse');
-    });
-    results.push({ payload, hasCrash });
-  }
-  return results;
-}
-```
-
-### 2.4. CDP Deep Profiling (RAM & Heap Monitoring)
-```javascript
-async (page) => {
-  const memoryInfo = await page.evaluate(() => {
-    return window.performance && window.performance.memory ? {
-      usedJSHeapSizeMB: (window.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(2),
-      totalJSHeapSizeMB: (window.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(2)
-    } : { note: "Memory API only available in Chromium" };
-  });
-  return memoryInfo;
-}
-```
-
-### 2.5. Multi-Agent Swarm Orchestration
-For swarm roles (Lead Orchestrator, Live Explorer, Code Crafter, Test Runner, Quality Gatekeeper, Scribe), refer to [swarm_orchestration.md](swarm_orchestration.md).
+# 5 Advanced Superpowers & 5 AI Paradigms for Playwright Live Interaction
+
+In-depth technical reference for complex testing scenarios across enterprise web test suites.
+
+---
+
+## 1. Five Native Advanced Superpowers
+
+### 1.1. Zero-Second Auth (Bypass Login Form)
+```javascript
+// Step 1: Save storage state after login
+async (page) => {
+  await page.context().storageState({ path: '.agents/session.json' });
+  return { status: "Session saved successfully" };
+}
+
+// Step 2: Load stored session in subsequent contexts
+const context = await browser.newContext({ storageState: '.agents/session.json' });
+```
+
+### 1.2. Network Interception & Direct Seeding
+```javascript
+async (page) => {
+  page.on('request', request => {
+    if (request.url().includes('/api/') && request.method() === 'POST') {
+      console.log('API URL:', request.url());
+      console.log('Headers:', request.headers());
+      console.log('Payload:', request.postData());
+    }
+  });
+}
+```
+
+### 1.3. Accessibility Tree (AOM Snapshot — 90% Token Reduction)
+```javascript
+async (page) => {
+  const a11yTree = await page.accessibility.snapshot({
+    interestingOnly: true // Captures interactive elements only
+  });
+  return a11yTree;
+}
+```
+
+### 1.4. Multi-Context Dual Role Testing (Parallel Roles)
+```javascript
+async (browser) => {
+  const specialistContext = await browser.newContext();
+  const leaderContext = await browser.newContext();
+
+  const pageSpecialist = await specialistContext.newPage();
+  const pageLeader = await leaderContext.newPage();
+
+  // Specialist submits dossier
+  await pageSpecialist.goto('https://app.example.com/planning');
+  // Leader reviews and approves
+  await pageLeader.goto('https://app.example.com/planning-approval');
+}
+```
+
+### 1.5. API Route Mocking (Negative Scenarios & Fault Injection)
+```javascript
+async (page) => {
+  await page.route('**/api/**', route => {
+    route.fulfill({
+      status: 500,
+      contentType: 'application/json',
+      body: JSON.stringify({ message: 'Database connection failed!' })
+    });
+  });
+
+  await page.locator('button:has-text("Lưu")').click();
+  await page.waitForTimeout(500);
+  const toastMsg = await page.locator('.p-toast-message').innerText();
+  return { toastMsg };
+}
+```
+
+---
+
+## 2. Five AI Engineering Paradigms
+
+### 2.1. Self-Healing Locator Engine (Multi-Tier Fallback)
+```javascript
+async (page, targetName) => {
+  const strategies = [
+    () => page.locator(`button[formcontrolname="${targetName}"]`),
+    () => page.getByRole('button', { name: targetName }),
+    () => page.locator(`button:has-text("${targetName}")`),
+    () => page.locator(`button[title*="${targetName}"]`),
+    () => page.locator(`.p-button:has-text("${targetName}")`)
+  ];
+
+  for (const getLocator of strategies) {
+    const loc = getLocator();
+    if (await loc.count() > 0 && await loc.first().isVisible()) {
+      return loc.first(); // Self-healed successfully
+    }
+  }
+  throw new Error(`Self-healing failed: Element not found: ${targetName}`);
+}
+```
+
+### 2.2. Multimodal Visual Verification (GIS & Layout)
+```javascript
+async (page) => {
+  const mapElement = page.locator('div.ol-viewport');
+  const screenshotBuffer = await mapElement.screenshot({ path: '.agents/screenshots/gis_canvas_live.png' });
+  const box = await mapElement.boundingBox();
+  return {
+    isRenderedProperly: box && box.width > 300 && box.height > 200,
+    width: box ? box.width : 0,
+    height: box ? box.height : 0,
+    screenshotPath: '.agents/screenshots/gis_canvas_live.png'
+  };
+}
+```
+
+### 2.3. Autonomous Exploratory Fuzzing (Edge & Crash Hunting)
+```javascript
+async (page) => {
+  const edgePayloads = [
+    "'-DROP TABLE--",
+    "<script>alert(1)</script>",
+    "-99999999",
+    "   ",
+    "A".repeat(500)
+  ];
+  const results = [];
+  const input = page.locator('input[formcontrolname="code"]').first();
+
+  for (const payload of edgePayloads) {
+    await input.fill(payload);
+    await page.locator('button:has-text("Lưu"), button:has-text("Xác nhận")').first().click();
+    await page.waitForTimeout(600);
+
+    const hasCrash = await page.evaluate(() => {
+      const text = document.body.innerText;
+      return text.includes('500 Internal') || text.includes('HttpErrorResponse');
+    });
+    results.push({ payload, hasCrash });
+  }
+  return results;
+}
+```
+
+### 2.4. CDP Deep Profiling (RAM & Heap Monitoring)
+```javascript
+async (page) => {
+  const memoryInfo = await page.evaluate(() => {
+    return window.performance && window.performance.memory ? {
+      usedJSHeapSizeMB: (window.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(2),
+      totalJSHeapSizeMB: (window.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(2)
+    } : { note: "Memory API only available in Chromium" };
+  });
+  return memoryInfo;
+}
+```
+
+### 2.5. Multi-Agent Swarm Orchestration
+For swarm roles (Lead Orchestrator, Live Explorer, Code Crafter, Test Runner, Quality Gatekeeper, Scribe), refer to [swarm_orchestration.md](swarm_orchestration.md).

package/.agents/skills/playwright-live-interaction/references/compact_accessibility_snapshots.md

@@ -1,75 +1,75 @@
-# Compact Accessibility-Tree Snapshots for PrimeNG Inspection
-
-*(Inherited from `vercel-labs/agent-browser`)*
-
-A token-efficient browser inspection technique for exploring enterprise Angular & PrimeNG single-page interface without dumping heavy raw DOM HTML.
-
----
-
-## 1. Problem: The Raw HTML Token Trap
-
-On modern Angular/PrimeNG applications:
-- A single complex screen (e.g. `DataMiningPage` with GIS Canvas, sidebar, and multi-field dialogs) contains **3,000+ lines of HTML**.
-- Dumping raw DOM trees consumes **15,000 to 30,000 tokens** per inspection, cluttering the agent's context window.
-
----
-
-## 2. Solution: Semantic Accessibility Snapshot
-
-Following the `agent-browser` architecture, we extract a **Compact Accessibility Tree** focused exclusively on interactive elements (`button`, `input`, `select`, `p-dropdown`, `p-calendar`, `p-table` headers and rows) assigned with lightweight identifier references (`@e1`, `@e2`, ...).
-
-### 2.1. In-Browser JavaScript Extractor
-Inject the following lightweight snippet via Playwright browser evaluate:
-
-```javascript
-(() => {
-  const interactiveSelectors = [
-    'button:not([disabled])',
-    'input:not([type="hidden"])',
-    'select',
-    'textarea',
-    'p-dropdown',
-    'p-calendar input',
-    'p-multiselect',
-    'a[href]',
-    '[role="button"]',
-    '[role="dialog"]',
-    '.p-toast-message'
-  ];
-  
-  const elements = Array.from(document.querySelectorAll(interactiveSelectors.join(',')))
-    .filter(el => {
-      const rect = el.getBoundingClientRect();
-      return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).visibility !== 'hidden';
-    });
-
-  return elements.map((el, idx) => {
-    const tag = el.tagName.toLowerCase();
-    const type = el.getAttribute('type') || '';
-    const name = el.getAttribute('name') || el.getAttribute('formcontrolname') || '';
-    const label = (el.innerText || el.placeholder || el.getAttribute('aria-label') || el.title || '').trim().replace(/\s+/g, ' ').slice(0, 50);
-    const role = el.getAttribute('role') || tag;
-    return `[@e${idx + 1}] <${tag}${type ? ' type=' + type : ''}${name ? ' name=' + name : ''}> "${label}"`;
-  }).join('\n');
-})();
-```
-
-### 2.2. Sample Compact Output (Under 500 Tokens vs 25,000 Tokens)
-
-```text
-[@e1] <input name=username> "Tên đăng nhập"
-[@e2] <input type=password name=password> "Mật khẩu"
-[@e3] <button type=submit> "Đăng nhập"
-[@e4] <p-dropdown name=layerSelect> "Chọn lớp dữ liệu"
-[@e5] <input placeholder="Nhập từ khóa tìm kiếm..."> "Tìm kiếm"
-[@e6] <button> "Thêm mới"
-[@e7] <button title="Xóa"> "Xóa"
-```
-
----
-
-## 3. Benefits for Enterprise Test Automation
-
-1. **Token Savings:** Reduces DOM inspection size by **90% - 95%**.
-2. **Speed:** Instant parsing in `< 20ms`.
-3. **Selector Mapping:** Once an element reference `@eN` is identified on screen, map it directly into the Clean POM Page Class using `BasePage.x()`.
+# Compact Accessibility-Tree Snapshots for PrimeNG Inspection
+
+*(Inherited from `vercel-labs/agent-browser`)*
+
+A token-efficient browser inspection technique for exploring enterprise Angular & PrimeNG single-page interface without dumping heavy raw DOM HTML.
+
+---
+
+## 1. Problem: The Raw HTML Token Trap
+
+On modern Angular/PrimeNG applications:
+- A single complex screen (e.g. `DataMiningPage` with GIS Canvas, sidebar, and multi-field dialogs) contains **3,000+ lines of HTML**.
+- Dumping raw DOM trees consumes **15,000 to 30,000 tokens** per inspection, cluttering the agent's context window.
+
+---
+
+## 2. Solution: Semantic Accessibility Snapshot
+
+Following the `agent-browser` architecture, we extract a **Compact Accessibility Tree** focused exclusively on interactive elements (`button`, `input`, `select`, `p-dropdown`, `p-calendar`, `p-table` headers and rows) assigned with lightweight identifier references (`@e1`, `@e2`, ...).
+
+### 2.1. In-Browser JavaScript Extractor
+Inject the following lightweight snippet via Playwright browser evaluate:
+
+```javascript
+(() => {
+  const interactiveSelectors = [
+    'button:not([disabled])',
+    'input:not([type="hidden"])',
+    'select',
+    'textarea',
+    'p-dropdown',
+    'p-calendar input',
+    'p-multiselect',
+    'a[href]',
+    '[role="button"]',
+    '[role="dialog"]',
+    '.p-toast-message'
+  ];
+  
+  const elements = Array.from(document.querySelectorAll(interactiveSelectors.join(',')))
+    .filter(el => {
+      const rect = el.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0 && window.getComputedStyle(el).visibility !== 'hidden';
+    });
+
+  return elements.map((el, idx) => {
+    const tag = el.tagName.toLowerCase();
+    const type = el.getAttribute('type') || '';
+    const name = el.getAttribute('name') || el.getAttribute('formcontrolname') || '';
+    const label = (el.innerText || el.placeholder || el.getAttribute('aria-label') || el.title || '').trim().replace(/\s+/g, ' ').slice(0, 50);
+    const role = el.getAttribute('role') || tag;
+    return `[@e${idx + 1}] <${tag}${type ? ' type=' + type : ''}${name ? ' name=' + name : ''}> "${label}"`;
+  }).join('\n');
+})();
+```
+
+### 2.2. Sample Compact Output (Under 500 Tokens vs 25,000 Tokens)
+
+```text
+[@e1] <input name=username> "Tên đăng nhập"
+[@e2] <input type=password name=password> "Mật khẩu"
+[@e3] <button type=submit> "Đăng nhập"
+[@e4] <p-dropdown name=layerSelect> "Chọn lớp dữ liệu"
+[@e5] <input placeholder="Nhập từ khóa tìm kiếm..."> "Tìm kiếm"
+[@e6] <button> "Thêm mới"
+[@e7] <button title="Xóa"> "Xóa"
+```
+
+---
+
+## 3. Benefits for Enterprise Test Automation
+
+1. **Token Savings:** Reduces DOM inspection size by **90% - 95%**.
+2. **Speed:** Instant parsing in `< 20ms`.
+3. **Selector Mapping:** Once an element reference `@eN` is identified on screen, map it directly into the Clean POM Page Class using `BasePage.x()`.