⚡

浏览器截图测试Skill browser-testing-with-screenshots

这是一个用于自动化Web应用程序UI测试的技能，通过连接Chrome DevTools协议实现浏览器导航、元素交互和截图捕获。它结合了自动化脚本和人工元素选择，专门用于视觉验证、UI功能测试和测试文档生成。关键词：浏览器自动化测试、UI视觉验证、Chrome DevTools、截图测试、Web应用测试、元素选择、测试自动化、视觉回归测试。

测试 0 次安装 2 次浏览 更新于 2/28/2026

name: browser-testing-with-screenshots description: 用于通过视觉验证测试Web应用程序 - 自动化Chrome浏览器交互、元素选择和截图捕获，以确认UI功能

浏览器截图测试

概述

使用browser-tools自动化Chrome浏览器测试并进行视觉验证。 连接Chrome DevTools协议进行导航、交互和截图捕获，以确认应用程序功能。

前提条件

必需： 从 https://github.com/badlogic/agent-tools 安装agent-tools

# 克隆并安装agent-tools
git clone https://github.com/badlogic/agent-tools.git
cd agent-tools
# 按照仓库中的安装说明操作
# 确保所有可执行文件（browser-start.js, browser-nav.js等）都在您的PATH中

验证安装：

# 检查浏览器工具是否可用
which browser-start.js
which browser-nav.js
which browser-screenshot.js

本技能中引用的所有browser-*命令均来自agent-tools仓库，必须正确安装并可在系统PATH中访问。

使用时机

在以下情况下使用此技能：

  • 测试Web应用程序UI流程
  • 验证视觉变化或布局
  • 自动化重复的浏览器交互
  • 通过截图记录应用程序行为
  • 开发过程中测试本地主机应用程序
  • 需要与需要类似人工选择的元素进行交互时

不适用于：

  • API测试（使用直接HTTP调用）
  • 视觉无关的无头测试
  • 简单的页面内容验证（使用curl/wget）

快速参考

任务 命令 目的
启动浏览器 browser-start.js 启动带调试的Chrome
导航 browser-nav.js http://localhost:5172/dashboard 转到特定URL
截图 browser-screenshot.js 捕获当前视口
选取元素 browser-pick.js "选择登录按钮" 交互式元素选择
运行JavaScript browser-eval.js 'document.title' 在页面上下文中执行代码
提取内容 browser-content.js 获取可读的页面内容
查看Cookie browser-cookies.js 列出会话Cookie

设置和基本工作流程

1. 启动带远程调试的Chrome

# 启动带调试功能的Chrome（保留用户配置文件）
browser-start.js

# 或全新启动（无Cookie，干净状态）
browser-start.js --fresh

预期结果： Chrome在端口9222上打开，并启用DevTools协议

2. 导航到应用程序

# 转到您的应用程序起始点
browser-nav.js http://localhost:5172/dashboard

验证： 浏览器导航到仪表板页面

3. 捕获基线截图

# 拍摄初始截图以确认页面已加载
browser-screenshot.js

输出： 返回截图文件路径（例如，screenshot_20231203_141532.png）

带截图的测试工作流程

完整测试场景示例

#!/bin/bash
# 测试登录和仪表板功能

echo "🚀 开始浏览器测试..."

# 1. 启动浏览器
browser-start.js --fresh

# 2. 导航到登录页面
browser-nav.js http://localhost:5172/login
sleep 2

# 3. 拍摄登录页面截图
LOGIN_SHOT=$(browser-screenshot.js)
echo "📸 登录页面: $LOGIN_SHOT"

# 4. 填写登录表单（交互式元素选取）
browser-pick.js "点击用户名字段"
browser-eval.js 'document.activeElement.value = "testuser"'

browser-pick.js "点击密码字段"
browser-eval.js 'document.activeElement.value = "password123"'

# 5. 截图已填写的表单
FORM_SHOT=$(browser-screenshot.js)
echo "📸 已填写表单: $FORM_SHOT"

# 6. 提交表单
browser-pick.js "点击登录按钮"
sleep 3

# 7. 验证仪表板已加载
browser-nav.js http://localhost:5172/dashboard
DASHBOARD_SHOT=$(browser-screenshot.js)
echo "📸 仪表板: $DASHBOARD_SHOT"

# 8. 验证特定的仪表板元素
browser-pick.js "选择导航菜单"
browser-eval.js 'console.log("找到导航:", !!document.querySelector(".nav"))'

echo "✅ 测试完成。截图已保存。"

元素交互模式

# 交互式元素选择（最适合动态内容）
browser-pick.js "选择提交按钮"
# 用户在浏览器中点击元素 → 返回CSS选择器

# 使用返回的选择器进行自动化
SELECTOR=$(browser-pick.js "选择提交按钮" | grep "selector:")
browser-eval.js "document.querySelector('$SELECTOR').click()"

# 截图以验证操作
browser-screenshot.js

高级用法

用于复杂交互的JavaScript评估

# 在交互前检查元素是否存在
browser-eval.js 'document.querySelector("#login-form") !== null'

# 等待动态内容
browser-eval.js '
  new Promise(resolve => {
    const check = () => {
      if (document.querySelector(".loaded")) resolve(true);
      else setTimeout(check, 100);
    };
    check();
  })
'

# 提取表单数据
browser-eval.js 'JSON.stringify(Object.fromEntries(new FormData(document.querySelector("form"))))'

带定时的截图

# 导航并在截图前等待
browser-nav.js http://localhost:5172/slow-page
sleep 5  # 等待动画/加载
browser-screenshot.js

用于验证的内容提取

# 获取页面标题
PAGE_TITLE=$(browser-eval.js 'document.title')
echo "当前页面: $PAGE_TITLE"

# 提取可读内容
browser-content.js > page_content.md

# 检查特定文本
browser-eval.js 'document.body.textContent.includes("欢迎来到仪表板")'

常见错误

错误 问题 解决方案
导航后没有sleep 截图的是加载中的页面 在nav后添加 sleep 2-5
硬编码选择器 UI更改时中断 使用 browser-pick.js 进行选择
Chrome设置缺失 "连接被拒绝"错误 首先运行 browser-start.js
错误的本地主机端口 导航失败 验证应用程序在正确的端口上运行
截图时机 在内容加载前捕获 等待页面加载或特定元素
未保留状态 命令间登录状态丢失 使用默认配置文件，而非 --fresh

错误处理

# 检查Chrome是否在运行
if ! browser-eval.js 'true' 2>/dev/null; then
  echo "❌ Chrome未连接。正在运行browser-start.js..."
  browser-start.js
fi

# 验证导航是否成功
if browser-eval.js 'location.href.includes("dashboard")'; then
  echo "✅ 导航成功"
else
  echo "❌ 导航失败"
  exit 1
fi

文件输出模式

  • 截图： 当前目录中的 screenshot_YYYYMMDD_HHMMSS.png
  • 内容： 通过 browser-content.js 的stdout输出的Markdown格式
  • 选择器： 来自 browser-pick.js 交互的CSS选择器
  • JavaScript结果： 来自 browser-eval.js 的JSON或字符串值

与测试框架集成

# 创建测试证据目录
mkdir -p test-results/$(date +%Y%m%d_%H%M%S)
cd test-results/$(date +%Y%m%d_%H%M%S)

# 运行测试并组织截图
browser-start.js
for page in login dashboard profile; do
  browser-nav.js "http://localhost:5172/$page"
  sleep 2
  screenshot=$(browser-screenshot.js)
  mv "$screenshot" "${page}_page.png"
  echo "✅ $page 页面已测试"
done

实际影响

好处：

  • 视觉验证： 截图提供UI状态的即时反馈
  • 交互式调试： 元素选取器适用于动态/复杂选择器
  • 状态保留： 在命令间保持登录会话
  • 证据收集： 自动化截图捕获用于测试文档
  • 开发工作流程： 快速验证本地主机更改

结果：

  • 更快的UI测试迭代（视觉确认 vs 手动检查）
  • 可靠的元素选择（人工选取，自动化使用）
  • 带有视觉证明的测试文档
  • 立即发现视觉回归

关键原则： 将自动化导航与人工元素选择相结合，以实现稳健、可维护的浏览器测试。