企业官网建设流程全解析

Bug0 AI 是一款开源的Playwright AI 浏览器回归测试库（npm 包@bug0/ai），让你用自然语言描述测试步骤，由 AI 模型驱动浏览器执行，并自带智能缓存、自动修复（auto-healing）和多模型交叉验证。这篇文章带你用 10 分钟跑通第一个自然语言浏览器测试 🚀

一分钟了解 Bug0 AI

传统的 Playwright 测试依赖写死的 CSS 选择器，页面一改版测试就大面积失效。Bug0 AI 换了个思路：

• 自然语言步骤：{ description: "Click Acme Circles T-Shirt" }，不需要选择器
• 智能缓存：成功的步骤动作存入 Redis，下次直接回放，快且省 Token 💰
• 自动修复：缓存动作失效时自动回退到 AI 重新执行，UI 变了测试也能过
• 多模型断言：Claude + Gemini 双模型投票，意见不一致时由第三个模型仲裁，判断更可靠

核心函数定义在 src/index.ts，多模型共识断言引擎在 src/assertion.ts。

Step Request | v [Cache Check] --命中--> [执行缓存动作] --成功--> 完成 | | 未命中 失败（自动修复） | | v v [AI 执行] ---------> [缓存结果] | v [断言验证]（Claude + Gemini 共识）

环境准备：3 条命令装好依赖

要求 Node.js >= 18。新建一个 Playwright 项目并安装 Bug0 AI：

npm init playwright@latest bug0-ai-project # 默认选项，语言选 TypeScript cd bug0-ai-project npm install @bug0/ai dotenv

💡 如果想直接从源码阅读项目，仓库克隆地址为https://gitcode.com/gh_mirrors/pa/qa-agent。

配置 AI 密钥：写入 .env

Bug0 AI 的多模型共识功能需要至少一个 Anthropic 和一个 Google 模型。在项目根目录创建.env：

ANTHROPIC_API_KEY=sk-ant-... GOOGLE_GENERATIVE_AI_API_KEY=AIza...

不想分别管理多个厂商的密钥？也可以用 AI 网关统一路由，只需设置AI_GATEWAY_API_KEY（Vercel）、OPENROUTER_API_KEY（OpenRouter）或OPENCODEZEN_API_KEY（OpenCode Zen）之一，完整变量清单参考 .env.example。

再让 Playwright 读取.env，在playwright.config.ts顶部加两行：

import dotenv from 'dotenv'; import path from 'path'; dotenv.config({ path: path.resolve(__dirname, '.env') });

写第一个自然语言测试：加购物车实战

把下面的代码粘贴到tests/example.spec.ts——整个流程只有 5 个自然语言步骤：

import { test, expect } from "@playwright/test"; import { runSteps } from "@bug0/ai"; test("Shopping cart tests", async ({ page }) => { test.setTimeout(60_000); // 给 AI 执行留出时间 await runSteps({ page, userFlow: "Add product to cart", steps: [ { description: "Navigate to https://demo.vercel.store" }, { description: "Click Acme Circles T-Shirt" }, { description: "Select color", data: { value: "White" } }, { description: "Select size", data: { value: "S" } }, { description: "Add to cart", waitUntil: "My Cart is visible" }, ], assertions: [{ assertion: "You can see My Cart with Acme Circles T-Shirt" }], test, expect }); });

几个值得注意的参数（详见 src/types.ts）：

运行测试并查看报告

npx playwright test example.spec.ts --project chromium

跑完后用下面命令打开可视化报告，顶部还有 Bug0 AI 生成的 AI 总结：

npx playwright show-report

首次运行走 AI 执行，成功的单步动作会被写入缓存（Redis）；再次运行时命中缓存直接回放，速度和成本都会大幅下降。缓存逻辑见 src/redis.ts 和 src/data-cache.ts。

进阶玩法：3 个提升效率的特性

• runUserFlow()探索式测试：把整段流程写成一句自然语言，交给 AI 自主导航，适合步骤不确定的场景（effort: "high"会启用思考更深的模型）
• CUA 视觉模式：通过configure({ ai: { mode: "cua" } })切换为 OpenAI 截图驱动的 computer-use 代理，适合复杂视觉交互，详见 src/cua/
• 占位符系统：用{{run.email}}、{{global.*}}、{{email.otp:提示词}}等表达式注入随机邮箱、动态邮箱和验证码，轻松做数据驱动测试

常见问题快速排查

更多排查思路见 TROUBLESHOOTING.md。

总结

Bug0 AI 把"写选择器、修选择器"的循环换成了自然语言 + 智能缓存 + 多模型验证，10 分钟就能在现有 Playwright 项目中跑通第一个 AI 驱动的浏览器回归测试。下一步建议：

1. 接入REDIS_URL开启缓存，体会第二次运行的速度差异
2. 用{{run.*}}占位符改造一套数据驱动用例
3. 阅读 README.md 了解 Video 断言、邮件提取等完整能力

你的测试套件，从此可以"自己会修" 🤖