Expect 实战技巧：如何用纯英文测试用例替代脆弱的 CSS 选择器（完整指南）-平芜编程栈

Expect 实战技巧：如何用纯英文测试用例替代脆弱的 CSS 选择器（完整指南）

【免费下载链接】expectExpect tests your agent's code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expect

Expect是一个在真实浏览器中测试 AI Agent 代码的开源工具。本文分享实战技巧：用纯英文测试用例替代脆弱的 CSS 选择器，让 Expect 自动完成导航、点击与断言，彻底告别"选择器一改、测试全挂"的维护噩梦。

为什么 CSS 选择器测试越来越脆弱？

用 Playwright、Cypress 写测试时，我们习惯这样定位元素：

await page.click("#signup-form button[type=submit]");

问题在于：选择器绑定的是"页面长什么样"，而不是"应用该做什么"。一旦 UI 重构、类名变更、布局调整，测试立刻失效——哪怕功能本身完全正常。

Expect 的思路正好反过来：

当你关心应用做了什么（行为），用 expect；当你关心页面如何渲染（像素级），才用传统框架。

也就是说，把"点击登录按钮"这类 DOM 细节交给 AI，你只负责用一句英文描述期望的行为结果。

Expect 如何工作：一条英文，就是一个测试

安装 SDK 后（npm install expect-sdk），测试长这样：

const result = await Expect.test({ url: "http://localhost:3000/signup", tests: [ "submitting empty form shows validation errors on all fields", "valid submission redirects to the dashboard with welcome message", ], });

每一行英文字符串就是一个测试用例。AI 代理会自己完成导航、填表、点击和验证——你不需要写任何选择器。在代码层面，这些字符串会被直接转成发给 Agent 的测试提示（见 expect.ts 中的normalizeTestPrompts）。

CLI 用户更简单：在你的 Agent（Claude Code、Codex、Gemini CLI 等）里直接运行/expect，它会读取你的 git 变更、自动生成测试计划并在真实浏览器里执行。

3 个让英文测试用例更稳的实战技巧 💡

技巧 1：描述"行为结果"，而不是"页面元素"

❌ 差的写法（像在教 AI 找 DOM）：click the button with class btn-primary✅ 好的写法（像在验收功能）：submitting the login form with valid credentials redirects to the dashboard

判断标准很简单：UI 重构后这句话是否依然成立？成立，就说明它测的是行为而非样式。

技巧 2：复杂断言用`{ title, prompt }`拆分细节

一句话装不下的验证逻辑，可以写成对象形式，title用于结果展示，prompt给 AI 详细指令：

tests: [{ title: "dashboard data loads correctly", prompt: "verify the user's name appears in the header, the sidebar shows Settings/Projects/Team links, no loading spinners remain after 3 seconds, and there are no console errors", }]

步骤拆得越细，失败时定位越快——每条用例独立报告通过/失败和截图，见 README。

技巧 3：用 Session 保持登录态，避免每条用例重复登录

需要"已登录"状态的测试，用Expect.session()创建持久浏览器上下文，cookie 和 localStorage 在多次测试间自动保留：

const session = Expect.session({ url: "http://localhost:3000", cookies: "chrome" }); await session.test({ url: "/login", tests: ["login works"] }); await session.test({ url: "/dashboard", tests: ["loads while authenticated"] });

cookies: "chrome"会从你本地 Chrome 提取真实登录 Cookie，测试的就是真实登录后的界面。

进阶：混合 Playwright 精确操作 + AI 模糊验证

需要确定性操作的步骤（比如固定格式的种子数据），仍可以用 Playwright 回调完成setup/teardown，把"模糊判断"留给 AI——两者各干各的长处。

快速上手：一键安装步骤 🚀

安装 CLI：npx -y expect-cli@latest（MCP 集成配置见 docs/mcp.md）
接入 Agent：在 Claude Code、Codex 等支持的 Agent 中运行/expect
可选：SDK 方式：npm install expect-sdk，在 CI 脚本中直接拿到测试结果
CI 模式：加--ci参数即可在流水线中以无头浏览器、自动批准计划的方式运行

与传统测试工具对比

| | Expect | Playwright / Cypress | 人工 QA | |--|--------|----------------------|---------| | 用例编写 | 纯英文句子 | 选择器 + 断言 | 点点点 | | UI 重构后 | 测试不受影响 | 选择器大面积失效 | 不适用 | | 定位失败 | AI 智能重试 | 需要手写显式等待 | 靠人眼 | | 适合场景 |行为验证| 像素级精确断言 | 探索性测试 |

Expect 实战技巧：如何用纯英文测试用例替代脆弱的 CSS 选择器（完整指南）