SuperAPI AI 工具集

cypress

测试与质量

查看项目

更新于 10-16 05:48

技能介绍

用途:Cypress 是面向现代 Web 的前端测试工具,运行在浏览器内部(不同于 Selenium/Playwright),因此能原生访问 DOM。适用于组件与端到端 Web 测试、时间旅行调试、网络拦截与模拟、组件隔离测试。

主要能力:命令采用异步队列与自动重试机制,命令不返回标准 Promise,而是排队执行,直到断言通过或超时;可在 Chrome、Firefox、Edge 中运行浏览器功能测试;通过 cy.intercept() 可打桩 API 响应、延迟网络、测试错误边界;可隔离测试 React、Vue、Svelte、Angular 组件而无需启动完整后端;支持自定义命令与页面对象封装。

使用方式:测试用 describe/it 组织,使用 cy.visit() 访问页面,cy.get()、cy.contains()、cy.type()、cy.click() 操作元素,cy.url().should() 断言。网络拦截示例:cy.intercept("GET", "/api/v1/projects", { statusCode: 500, body: { error: "Internal Server Error" } }).as("getProjectsError"),随后 cy.wait("@getProjectsError")。自定义命令通过 Cypress.Commands.add 注册,例如用 cy.request 登录并写入 localStorage。

最佳实践:使用 data-cy 或 data-testid 专用属性选择元素;在 setup 钩子中通过 API 编程式登录;用 cy.intercept 配合别名等待网络同步,而非 cy.wait(3000);保持测试相互独立。避免与 async/await 混用 Cypress 命令,避免硬编码等待,避免通过 UI 测试第三方 OAuth。

限制与排错:元素超时通常因选择器不精确或被遮挡;cy.visit() 失败可能因开发服务器未启动或 SSL 证书不受信任,需检查 cypress.config.js 中的 base URL;cy.intercept 需在声明时立即调用 .as('alias')。具体安装命令与版本信息暂未提供。