可视化自动化工具实现

第一章：引言

在数字化浪潮席卷全球的今天，浏览器已经成为人们访问互联网信息的第一入口。从日常办公到在线购物，从社交娱乐到金融服务，近九成的互联网应用都运行在浏览器之中。

然而，随着业务场景日益复杂，重复性的浏览器操作正在消耗大量人力------UI 测试工程师需要反复验证界面交互、数据采集人员需要手动点击一个个页面、运营人员需要定时执行一系列标准化操作。这些场景有一个共同特点：规则明确、重复性强、但人工执行效率低下。

这正是浏览器自动化技术诞生的背景。可视化自动化可以理解为"为浏览器装上自动驾驶仪"------它让计算机能够模拟人类操作鼠标、键盘的行为，自动完成点击、输入、滚动、截图等交互动作。与传统命令行脚本相比，可视化自动化的核心优势在于所见即所得：用户可以通过直观的界面配置自动化流程，无需编写复杂的代码逻辑，极大降低了使用门槛。

OpenClaw 作为新一代自动化工具，在浏览器自动化领域进行了深度创新。它不仅仅是一个"点击机器人"，更是一套完整的可视化自动化解决方案。通过深度集成 CDP 协议，OpenClaw 实现了对浏览器底层能力的精准控制；通过 Canvas 画布渲染机制与 A2UI 推送技术，用户可以实时看到自动化执行的每一个步骤；通过多配置文件支持，复杂的工作流可以被模块化复用。

本文将带领读者深入了解 OpenClaw 可视化自动化的技术架构与实践方法。我们将从浏览器控制工具的底层原理出发，逐步揭开 CDP 协议的神秘面纱，探索 Canvas 渲染机制的运作方式，并通过真实的应用案例，展示 UI 测试、数据采集、工作流编排等场景的具体实现。

无论你是希望提升测试效率的 QA 工程师，还是需要批量处理数据的运营人员，抑或是对自动化技术充满好奇的开发者，本文都将为你提供有价值的参考。

---

第二章：浏览器控制工具架构

2.1 CDP 协议概述

Chrome DevTools Protocol（CDP）是 Google 提供的一套用于检测和操控 Chromium 浏览器的底层通信协议。OpenClaw 的浏览器控制能力正是建立在对 CDP 协议的深度集成之上。

CDP 采用 WebSocket 长连接作为通信载体。当 OpenClaw 启动浏览器实例时，会建立一条持久化的 WebSocket 通道，所有后续的页面控制指令和事件回调都通过这条通道双向传输。这种设计相比传统的 HTTP 请求-响应模式，具有更低的延迟和更好的实时性。

CDP 的核心概念是"域"（Domain）。协议将浏览器能力划分为多个功能域：

• Page 域：页面导航、加载状态、帧生命周期管理
• DOM 域：DOM 树查询、节点操作、事件监听
• Runtime 域：JavaScript 执行、上下文管理、对象远程引用
• Network 域：网络请求拦截、响应修改、Cookie 管理
• Input 域：键盘、鼠标、触摸事件的模拟注入
• Target 域：多 Tab 管理、iframe 连接、Worker 调试

OpenClaw 的 browser 工具屏蔽了 CDP 的原始报文细节，在协议层之上构建了一套面向自动化任务的高级操作接口。

图 2-1: CDP 协议架构 --- WebSocket 双向通信与域模型示意

2.2 OpenClaw Browser 架构

OpenClaw 的 browser 工具提供了一站式浏览器控制能力。其架构可概括为三个层次：

管理层 ：负责浏览器实例的生命周期。通过 action: start/stop/status 控制浏览器的启动、关闭和状态查询。支持 profiles 操作列出所有可用的浏览器配置文件。

控制层：实现页面级别的操作。核心 action 包括：

• navigate：页面导航到指定 URL
• snapshot：获取页面结构化快照（支持 role 和 aria 两种引用方式）
• screenshot：截取页面截图（支持 PNG/JPEG 格式，可控制全页或可视区域）
• open/close/focus：Tab 页管理
• console/pdf/upload/dialog：特殊功能（控制台日志、PDF 生成、文件上传、弹窗处理）

交互层 ：通过 action: act 实现精细的页面交互。支持的交互类型（kind）包括：click、type、press、hover、drag、select、fill、resize、wait、evaluate、close。每个操作都支持 ref 参数指定目标元素，以及 timeoutMs、delayMs 等控制参数。

OpenClaw 支持两种浏览器模式：

• 隔离浏览器（默认）：OpenClaw 自行管理 Chromium 实例，具有干净的初始状态，适合自动化任务
• 用户浏览器 （profile: "user"）：连接到用户日常使用的浏览器实例，继承已有的登录状态和 Cookie，适合需要身份验证的场景

2.3 页面控制核心操作

页面快照（snapshot）是 OpenClaw 浏览器自动化的核心机制。快照不是像素级的截图，而是对页面 DOM 结构的语义化提取。通过 refs 参数选择引用策略：

• role 引用 （refs: "role"）：基于 ARIA 角色和可访问性名称生成引用，适合标准语义化页面
• aria 引用 （refs: "aria"）：生成 Playwright 风格的 aria-ref ID，在多次调用间保持稳定

快照还可通过 snapshotFormat 选择输出格式："aria" 格式返回结构化 ARIA 树，"ai" 格式返回经过优化的 AI 可读摘要。

// 获取页面快照（role 引用）
browser({
  action: "snapshot",
  refs: "role"
})

// 点击搜索按钮
browser({
  action: "act",
  kind: "click",
  ref: "e42"
})

// 在搜索框中输入文本
browser({
  action: "act",
  kind: "type",
  ref: "e15",
  text: "OpenClaw browser automation"
})

// 按下回车提交搜索
browser({
  action: "act",
  kind: "press",
  ref: "e15",
  key: "Enter"
})

截图（screenshot）用于像素级的页面验证。支持 type 参数选择 png 或 jpeg 格式，fullPage 参数控制是否截取整个滚动页面。

---

第三章：Canvas 画布渲染机制

3.1 Canvas 子系统概述

Canvas 是 OpenClaw 提供的画布渲染子系统，用于在会话中呈现和管理可视化内容。与 browser 工具关注页面操控不同，Canvas 专注于内容的展示和交互。

Canvas 支持以下核心操作：

• present：将 HTML 内容推送到画布上进行渲染展示
• hide：隐藏当前画布内容
• navigate：在画布内导航到新的 URL
• eval：在画布上下文中执行 JavaScript 代码
• snapshot：对当前画布进行截图快照
• a2ui_push：推送 A2UI 格式的内容更新到画布
• a2ui_reset：重置 A2UI 画布状态

Canvas 的渲染管线由浏览器引擎驱动。当调用 present 时，OpenClaw 将 HTML 内容注入到一个受控的 Chromium 上下文中，经过标准的 HTML 解析、CSS 样式计算、布局、绘制流程，最终在用户界面中呈现。

图 3-1: Canvas 渲染管线 --- HTML 注入到可视呈现的流程

3.2 A2UI 推送机制

A2UI（Agent-to-User Interface）推送是 Canvas 子系统的核心创新之一。它允许 Agent 在不重新加载整个页面的情况下，增量地更新画布内容。

a2ui_push 工作流程：

1. Agent 构造 A2UI 格式的内容负载（通常以 JSON 或 HTML 片段形式）
2. 通过 canvas action=a2ui_push 将内容推送到当前画布
3. OpenClaw 渲染引擎将新内容与现有画布合并
4. 用户在界面上看到实时更新

这种增量更新机制相比完整的页面重载有显著优势：

• 更低的带宽消耗
• 更快的更新速度
• 保持用户交互状态不被中断

a2ui_reset 工作流程：

当需要完全替换画布内容时，调用 canvas action=a2ui_reset 清空当前 A2UI 状态，然后重新 a2ui_push 新内容。这相当于一次"软重置"------画布容器本身保持不变，但内容被完全替换。

// 推送实时数据更新
canvas({
  action: "a2ui_push",
  jsonl: '{"type":"update","data":{"cpu":72,"mem":58}}'
})

// 重置画布并推送新内容
canvas({
  action: "a2ui_reset"
})
canvas({
  action: "a2ui_push",
  jsonl: '{"type":"dashboard","title":"System Monitor"}'
})

3.3 可视化工作空间设计

Canvas 与 OpenClaw 的 Embed 系统深度集成。在 Control UI/WebChat 会话中，Canvas 内容以嵌入式方式渲染在对话气泡内。

画布尺寸可通过 width、height、maxWidth 参数控制。快照输出支持 outputFormat 参数选择 png、jpg 或 jpeg 格式，quality 参数控制 JPEG 压缩质量（取值范围 0-100）。

Canvas 的主要应用场景包括：

• 数据仪表盘：实时展示系统监控指标
• 文档预览：在对话中内嵌渲染文档
• 交互式表单：构建可视化数据收集界面
• 流程可视化：展示任务执行流程和状态

---

第四章：多配置文件支持

4.1 Profile 管理

OpenClaw 的浏览器工具支持多 Profile（配置文件）管理。每个 Profile 是一个独立的浏览器数据容器，拥有各自的 Cookie、LocalStorage、IndexedDB 和扩展程序。

通过 browser action=profiles 可以列出所有可用的 Profile。常见的 Profile 包括：

• openclaw（默认）：OpenClaw 托管的隔离浏览器，每次启动时使用干净的数据目录
• user：连接到用户本地运行的浏览器，继承用户的登录状态和浏览数据

Profile 切换通过 profile 参数实现：

// 使用默认隔离浏览器
browser({
  action: "navigate",
  url: "https://example.com"
})

// 切换到用户浏览器（需要用户在场并授权）
browser({
  action: "navigate",
  url: "https://example.com",
  profile: "user"
})

Profile 的核心价值在于登录状态隔离。不同的自动化任务可以使用不同的 Profile，避免 Cookie 冲突导致的状态混乱。

4.2 多浏览器实例

OpenClaw 支持多种浏览器部署模式：

OpenClaw 托管浏览器：由 OpenClaw 自动管理 Chromium 实例的生命周期，数据目录位于 OpenClaw 管理路径下，适合自动化、无人值守场景。默认使用此模式。

用户本地浏览器 ：连接到用户已在运行的 Chromium 浏览器，需要 profile: "user" 参数，需要用户在本地授权连接，适合需要用户登录状态的场景。

Node 远程浏览器代理 ：通过 target: "node" 参数连接到远程节点上的浏览器，支持在树莓派、VPS 等远程设备上控制浏览器，适合分布式自动化场景。OpenClaw 的 Node 连接机制确保远程通信的安全性。

// 在远程 Node 上控制浏览器
browser({
  action: "snapshot",
  target: "node",
  node: "raspberry-pi-1"
})

4.3 会话持久化

浏览器会话的持久化通过两个关键机制实现：

TargetId 引用管理 ：每次 snapshot 或 navigate 操作返回的快照中包含 targetId，后续操作可以通过 targetId 参数指定目标 Tab 或 iframe。这确保在多个 Tab 之间切换时，操作能精确作用于预期的页面上下文。

Tab 状态维护 ：使用 browser action=tabs 列出所有打开的 Tab，使用 browser action=focus targetId=<id> 切换到指定 Tab，使用 browser action=close targetId=<id> 关闭指定 Tab，使用 browser action=open url="..." 在新 Tab 中打开页面。

Tab 状态的维护使得复杂的多页面自动化流程成为可能。例如，可以同时打开多个网页进行对比，或者在主页面和弹窗之间交替操作。

// 打开多个 Tab
browser({
  action: "open",
  url: "https://page1.example.com"
})
browser({
  action: "open",
  url: "https://page2.example.com"
})

// 列出所有 Tab
browser({
  action: "tabs"
})

// 切换到第二个 Tab（使用返回的 targetId）
browser({
  action: "focus",
  targetId: "TAB-2"
})

// 在第二个 Tab 上获取快照
browser({
  action: "snapshot",
  targetId: "TAB-2",
  refs: "role"
})

---

第五章：应用场景与实践

本章将通过三个典型场景，展示 OpenClaw 可视化自动化工具在实际工作中的应用。每个场景都包含完整的工具调用示例，可直接运行或根据需求调整。

5.1 UI 自动化测试

UI 自动化测试是可视化工具的核心应用场景之一。通过 snapshot 获取页面状态，结合 act 执行交互操作，可以实现端到端的自动化测试流程。

5.1.1 Snapshot + Act 组合模式

标准的 UI 自动化测试流程遵循"观察-判断-行动"的循环模式：

// 第一步：获取页面快照
browser({
  action: "snapshot",
  refs: "aria",
  snapshotFormat: "ai"
})

// 第二步：基于快照判断元素状态，执行操作
browser({
  action: "act",
  kind: "click",
  ref: "e12"
})

5.1.2 元素定位策略

OpenClaw 支持两种元素引用方式，各有适用场景：

引用方式	参数值	特点	适用场景
Role 引用	refs: "role"	基于元素角色+名称，人类可读	稳定页面、长期维护的测试
ARIA 引用	refs: "aria"	基于 ARIA ID，精确稳定	动态内容、复杂交互页面

推荐实践：

• 开发阶段使用 role 引用，便于调试和理解

• 生产环境使用 aria 引用，确保稳定性

  // Role 引用示例 - 基于元素角色和名称
  browser({
  action: "act",
  kind: "click",
  ref: "button Submit"
  })

  // ARIA 引用示例 - 基于快照返回的 e12 等 ID
  browser({
  action: "act",
  kind: "fill",
  ref: "e15",
  text: "test@example.com"
  })

5.1.3 表单自动填写示例

以下是一个完整的登录表单自动化测试示例：

// 1. 打开登录页面
browser({
  action: "navigate",
  url: "https://example.com/login"
})

// 2. 获取页面快照，识别表单元素
browser({
  action: "snapshot",
  refs: "aria",
  snapshotFormat: "aria"
})

// 3. 填写用户名
browser({
  action: "act",
  kind: "fill",
  ref: "e10",
  text: "testuser"
})

// 4. 填写密码
browser({
  action: "act",
  kind: "fill",
  ref: "e12",
  text: "testpassword123"
})

// 5. 点击登录按钮
browser({
  action: "act",
  kind: "click",
  ref: "e15"
})

// 6. 等待页面跳转并验证
browser({
  action: "act",
  kind: "wait",
  timeMs: 2000
})

// 7. 获取跳转后页面快照验证登录成功
browser({
  action: "snapshot",
  refs: "aria"
})

---

5.2 数据采集

数据采集是另一个高频应用场景。OpenClaw 提供 web_fetch 和 browser 两种工具，可根据页面特性灵活选择。

5.2.1 Web Fetch + Browser 混合方案

工具	适用场景	优势	限制
web_fetch	静态页面、API 端点	轻量快速、无需浏览器	无法执行 JavaScript
browser	动态渲染页面、需要交互	完整渲染、支持交互	资源消耗较高

混合策略：

1. 先用 web_fetch 快速探测页面结构
2. 若内容不完整，切换到 browser 模式
3. 对于批量任务，静态页面用 web_fetch，动态页面用 browser

5.2.2 页面提取与解析

// 静态页面数据采集 - 使用 web_fetch
web_fetch({
  url: "https://api.example.com/data",
  extractMode: "markdown",
  maxChars: 5000
})

// 动态页面数据采集 - 使用 browser
browser({
  action: "navigate",
  url: "https://spa.example.com/dashboard"
})

// 等待动态内容加载
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle",
  timeoutMs: 10000
})

// 提取页面内容
browser({
  action: "snapshot",
  snapshotFormat: "ai",
  compact: true
})

5.2.3 动态渲染页面处理

现代 Web 应用大量使用 JavaScript 动态渲染，需要特殊处理：

// 处理动态渲染页面的完整流程
browser({
  action: "navigate",
  url: "https://react-app.example.com/list"
})

// 等待网络空闲，确保 AJAX 请求完成
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle",
  timeoutMs: 10000
})

// 如需加载更多内容，滚动页面触发懒加载
browser({
  action: "act",
  kind: "press",
  key: "End"
})

// 再次等待内容加载
browser({
  action: "act",
  kind: "wait",
  timeMs: 2000
})

// 获取完整页面快照
browser({
  action: "snapshot",
  refs: "aria",
  snapshotFormat: "ai"
})

---

5.3 工作流编排

复杂任务往往需要多个工具协同工作。OpenClaw 支持 browser、exec 和 cron 的灵活组合，实现自动化工作流。

案例 1：每日网页数据抓取

定时抓取网站数据并保存到本地文件：

// 1. 创建定时任务（通过 OpenClaw cron 系统）
// 使用 openclaw cron add 命令设置定时触发
// cron schedule: "0 9 * * *" （每天上午9点执行）

// 2. 任务执行流程
// 2.1 打开目标页面
browser({
  action: "navigate",
  url: "https://data.example.com/daily"
})

// 2.2 等待数据加载
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle",
  timeoutMs: 10000
})

// 2.3 获取页面数据
browser({
  action: "snapshot",
  snapshotFormat: "ai"
})

// 2.4 执行脚本保存数据（通过 exec 调用本地脚本）
exec({
  command: "node /scripts/save-data.js --date=$(date +%Y-%m-%d)"
})

案例 2：自动化表单提交

定期自动填写并提交表单：

// 完整的表单自动化提交流程
browser({
  action: "navigate",
  url: "https://forms.example.com/submit"
})

// 获取表单结构
browser({
  action: "snapshot",
  refs: "aria"
})

// 填写表单字段
browser({
  action: "act",
  kind: "fill",
  ref: "e5",
  text: "自动提交任务"
})

browser({
  action: "act",
  kind: "fill",
  ref: "e8",
  text: "这是通过 OpenClaw 自动化工具提交的内容"
})

// 选择下拉选项
browser({
  action: "act",
  kind: "select",
  ref: "e12",
  values: ["option2"]
})

// 勾选同意条款
browser({
  action: "act",
  kind: "click",
  ref: "e15"
})

// 提交表单
browser({
  action: "act",
  kind: "click",
  ref: "e20"
})

// 验证提交结果
browser({
  action: "act",
  kind: "wait",
  timeMs: 3000
})

browser({
  action: "snapshot",
  refs: "aria"
})

案例 3：多页面批量截图

批量访问多个页面并生成截图报告：

// 多页面批量截图流程
// 页面列表：/products, /about, /contact, /pricing

// 页面 1: Products
browser({
  action: "navigate",
  url: "https://example.com/products"
})
browser({
  action: "screenshot",
  fullPage: true,
  type: "png"
})

// 页面 2: About
browser({
  action: "navigate",
  url: "https://example.com/about"
})
browser({
  action: "screenshot",
  fullPage: true,
  type: "png"
})

// 页面 3: Contact
browser({
  action: "navigate",
  url: "https://example.com/contact"
})
browser({
  action: "screenshot",
  fullPage: true,
  type: "png"
})

// 页面 4: Pricing
browser({
  action: "navigate",
  url: "https://example.com/pricing"
})
browser({
  action: "screenshot",
  fullPage: true,
  type: "png"
})

// 使用 exec 生成汇总报告
exec({
  command: "python /scripts/generate-report.py --screenshots-dir=/captures/$(date +%Y%m%d)"
})

---

第六章：代码示例

本章提供完整的可视化自动化代码示例，帮助开发者快速上手 OpenClaw 的浏览器控制和 Canvas 可视化功能。

6.1 基础浏览器控制示例

适用场景：网页数据采集、页面监控、UI 自动化测试

// 步骤 1: 启动浏览器（使用隔离的 OpenClaw 配置）
browser({
  action: "start",
  profile: "openclaw"  // 隔离环境，不影响用户浏览器
})

// 步骤 2: 导航到目标网页
browser({
  action: "navigate",
  url: "https://example.com"
})

// 等待页面完全加载
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle",
  timeoutMs: 30000
})

// 步骤 3: 获取页面快照（用于元素定位）
browser({
  action: "snapshot",
  refs: "aria",  // 使用 aria-ref 格式，更稳定
  snapshotFormat: "ai"  // AI 优化格式
})

// 步骤 4: 点击页面元素
browser({
  action: "act",
  kind: "click",
  ref: "e12"  // 从快照获取的元素引用
})

// 步骤 5: 截图保存
browser({
  action: "screenshot",
  type: "png",
  fullPage: true  // 完整页面截图
})

// 步骤 6: 关闭浏览器
browser({
  action: "stop"
})

预期输出：

• 浏览器成功启动并导航到目标页面
• 生成包含元素引用的页面快照
• 完整页面截图保存为 PNG 文件

最佳实践：

• 始终使用 profile: "openclaw" 保持环境隔离
• 使用 refs: "aria" 获取稳定的元素引用
• 操作前先获取快照确保元素可见

---

6.2 表单自动化示例

适用场景：自动登录、表单填写、数据提交

// 步骤 1: 打开登录页面
browser({
  action: "navigate",
  url: "https://app.example.com/login"
})

// 步骤 2: 获取页面元素快照
browser({
  action: "snapshot",
  refs: "role"  // 使用角色定位表单元素
})

// 步骤 3: 填写用户名
browser({
  action: "act",
  kind: "type",
  text: "myusername",
  ref: "textbox[name='username']"
})

// 步骤 4: 填写密码
browser({
  action: "act",
  kind: "type",
  text: "mypassword",
  ref: "textbox[name='password']"
})

// 步骤 5: 提交表单
browser({
  action: "act",
  kind: "click",
  ref: "button[type='submit']"
})

// 步骤 6: 验证登录结果
browser({
  action: "snapshot",
  snapshotFormat: "ai"
})
// 检查快照中是否包含登录成功元素（如用户头像、欢迎消息）

预期输出：

• 表单字段成功填写
• 提交后页面跳转到用户主页
• 快照显示登录成功的标识元素

注意事项：

• 密码等敏感信息应从环境变量读取，避免硬编码
• navigate 默认等待页面加载完成，可通过 act kind=wait 进行更精细的控制
• 提交后建议添加延迟等待页面跳转完成

---

6.3 多页面批处理示例

适用场景：批量截图、多站点监控、数据对比

// 定义待处理 URL 列表
const urls = [
  "https://site1.example.com",
  "https://site2.example.com",
  "https://site3.example.com"
]

// 步骤 1: 启动浏览器
browser({
  action: "start",
  profile: "openclaw"
})

// 步骤 2: 批量处理每个页面
for (let i = 0; i < urls.length; i++) {
  // 导航到页面
  browser({
    action: "navigate",
    url: urls[i]
  })

  // 等待页面加载
  browser({
    action: "act",
    kind: "wait",
    loadState: "networkidle",
    timeoutMs: 30000
  })
  
  // 截图保存
  browser({
    action: "screenshot",
    type: "png",
    fullPage: true
    // 文件名自动生成，包含页面索引
  })
  
  console.log(`截图完成: ${urls[i]}`)
}

// 步骤 3: 关闭浏览器
browser({
  action: "stop"
})

预期输出：

• 所有页面截图保存成功
• 控制台输出处理进度

最佳实践：

• 批量操作保持单个浏览器实例，减少资源开销
• 大批量任务考虑添加页面间延迟，避免触发反爬机制
• 在 navigate 后添加 act kind=wait loadState=networkidle timeoutMs=30000 确保页面完全加载

---

6.4 Canvas 可视化示例

适用场景：实时监控大屏、远程协助、演示分享

// 场景 A: 展示当前浏览器页面
canvas({
  action: "present",
  url: "https://dashboard.example.com",
  width: 1920,
  height: 1080
})

// 场景 B: 推送实时更新（A2UI）
canvas({
  action: "a2ui_push",
  jsonl: JSON.stringify({
    type: "status_update",
    message: "检测到新订单",
    timestamp: Date.now()
  })
})

// 场景 C: 获取画布快照
canvas({
  action: "snapshot",
  outputFormat: "png",
  quality: 90  // JPEG 图片质量 (0-100)
})

// 场景 D: 隐藏画布
canvas({
  action: "hide"
})

// 场景 E: 在画布中执行 JavaScript
canvas({
  action: "eval",
  javaScript: `
    document.querySelector('.notification').style.display = 'block';
    document.querySelector('.notification').textContent = '任务完成';
  `
})

预期输出：

• Canvas 展示指定页面
• 实时推送的消息显示在界面上
• 快照保存为高质量 PNG 图片

最佳实践：

• 使用 A2UI 推送实现双向通信
• 快照质量根据网络带宽调整（quality 参数仅对 JPEG 有效）
• 复杂交互使用 eval 执行自定义脚本

---

6.5 完整工作流示例

适用场景：定时任务、自动化巡检、报表生成

// 完整工作流：每日网站健康检查 + 截图报告

// 步骤 1: 启动浏览器
browser({
  action: "start",
  profile: "openclaw"
})

// 步骤 2: 访问目标站点
browser({
  action: "navigate",
  url: "https://mysite.example.com/health"
})

// 等待页面加载（带超时）
browser({
  action: "act",
  kind: "wait",
  loadState: "networkidle",
  timeoutMs: 30000
})

// 步骤 3: 获取页面状态快照
browser({
  action: "snapshot",
  refs: "aria",
  snapshotFormat: "ai"
})

// 步骤 4: 执行健康检查脚本
browser({
  action: "act",
  kind: "evaluate",
  fn: `
    const status = document.querySelector('.health-status').textContent;
    const responseTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
    return { status, responseTime };
  `
})

// 步骤 5: 截图保存报告
browser({
  action: "screenshot",
  type: "png",
  fullPage: true
})

// 步骤 6: 使用 exec 记录日志
exec({
  command: "echo '健康检查完成: ' + $(date) >> /var/log/healthcheck.log",
  background: false
})

// 步骤 7: 关闭浏览器
browser({
  action: "stop"
})

// 步骤 8: 使用 Canvas 展示结果（可选）
canvas({
  action: "present",
  url: "https://mysite.example.com/health",
  width: 1280,
  height: 720
})

// 步骤 9: 推送通知
canvas({
  action: "a2ui_push",
  jsonl: JSON.stringify({
    type: "notification",
    title: "健康检查完成",
    severity: "info"
  })
})

结合 Cron 定时执行：

# 在 crontab 中配置每日 9:00 执行
0 9 * * * /usr/bin/node /path/to/health-check.js

预期输出：

• 浏览器自动访问并检查目标页面
• 生成截图报告
• 日志记录执行时间
• Canvas 推送完成通知

最佳实践：

• 设置合理的 timeoutMs 避免无限等待
• 使用 background: false 确保日志写入完成
• 定时任务配合错误重试机制
• 敏感配置使用环境变量注入

---

第七章：总结与展望

全文要点回顾

本文围绕 OpenClaw 可视化自动化工具，进行了系统性的技术剖析与实践探讨。我们从浏览器自动化的本质需求出发，阐述了这项技术如何解决人工操作的效率瓶颈；通过深入解析 CDP 协议与 Canvas 渲染机制，揭示了 OpenClaw 底层技术的工作原理；通过 UI 测试、数据采集、工作流编排三个典型场景，展示了可视化自动化在真实业务中的落地价值。

技术趋势展望

浏览器自动化技术正在经历从"工具"向"平台"的演进。传统的脚本录制与回放模式正在被 AI 辅助的智能识别所取代------未来的自动化工具将能够"理解"页面布局与业务逻辑，自动生成执行路径。同时，随着端云协同技术的发展，自动化任务可以将计算密集型负载卸载到云端执行，在保证隐私安全的前提下实现更高效的规模化处理。