前端e2e测试如何选型？

前端花园
102 阅读4分钟
  1. cypress(全自动)
  2. playwright(大而全)
  3. selenium webdriver

总结

e2e测试就是用例测试，测试从前端开始到交互到服务端的一系列操作流程是否符合预期。

  • Cypress 适合前端 e2e 测试，易于上手，执行速度快。因其简单易用和实时反馈而受到前端开发者的欢迎，特别适合现代 Web 应用。它支持 Chrome、Firefox、Edge 和 Safari，执行速度快，但主要限于 JavaScript
  • Playwright 由 Microsoft 开发，支持 JavaScript、Python 等多种语言，跨浏览器测试能力强，适合需要多语言支持的项目。
  • Selenium 生态系统成熟，支持多种浏览器和语言，但设置较复杂，执行可能较慢，适合大型项目。

工具选型与比较

特征SeleniumPlaywrightCypress
创立/发布20042020 年 1 月 31 日2014
安装与配置复杂，需要多个组件，如本地 Selenium Grid；云选项：Zebrunner Selenium Grid简单，通过 VS Code 扩展或 npm init playwright@latest（最新版 1.29）简单，通过 npm 或桌面应用；云选项：Zebrunner CyServer
测试运行器Selenium WebDriver, TestNG, JUnit；支持 Jenkins, Maven；环境：Selenium Grid, 本地服务器内置运行器，支持 Mocha, Jest；支持 GitHub Actions, Azure Pipelines, Jenkins内置 GUI 运行器，使用 Mocha 框架，Chai 断言；支持 GitHub Actions, CircleCI, Jenkins
录制与回放Selenium IDE 支持录制，无需编码CodeGen 工具生成测试脚本基于用户操作Cypress Studio 视觉创建测试，支持 .type(), .click() 等
语言支持Java, JavaScript, C#, Ruby, PHP, PythonJavaScript, TypeScript, Python, Java, .NETJavaScript
浏览器支持Chrome, Firefox, Edge, Safari, Opera, IEChrome, Edge (Chromium), Safari (WebKit), FirefoxChrome, Firefox, Edge, Safari
并行执行是，通过 Selenium Grid是，内置支持是，通过 Cypress Dashboard 和 CI
处理不稳定测试稳定选择器，显式等待，重试逻辑，JUnit/TestNG，CI 服务器（如 Jenkins, Azure DevOps）自动等待，waitFor 方法（如 waitForLoadState），重试自动等待，重试，超时，cy.intercept() 处理 XHR 请求
截图TakesScreenshot 方法手动捕获全页、元素、缓冲区选项，内置内置，失败时自动截图，cy.screenshot()，可通过配置禁用
视频录制需要扩展，无原生功能可配置：关闭、开启、失败时保留、首次重试时录制每个 .spec 文件自动录制，保存在 cypress/videos，可通过配置禁用
Iframe 处理switchTo().frame() 方法（id, index, webelement），switchTo().defaultContent()FrameLocator 方法检索和定位元素需要插件，自定义命令交互
关键优势广泛的浏览器/语言支持，强大的生态系统现代 API，跨浏览器，内置重试，异步操作处理易于设置，执行快，实时反馈
典型用例大型项目，广泛的跨浏览器测试可靠的跨浏览器 e2e 测试，最小不稳定现代 Web 应用，快速设置，执行快

Cypress 使用体验与实践经验

鉴于用户希望深入学习 Cypress，以下是基于官方文档和社区经验的实践建议：

  • 编写测试的最佳实践：
    • 从用户视角编写测试，优先测试用户流而非实现细节。
    • 使用 data-cy 属性作为选择器，避免动态 ID 或 CSS 变化导致的测试不稳定。
    • 通过 Cypress.Commands.add 创建可重用自定义命令，简化重复操作。
  • 动态内容处理：
    • 利用 Cypress 的自动等待和重试机制，如 cy.wait() 等待异步操作完成，cy.intercept() 拦截网络请求。
    • 例如，测试页面加载时，Cypress 会自动检测页面过渡事件，将超时时间从 4 秒增加到 60 秒，确保测试可靠性。
  • 测试数据管理：
    • 使用 fixtures（固定数据文件）或 API 调用设置干净、一致的数据环境，确保测试结果可预测。
    • 例如，测试登录流程时，可以通过 fixtures 模拟用户数据。
  • CI/CD 集成：
    • 将 Cypress 测试集成到 CI/CD 管道，如 GitHub Actions 或 Jenkins，自动化测试执行。
    • 例如，配置 headless 模式运行测试，节省资源。
  • 常见挑战与解决方案：
    • 动态内容：通过 Cypress 的内置等待机制解决，如 cy.waitFor()。
    • 跨浏览器测试：虽然 Cypress 支持多个浏览器，但建议使用云服务如 BrowserStack 模拟真实设备。
    • 性能：对于大型应用，测试执行时间可能较长，建议优化测试用例，减少冗余操作。
  • 学习资源：

结论

综合来看，Cypress 因其易用性和快速执行特别适合前端 e2e 测试，Playwright 适合需要多语言支持的跨浏览器场景，Selenium 则更适合大型项目。建议用户深入学习 Cypress，结合上述最佳实践和真实案例，充分利用其社区资源和官方文档。

关键引用

avatar
文章
阅读
粉丝