CodeWalk

Playwright 与 Cypress E2E 测试框架核心对比

作者：孤独的心 · 2026-05-30 12:55

请从架构、浏览器支持、调试能力、网络拦截、跨域处理等方面对比 Playwright 和 Cypress 两个 E2E 测试框架。

回答

孤独的心

架构对比： | 特性 | Playwright | Cypress | |------|-----------|---------| | 运行方式 | 浏览器进程外控制（CDP协议） | 与浏览器同进程注入 | | 浏览器 | Chromium/Firefox/WebKit | 仅 Chromium（基于） | | 多标签页 | 原生支持 | 有限（同源可，跨域需 hack） | | 语言 | JS/TS/Python/C#/Java | 仅 JS/TS | | iframe | 原生支持 | 支持但有限 | | 网络拦截 | route API 强大灵活 | cy.intercept（也是强项） |

调试能力：

  • Playwright：playwright inspector（UI 模式）、trace viewer（记录完整操作）、慢动作 --slow-mo
  • Cypress：内嵌 Time Travel（回放每一步）、Selector Playground、自动截图/视频

跨域处理：

  • Playwright：无限制，原生支持跨域操作
  • Cypress：受同源策略限制，每个 cy.origin() 隔离上下文（Cypress 12+ 改进）

API 风格：

// Playwright
await page.goto('https://example.com');
await page.locator('button').click();
await expect(page.locator('h1')).toHaveText('Hello');

// Cypress
cy.visit('https://example.com');
cy.get('button').click();
cy.get('h1').should('have.text', 'Hello');

选择建议：

  • 需要跨浏览器测试 → Playwright
  • 开发中快速调试 → Cypress
  • CI 集成 → 两者都可，Playwright 更轻量