示例与配方

实用的浏览器自动化配方——登录流程、表单填写、数据提取等

常见的浏览器自动化模式。这些示例展示了 xiantong 的工作流程——你只需用自然语言描述你的需求，xiantong 会处理工具调用。

登录并导航#

xiantong 可以使用你的凭据登录 Web 应用并导航到需认证的页面。

"请打开 app.example.com，用我的凭据登录，并导航到报告页面"

幕后发生了什么：

打开并导航

xiantong 打开浏览器并导航到登录页面。

快照页面

对页面进行可访问性快照，以查找邮箱/密码输入框和登录按钮——每个元素都会获得类似 @e3、@e5、@e7 的引用。

填写并提交

在输入字段中键入你的邮箱和密码，然后点击登录按钮。

等待并继续

登录后等待页面加载，然后导航到目标页面。

如果你已经在浏览器中登录了某个站点，xiantong 可以重用该会话——无需再次登录。

填写复杂表单#

xiantong 可以处理包含下拉菜单、复选框和文本区域的多字段表单。

"在我们的内部工具上填写支持工单表单——优先级设为高，类别设为账单，描述问题为 '客户被重复收取订阅费用'"

xiantong 快照表单，识别每个标签对应的字段，填写文本输入、选择下拉值，然后点击提交。

提取页面数据#

使用 JavaScript 执行从任何网页获取结构化数据。

"打开我们的分析仪表板，并从摘要表中提取前 10 个指标"

xiantong 的操作如下：

// xiantong 在页面上下文中直接运行 JavaScript
Array.from(document.querySelectorAll('table.summary tr'))
.slice(0, 10)
.map(row => ({
metric: row.cells[0].textContent,
value: row.cells[1].textContent
}))

这会返回结构化数据，xiantong 可以将其格式化为表格、导出到电子表格或用于进一步分析。

监控网络流量#

查看页面发出的 API 调用——对调试或发现内部端点非常有用。

"打开仪表板，点击刷新按钮，并告诉我它发出了哪些 API 调用"

xiantong 使用网络检查来捕获页面触发的所有 HTTP 请求，显示 URL、方法、状态码和响应大小。这在发现内部 API时尤其强大。

截取目标区域截图#

捕获特定元素或区域，而不是整页。

"只截取仪表板上的营收图表"

xiantong 可以通过以下方式截取截图：

• 元素引用——快照页面，找到图表的引用，只捕获该元素
• CSS 选择器——使用 div[data-testid="revenue-chart"] 等选择器定位元素
• 坐标——捕获特定像素区域

发送键盘快捷键#

触发特定应用的键盘快捷键以实现高级用户工作流。

"按 Cmd+K 打开命令面板，并搜索 'billing'"

xiantong 可以发送任何键组合，包括修饰键（Shift、Control、Alt、Meta/Cmd）。

多步骤工作流#

将多个浏览器操作组合成复杂的工作流。

"打开我们的 HR 门户，检查每个团队成员的资料，并将他们的职位和部门整理到电子表格中"

对于涉及遍历多个项目的任务，xiantong 通常会发现更高效的方法——参见API 发现，了解 xiantong 如何发现内部 API 并并行获取所有数据，而不是逐个点击。

最佳结果提示

• 明确描述你的需求——“从表格中提取员工姓名和邮箱”比“获取数据”要好得多
• 说明你是否已经登录——可以节省跳过登录流程的时间
• 描述页面结构，如果很复杂——“数据在第二个选项卡的摘要部分下”
• 指定输出格式——“放到电子表格”或“以表格形式格式化”

故障排除

• 页面无法加载？——xiantong 会重试导航。如果一直失败，请检查 URL 是否正确以及站点是否可以访问。
• 找不到元素？——xiantong 会在导航后重新快照页面。如果元素动态加载，可能需要先等待或先滚动。
• 登录失败？——某些站点使用 CAPTCHA 或多因素认证，浏览器无法自动化。你可能需要先手动登录，然后让 xiantong 继续。
• 交互不稳定？——xiantong 会重新快照并重试。带有动画的动态页面可能需要在操作之间稍作等待。