@autobest-ui/agent 1.0.18 → 1.0.19

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，并在页面左下角注入半透明的“开始录制”“停止录制”和设备切换按钮供测试人员手动控制 Trace；默认是 PC 端，也可切换为 iPhone 14 Pro Max 移动端模拟。后续用户活动经过防抖后以 `步骤N | 页面标题 | 事件类型` 的 Trace Group 写入轻量 Playwright Action，空闲超过 2 分钟自动结束，然后上传原生 `trace.zip` 和浏览器元数据，并返回私有后端的 Trace Viewer 链接。同一进程同一时间只允许一个录制任务。
+`trace-mcp-recorder` 是基于 `@modelcontextprotocol/sdk` 和 `StdioServerTransport` 的 Node.js MCP Server。它打开非无头 Chromium，并在页面左下角注入半透明的“开始录制”“停止录制”和设备切换按钮供测试人员手动控制 Trace；默认是 PC 端，也可切换为 iPhone 14 Pro Max 移动端模拟。点击开始后先自动刷新一次页面，确保 DOM Snapshot 所引用的图片、CSS 和网络资源被 Trace 捕获；后续用户活动经过防抖后以 `步骤N | 页面标题 | 事件类型` 的 Trace Group 写入轻量 Playwright Action，空闲超过 2 分钟自动结束，然后上传原生 `trace.zip` 和浏览器元数据，并返回私有后端的 Trace Viewer 链接。同一进程同一时间只允许一个录制任务。
 
 ## 安装与启动
 
@@ -43,7 +43,7 @@ npm start
 
 录制超时后服务自动停止并自动上传（无需人工确认），随后第一次人工调用 `stop_trace_recording` 会取回自动停止的结果；再调用则返回没有活动会话。
 
-Trace 在点击页面左下角“开始录制”后才开始计时；点击“停止录制”会立即停止并自动上传，随后可通过 `stop_trace_recording` 取回回放链接。设备切换和录制控制按钮不会写入操作步骤；新打开的页面会继承当前设备模式。连续用户操作停止 800ms 后写入一个带自定义名称的 `tracing.group()`，组内使用 `waitForTimeout(1)` 推进官方 Viewer 播放；连续 2 分钟没有真实用户操作时自动停止并上传。停止录制时会补一个最终 Action。页面自身的轮播、动画和图片加载不会触发录制节点。官方 Viewer 的具体显示可能是 Group 标签或 Group 内嵌 Wait 节点，取决于 Viewer 版本。
+Trace 在点击页面左下角“开始录制”后先刷新页面，再开始计时；点击“停止录制”会立即停止并自动上传，随后可通过 `stop_trace_recording` 取回回放链接。设备切换和录制控制按钮不会写入操作步骤；新打开的页面会继承当前设备模式。连续用户操作停止 800ms 后写入一个带自定义名称的 `tracing.group()`，组内使用 `waitForTimeout(1)` 推进官方 Viewer 播放；连续 2 分钟没有真实用户操作时自动停止并上传。停止录制时会补一个最终 Action。页面自身的轮播、动画和图片加载不会触发录制节点。官方 Viewer 的具体显示可能是 Group 标签或 Group 内嵌 Wait 节点，取决于 Viewer 版本。
 
 ## 后端接口契约
 

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

@@ -491,6 +491,11 @@ export class TraceRecorder {
     if (session.tracingStarted || session.state !== 'waiting_for_start') return;
     await session.context.tracing.start({ screenshots: true, snapshots: true, sources: true });
     session.tracingStarted = true;
+    // The initial navigation happened before Trace started. Reload now so the
+    // DOM snapshot also has response bodies for images, CSS, and other assets.
+    if (typeof session.page.reload === 'function') {
+      await session.page.reload({ waitUntil: 'load' });
+    }
     session.state = 'recording';
     session.lastActivityAt = Date.now();
     session.timer = this.setTimer(() => {
@@ -559,10 +564,7 @@ export class TraceRecorder {
       if (session.state === 'recording') return { state: session.state };
       if (session.state !== 'waiting_for_start') return { state: session.state };
       if (!session.activityPromise) {
-        session.activityPromise = this.beginRecording(session).catch(error => {
-          session.state = 'failed';
-          throw error;
-        });
+        session.activityPromise = this.beginRecording(session).catch(error => this.failSession(session, error));
       }
       return session.activityPromise.then(() => ({ state: session.state, deviceMode: session.deviceMode }));
     }
@@ -719,6 +721,7 @@ export class TraceRecorder {
     this.clearTimer(session.timer);
     this.clearTimer(session.idleTimer);
     this.clearTimer(session.activityDebounceTimer);
+    if (session.tracingStarted) await session.context.tracing.stop({ path: session.tracePath }).catch(() => {});
     await this.closeResources(session);
     await this.removeTemporaryDirectory(session.temporaryDirectory).catch(() => {});
     if (this.activeSession === session) this.activeSession = undefined;

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

@@ -22,6 +22,7 @@ function createFixture(options = {}) {
   };
   const page = {
     goto: async url => calls.push(['goto', url]),
+    reload: async options => calls.push(['reload', options]),
     evaluate: async () => 'Fixture User Agent',
     waitForTimeout: async duration => calls.push(['wait', duration]),
     viewportSize: () => ({ width: 1280, height: 720 }),
@@ -110,6 +111,7 @@ test('page controls start recording, record activity, upload and clean up one se
     state: 'recording',
     deviceMode: 'desktop'
   });
+  assert.ok(calls.some(call => call[0] === 'reload' && call[1].waitUntil === 'load'));
   recorder.handleUserActivity(recorder.activeSession, {
     type: 'click',
     title: '首页功能'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/agent",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "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 和计时；新打开的页面会继承当前设备模式。连续 2 分钟没有真实操作时服务会自动停止并上传。真实操作经防抖后会在官方 Trace Viewer 中以 `步骤N | 页面标题 | 事件类型` 的分组节点呈现。
+4. 告知用户浏览器已打开：默认是 PC 端；如需移动端测试，先点击左下角“切换移动端”（iPhone 14 Pro Max，430×932，DPR 3），再点击“开始录制”；点击开始后服务会先刷新一次当前页面以捕获图片等资源，再启动计时，用户正式操作前不要提交表单或进行其他操作；操作完成后点击“停止录制”。新打开的页面会继承当前设备模式。连续 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` 确定。