@autobest-ui/agent 1.0.23 → 1.0.25

package/mcp/trace-mcp-recorder/README.md

@@ -1,6 +1,6 @@
 # trace-mcp-recorder
 
-`trace-mcp-recorder` 是基于 `@modelcontextprotocol/sdk` 和 `StdioServerTransport` 的 Node.js MCP Server。它打开非无头 Chromium，并在页面左上角注入可收缩的半透明控制栏，供测试人员手动开始录制、截图、停止录制和切换设备；默认是 PC 端，也可切换为 iPhone 14 Pro Max 移动端模拟。页面先正常打开并等待，点击开始后先启动 Trace、刷新一次当前 SPA 页面并等待 DOM、CSS、字体和图片稳定，再进入正式录制；普通点击、输入和滚动不会生成自定义 Action，只有点击“截图”才会把当前渲染画面作为 Trace Group 写入官方 Viewer，截图时控制栏会临时隐藏。空闲超过 2 分钟自动结束，然后上传原生 `trace.zip` 和浏览器元数据，并返回私有后端的 Trace Viewer 链接。同一进程同一时间只允许一个录制任务。
+`trace-mcp-recorder` 是基于 `@modelcontextprotocol/sdk` 和 `StdioServerTransport` 的 Node.js MCP Server。它打开非无头 Chromium，PC 端默认 viewport 为 1400×740，并在页面右下角固定显示半透明的 2×2 控制栏：第一行是“开始录制”“停止录制”，第二行是“切换移动端”“截图”。四个按钮始终显示，不伸缩，统一高度 32px。默认是 PC 端，也可切换为 iPhone 14 Pro Max 移动端模拟。页面先正常打开并等待，点击开始后先启动 Trace，临时禁用 Chromium 缓存并刷新一次当前 SPA 页面，等待 DOM、CSS、字体和图片稳定后恢复缓存，再进入正式录制；普通点击、输入和滚动不会生成自定义 Action，只有点击“截图”才会把当前渲染画面作为 Trace Group 写入官方 Viewer，截图时控制栏会临时隐藏。空闲超过 2 分钟自动结束，然后上传原生 `trace.zip` 和浏览器元数据，并返回私有后端的 Trace Viewer 链接。同一进程同一时间只允许一个录制任务。
 
 ## 安装与启动
 

package/mcp/trace-mcp-recorder/index.js

@@ -15,6 +15,7 @@ import { z } from 'zod';
 const DEFAULT_MAX_RECORD_DURATION = 1_800_000;
 const USER_ACTIVITY_DEBOUNCE_DELAY = 800;
 const IDLE_STOP_DELAY = 120_000;
+const DESKTOP_VIEWPORT = { width: 1400, height: 740 };
 const IPHONE_14_PRO_MAX_DEVICE = {
   name: 'iPhone 14 Pro Max',
   width: 430,
@@ -141,10 +142,11 @@ function createRecorderPageScript() {
           :host { all: initial; }
           .toolbar {
             position: fixed;
-            left: 0;
-            top: 16px;
+            right: 16px;
+            bottom: 16px;
             z-index: 2147483647;
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(2, minmax(120px, 1fr));
             gap: 8px;
             padding: 7px;
             border: 1px solid rgba(255, 255, 255, .38);
@@ -153,17 +155,11 @@ function createRecorderPageScript() {
             box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
             backdrop-filter: blur(6px);
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-            transform: translateX(calc(-100% + 30px));
-            transition: transform .2s ease;
-          }
-          .toolbar:hover,
-          .toolbar:focus-within {
-            transform: translateX(0);
           }
           button {
             box-sizing: border-box;
-            min-width: 88px;
-            height: 34px;
+            min-width: 120px;
+            height: 32px;
             border: 1px solid rgba(255, 255, 255, .48);
             border-radius: 6px;
             color: #fff;
@@ -176,23 +172,15 @@ function createRecorderPageScript() {
           button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
           button:disabled { cursor: default; opacity: .42; }
           .start { background: rgba(22, 163, 74, .82); }
-          .screenshot { background: rgba(234, 88, 12, .82); }
           .stop { background: rgba(220, 38, 38, .82); }
-          .device { background: rgba(37, 99, 235, .82); min-width: 102px; }
-          .toggle {
-            flex: 0 0 24px;
-            min-width: 24px;
-            padding: 0;
-            background: rgba(255, 255, 255, .16);
-            font-size: 20px;
-          }
+          .device { background: rgba(37, 99, 235, .82); }
+          .screenshot { background: rgba(234, 88, 12, .82); }
         </style>
         <div class="toolbar" role="group" aria-label="Trace 录制控制">
-          <button class="toggle" type="button" aria-label="展开录制控制" data-trace-recorder-control>›</button>
           <button class="start" type="button" data-action="start" data-trace-recorder-control>开始录制</button>
-          <button class="screenshot" type="button" data-action="screenshot" data-trace-recorder-control>截图</button>
           <button class="stop" type="button" data-action="stop" data-trace-recorder-control>停止录制</button>
           <button class="device" type="button" data-action="toggle-device" data-trace-recorder-control>切换移动端</button>
+          <button class="screenshot" type="button" data-action="screenshot" data-trace-recorder-control>截图</button>
         </div>
       \`;
       document.documentElement.append(host);
@@ -324,7 +312,7 @@ export class TraceRecorder {
     try {
       temporaryDirectory = await this.makeTemporaryDirectory();
       browser = await this.launchChromium({ headless: false });
-      context = await browser.newContext();
+      context = await browser.newContext({ viewport: DESKTOP_VIEWPORT });
       let session;
       if (typeof context.exposeBinding === 'function') {
         await context.exposeBinding('__traceRecorderUserActivity', (_source, activity) => {
@@ -532,25 +520,44 @@ export class TraceRecorder {
       .evaluate(() => ({ x: window.scrollX, y: window.scrollY }))
       .catch(() => ({ x: 0, y: 0 }));
 
-    await session.page.reload({ waitUntil: 'domcontentloaded' });
-    // networkidle is intentionally best-effort: SPAs with polling/websockets
-    // may never become idle, while the resource checks below remain bounded.
-    if (typeof session.page.waitForLoadState === 'function') {
-      await session.page.waitForLoadState('networkidle', { timeout: 10_000 }).catch(() => {});
+    // The first page load may have populated Chromium's HTTP cache before
+    // tracing started. Disable cache only for this reload so CSS, images and
+    // fonts produce fresh response bodies inside trace.zip.
+    let cacheSession;
+    let cacheWasDisabled = false;
+    try {
+      if (typeof session.context.newCDPSession === 'function') {
+        cacheSession = session.cdpSessions.get(session.page) ?? await session.context.newCDPSession(session.page);
+        session.cdpSessions.set(session.page, cacheSession);
+        await cacheSession.send('Network.enable');
+        await cacheSession.send('Network.setCacheDisabled', { cacheDisabled: true });
+        cacheWasDisabled = true;
+      }
+
+      await session.page.reload({ waitUntil: 'domcontentloaded' });
+      // networkidle is intentionally best-effort: SPAs with polling/websockets
+      // may never become idle, while the resource checks below remain bounded.
+      if (typeof session.page.waitForLoadState === 'function') {
+        await session.page.waitForLoadState('networkidle', { timeout: 10_000 }).catch(() => {});
+      }
+      await session.page
+        .evaluate(async () => {
+          await document.fonts?.ready?.catch?.(() => {});
+          const pendingImages = Array.from(document.images).filter(image => !image.complete);
+          await Promise.race([
+            Promise.all(pendingImages.map(image => new Promise(resolve => {
+              image.addEventListener('load', resolve, { once: true });
+              image.addEventListener('error', resolve, { once: true });
+            }))),
+            new Promise(resolve => setTimeout(resolve, 10_000))
+          ]);
+        })
+        .catch(() => {});
+    } finally {
+      if (cacheWasDisabled) {
+        await cacheSession.send('Network.setCacheDisabled', { cacheDisabled: false }).catch(() => {});
+      }
     }
-    await session.page
-      .evaluate(async () => {
-        await document.fonts?.ready?.catch?.(() => {});
-        const pendingImages = Array.from(document.images).filter(image => !image.complete);
-        await Promise.race([
-          Promise.all(pendingImages.map(image => new Promise(resolve => {
-            image.addEventListener('load', resolve, { once: true });
-            image.addEventListener('error', resolve, { once: true });
-          }))),
-          new Promise(resolve => setTimeout(resolve, 10_000))
-        ]);
-      })
-      .catch(() => {});
     if (currentUrl && typeof session.page.url === 'function' && session.page.url() !== currentUrl) {
       await session.page.goto(currentUrl, { waitUntil: 'domcontentloaded' });
     }
@@ -620,7 +627,7 @@ export class TraceRecorder {
       : session.desktopUserAgent;
     session.metadata.viewport = nextMode === 'mobile'
       ? { width: IPHONE_14_PRO_MAX_DEVICE.width, height: IPHONE_14_PRO_MAX_DEVICE.height }
-      : session.page.viewportSize();
+      : { ...DESKTOP_VIEWPORT };
     return { state: session.state, deviceMode: session.deviceMode, deviceName: session.deviceName };
   }
 

package/mcp/trace-mcp-recorder/index.test.js

@@ -120,6 +120,11 @@ test('page controls start recording, record activity, upload and clean up one se
   assert.ok(calls.some(call => call[0] === 'trace-group' && call[1] === '步骤1 | 未命名页面'));
   assert.ok(calls.some(call => call[0] === 'reload' && call[1].waitUntil === 'domcontentloaded'));
   assert.ok(calls.findIndex(call => call[0] === 'trace-start') < calls.findIndex(call => call[0] === 'reload'));
+  const cacheOnIndex = calls.findIndex(call => call[0] === 'cdp' && call[1] === 'Network.setCacheDisabled' && call[2].cacheDisabled === true);
+  const reloadIndex = calls.findIndex(call => call[0] === 'reload');
+  const cacheOffIndex = calls.findIndex(call => call[0] === 'cdp' && call[1] === 'Network.setCacheDisabled' && call[2].cacheDisabled === false);
+  assert.ok(cacheOnIndex < reloadIndex);
+  assert.ok(reloadIndex < cacheOffIndex);
   recorder.handleUserActivity(recorder.activeSession, {
     type: 'click',
     title: '首页功能'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/agent",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "private": false,
   "description": "Autobest Agent skills/plugins/mcp assets + sync cli",
   "files": [

package/skills/common/trace-recorder/SKILL.md

@@ -14,7 +14,7 @@ description: 通过 trace-mcp-recorder 启动或停止 Playwright Trace 人工
 1. 从原话提取 `url`、`version`、`title`、`operator`。支持 `key=value` 和自然语言表达，不改写用户给出的值。
 2. `url` 必填；缺少时只询问目标页面地址。其他字段缺失时不要阻断录制。
 3. 调用 `start_trace_recording`，只传入用户明确提供的可选字段。服务端会优先使用 MCP 上下文中的操作人身份。
-4. 告知用户浏览器已打开：默认是 PC 端；左上角控制栏默认收缩，悬停后展开，移出后自动收回。如需移动端测试，先展开并点击“切换移动端”（iPhone 14 Pro Max，430×932，DPR 3），再点击“开始录制”；点击开始后服务会先启动 Trace、刷新当前 SPA 页面一次并等待 DOM、CSS、字体和图片稳定，随后才进入正式录制计时。刷新期间不要操作页面；页面稳定后按需操作，只有点击“截图”才会保存当前渲染画面，普通点击、输入和滚动不会生成自定义 Action。截图时控制栏会临时隐藏。同一 BrowserContext 会保留 cookies、localStorage 和 sessionStorage，新打开的页面会继承当前设备模式。连续 2 分钟没有页面活动时服务会自动停止并上传。人工截图在官方 Trace Viewer 中显示为 `步骤N | 页面标题`。
+4. 告知用户浏览器已打开：默认是 PC 端（viewport 1400×740）；右下角固定显示 2×2 半透明控制栏，第一行是“开始录制”“停止录制”，第二行是“切换移动端”“截图”，四个按钮始终显示且高度为 32px。如需移动端测试，先点击“切换移动端”（iPhone 14 Pro Max，430×932，DPR 3），再点击“开始录制”；点击开始后服务会先启动 Trace，临时禁用 Chromium 缓存并刷新当前 SPA 页面，等待 DOM、CSS、字体和图片稳定后恢复缓存，随后才进入正式录制计时。刷新期间不要操作页面；页面稳定后按需操作，只有点击“截图”才会保存当前渲染画面，普通点击、输入和滚动不会生成自定义 Action。截图时所有控制按钮会临时隐藏。同一 BrowserContext 会保留 cookies、localStorage 和 sessionStorage，新打开的页面会继承当前设备模式。连续 2 分钟没有页面活动时服务会自动停止并上传。人工截图在官方 Trace Viewer 中显示为 `步骤N | 页面标题`。
 
 示例：`trace-mcp-recorder 启动Playwright trace 访问https://cpd.dev.autobestdevops.com，version=v2.1.0 title=bug3452 operator=张三`。这里 `title=bug3452` 是本次录制的标题/功能描述，页面由 `url=https://cpd.dev.autobestdevops.com` 确定。