SuperAPI AI 工具集

browser-testing-with-screenshots

测试与质量

查看项目

更新于 10-15 16:42

技能介绍

用途:在测试 Web 应用时进行可视化验证,自动执行 Chrome 交互、元素选择与截图,确认 UI 流程、布局变化与应用功能。

前置条件:需先安装 agent-tools(https://github.com/badlogic/agent-tools),并确保 browser-start.js、browser-nav.js、browser-screenshot.js 等 browser-* 命令位于系统 PATH。

主要命令:browser-start.js 启动带远程调试的 Chrome(默认端口 9222,--fresh 为全新会话);browser-nav.js <URL> 导航;browser-screenshot.js 截取当前视口;browser-pick.js "选择登录按钮" 交互式选取元素并返回 CSS 选择器;browser-eval.js 'document.title' 在页面上下文执行 JS;browser-content.js 提取可读内容;browser-cookies.js 查看 cookie。

典型用法:先 browser-start.js 启动,再用 browser-nav.js 进入页面,sleep 等待加载后 browser-screenshot.js 截图;用 browser-pick.js 选取元素配合 browser-eval.js 填入或点击,再截图验证。可组合为脚本,按 login、dashboard 等页面循环导航、截图并按页面命名归档。

适用场景:UI 流程测试、视觉变更核对、重复性浏览器操作自动化、截图留证、本地 localhost 开发验证、需要类人工选取动态元素的情形。

限制:不适用于 API 测试、不关心视觉的无头测试、简单页面内容校验(可用 curl/wget)。截图文件按 screenshot_YYYYMMDD_HHMMSS.png 命名并输出到当前目录。注意导航后需等待再截图、避免硬编码选择器、先启动 Chrome 否则报连接拒绝、确认本地端口正确;需要保持登录态时不要用 --fresh。