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

Expect 实战技巧如何用纯英文测试用例替代脆弱的 CSS 选择器完整指南【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expectExpect是一个在真实浏览器中测试 AI Agent 代码的开源工具。本文分享实战技巧用纯英文测试用例替代脆弱的 CSS 选择器让 Expect 自动完成导航、点击与断言彻底告别选择器一改、测试全挂的维护噩梦。为什么 CSS 选择器测试越来越脆弱用 Playwright、Cypress 写测试时我们习惯这样定位元素await page.click(#signup-form button[typesubmit]);问题在于选择器绑定的是页面长什么样而不是应用该做什么。一旦 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 用户更简单在你的 AgentClaude Code、Codex、Gemini CLI 等里直接运行/expect它会读取你的 git 变更、自动生成测试计划并在真实浏览器里执行。3 个让英文测试用例更稳的实战技巧 技巧 1描述行为结果而不是页面元素❌ 差的写法像在教 AI 找 DOMclick 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 users 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——两者各干各的长处。快速上手一键安装步骤 安装 CLInpx -y expect-clilatestMCP 集成配置见 docs/mcp.md接入 Agent在 Claude Code、Codex 等支持的 Agent 中运行/expect可选SDK 方式npm install expect-sdk在 CI 脚本中直接拿到测试结果CI 模式加--ci参数即可在流水线中以无头浏览器、自动批准计划的方式运行与传统测试工具对比| | Expect | Playwright / Cypress | 人工 QA | |--|--------|----------------------|---------| | 用例编写 | 纯英文句子 | 选择器 断言 | 点点点 | | UI 重构后 | 测试不受影响 | 选择器大面积失效 | 不适用 | | 定位失败 | AI 智能重试 | 需要手写显式等待 | 靠人眼 | | 适合场景 |行为验证| 像素级精确断言 | 探索性测试 |延伸阅读SDK 完整 API 与示例packages/typescript-sdk/README.md测试输入类型定义Test、TestResult等packages/typescript-sdk/src/types.ts可访问性审计基于 ARIA 而非选择器定位packages/browser/src/accessibility.ts浏览器操作内核快照 ref 交互packages/browser/README.md项目总览与 CLI 参数说明README.md一句话总结用 Expect把你从维护选择器变成描述期望——测试用例用英文写浏览器由 AI 驱动脆弱性从此与你无关。【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expect创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考