当前位置：首页 > news >正文

OpenClaw自动化测试：Qwen3.5-9B验证UI截图与需求文档一致性

news 2026/6/22 17:19:29

OpenClaw自动化测试：Qwen3.5-9B验证UI截图与需求文档一致性

1. 为什么需要自动化UI测试

作为独立开发者，我经常遇到这样的困境：花了两周时间开发的新功能，上线前才发现某个按钮样式与PRD文档不符，或者漏掉了一个次要功能点。传统的人工测试需要反复对照文档和截图，既耗时又容易遗漏细节。

直到发现OpenClaw结合Qwen3.5-9B多模态模型的能力，我意识到可以构建一个自动化验证流程。这个方案的核心价值在于：

时间节省：夜间自动执行测试，早晨直接查看报告
精准对比：模型能理解UI元素的语义关系，而不仅是像素比对
持续监控：可配置定时任务，随时捕捉开发过程中的偏差

2. 环境准备与配置过程

2.1 基础环境搭建

我选择在本地MacBook Pro（M1芯片）上部署OpenClaw，通过Docker运行Qwen3.5-9B-AWQ-4bit镜像。这种组合既保证了模型推理性能，又避免了云端API的调用延迟和费用。

安装过程主要参考了OpenClaw官方文档：

# 安装OpenClaw核心组件 curl -fsSL https://openclaw.ai/install.sh | bash openclaw onboard --install-daemon # 启动模型服务（使用预先拉取的Qwen镜像） docker run -d -p 5000:5000 qwen3.5-9b-awq-4bit

2.2 OpenClaw对接本地模型

关键步骤是在~/.openclaw/openclaw.json中配置模型端点：

{ "models": { "providers": { "local-qwen": { "baseUrl": "http://localhost:5000/v1", "api": "openai-completions", "models": [ { "id": "qwen3.5-9b", "name": "Local Qwen Vision", "contextWindow": 32768 } ] } } } }

配置完成后，通过命令验证连接状态：

openclaw gateway restart openclaw models list

3. 构建自动化测试流水线

3.1 截图采集模块

我编写了一个简单的Python脚本，通过Selenium定时抓取测试环境页面截图。这个脚本被保存为capture_screenshots.py，主要内容包括：

from selenium import webdriver import time def capture(url, save_path): driver = webdriver.Chrome() driver.get(url) time.sleep(3) # 等待页面加载 driver.save_screenshot(save_path) driver.quit()

然后在OpenClaw中创建定时任务，每天凌晨2点执行：

openclaw tasks create --name "daily_ui_capture" \ --command "python3 capture_screenshots.py" \ --schedule "0 2 * * *"

3.2 文档与截图对比逻辑

核心创新点在于让Qwen模型理解PRD文档中的需求描述，并与实际截图进行对比。我设计了一个提示词模板：

你是一个专业的QA工程师。请对比需求文档和实际UI截图： - 需求描述：{{prd_content}} - 截图路径：{{image_path}} 请检查： 1. 所有功能点是否完整实现 2. UI样式是否符合设计规范 3. 文字内容是否准确无误 4. 交互元素位置是否合理 用Markdown格式输出报告，包含： - 一致性检查结果 - 差异点详细描述 - 严重程度评级（Critical/Major/Minor）

这个提示词被保存为ui_validation_template.txt，后续会被OpenClaw调用。

4. 实际测试效果验证

4.1 测试案例设计

我选择了一个电商后台管理系统作为测试对象，重点验证商品管理模块。PRD文档中包含以下关键需求：

商品列表应显示缩略图、名称、价格、库存四列
每个商品项需要有"编辑"和"删除"按钮
顶部搜索框支持按名称和类目筛选

OpenClaw按计划在夜间完成了以下操作：

登录测试环境
导航至商品管理页面
捕获全屏截图
调用Qwen模型进行分析

4.2 模型输出示例

Qwen3.5-9B生成的报告片段展示了出色的理解能力：

## 一致性检查报告 ### 1. 功能完整性 - [✓] 商品列表显示缩略图、名称、价格、库存 - [✗] 缺失"类目"筛选条件（Major） - [✓] 每个商品项包含编辑和删除按钮 ### 2. UI样式问题 - 搜索框宽度与设计稿相差15%（Minor） - 价格列字体未使用要求的Roboto字体（Major） ### 3. 交互问题 - 删除按钮缺少二次确认弹窗（Critical）

报告准确识别了三个级别的差异，特别是抓住了缺少二次确认这个重大安全隐患。