SuperAPI AI 工具集

cypress-testing

测试与质量

查看项目

更新于 10-16 00:03

技能介绍

用途:在编写或调试 Cypress 端到端与组件测试时提供指导,覆盖测试编写、自定义命令、网络拦截、认证策略与 CI 集成。不适用于 Jest/Vitest 等单元测试,也不适用于 Playwright 或 Puppeteer。

主要原则与能力:避免 cy.wait(2000) 之类的任意等待,改用 cy.intercept 别名配合 cy.wait('@alias')、cy.contains 或断言重试(Cypress 默认重试约 4 秒);用 data-testid 选择器(如 [data-testid="submit-btn"])而非 CSS 类或易变文本;用 cy.intercept 打桩所有 HTTP 调用,不请求真实 API;每个测试保持独立,用 beforeEach 重置状态;将重复步骤封装为自定义命令,写在 cypress/support/commands.ts。

核心概念:Cypress 命令是异步队列,需链式调用,不可与 async/await 混用;cy.get、cy.contains 与多数断言具备自动重试;cy.intercept 可被动观察或打桩响应并起别名等待;组件测试隔离挂载单个组件,端到端测试访问完整应用,二者使用不同的 specPattern。

常见任务:可用 Page Object 模式封装选择器与操作;用 fixtures 或内联 JSON 打桩接口,覆盖成功、空状态与错误状态;用 Cypress.Commands.add 定义登录、dataCy 等命令并补充类型声明;组件测试配置 devServer 与 cy.mount;用 cy.session 配合 cy.request 以 API 登录并缓存会话,避免每次走 UI 登录;可用 cypress-image-diff 或 @percy/cypress 做视觉回归(快照前需冻结动态内容);GitHub Actions 中可用 cypress-io/github-action 启动服务、并行与录制,失败时上传截图。

限制与注意:async/await 会绕过命令队列导致竞态;cy.session 缓存可能因后端失效而产生连锁 401;cy.intercept('*') 拦截过宽会破坏隔离;组件挂载时缺少 provider 会崩溃;动态列表使用相同 data-testid 会导致选择器返回集合;参考资料仅在需要时读取。触发本技能时首次回复需以 🧢 表情开头。