Cypress 入門 + vs Playwright 完整對比 — 該選哪個 + 遷移實戰

「我們公司用 Cypress、面試問 Playwright 我不會、該轉嗎？」 — 看到太多 QA 卡在這。實話：Cypress 還很好用、但 Playwright 全方位贏。這篇講清楚兩者差異 + 何時該轉。

安裝

npm init -y
npm install --save-dev cypress
npx cypress open

GUI 介面選「E2E Testing」、Cypress 會自動建好 demo。

第一個 test

// cypress/e2e/login.cy.js
describe('Login', () => {
  beforeEach(() => {
    cy.visit('https://app.example.com/login');
  });

  it('登入成功跳轉 dashboard', () => {
    cy.get('input[name=email]').type('[email protected]');
    cy.get('input[name=password]').type('Test@123');
    cy.contains('button', '登入').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome').should('be.visible');
  });

  it('錯密碼顯示錯誤', () => {
    cy.get('input[name=email]').type('[email protected]');
    cy.get('input[name=password]').type('wrong');
    cy.contains('button', '登入').click();
    cy.contains('帳號或密碼錯誤').should('be.visible');
  });
});

跑：

npx cypress run                  # headless
npx cypress run --browser chrome # 指定瀏覽器
npx cypress open                 # GUI 互動

Cypress 最大強項 — Time Travel Debugger

這個 UX 至今沒對手。Playwright trace viewer 接近但體驗仍差一截。

// Cypress — chainable + 自家 API
cy.get('button')
  .contains('Submit')
  .click();

cy.get('[data-testid=email]')
  .type('[email protected]');

// Playwright — standard async/await
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email').fill('[email protected]');

Playwright 用 getByRole 跟 accessibility tree 走、跨 UI 改動更穩。 Cypress 鼓勵 data-testid、要前端配合。

// Cypress — OAuth 登入會死
it('OAuth login', () => {
  cy.visit('/login');
  cy.contains('Sign in with Google').click();
  // ❌ 跳到 accounts.google.com → cy.url() fail
  // 需要 cy.origin() 或 mock 整段 flow
});

// Playwright — 沒事
test('OAuth login', async ({ page }) => {
  await page.goto('/login');
  await page.click('text=Sign in with Google');
  await page.fill('input[type=email]', '[email protected]');
  await page.click('button:has-text("Next")');
  // ✓ 跨域沒問題
});

OAuth 工作流 = Playwright 絕對選。

// Cypress + React component test
import Button from './Button';

describe('Button', () => {
  it('renders text', () => {
    cy.mount(<Button>Click me</Button>);
    cy.contains('Click me').should('be.visible');
  });

  it('handles click', () => {
    const onClick = cy.stub();
    cy.mount(<Button onClick={onClick}>Click</Button>);
    cy.contains('Click').click();
    cy.wrap(onClick).should('have.been.calledOnce');
  });
});

這塊 Cypress UX 還是最好。但新案推 Vitest + Testing Library（更快、更輕量）。

Cypress 平行測試需要 Cypress Cloud 訂閱。150 個 case 跑 30 分鐘、付費後變 8 分鐘 — 但每月 $75 起跳。 Playwright --shard=1/4 免費就有。

Step 1: 評估

Step 2: API 對照表

Step 3: codemod 工具

npx playwright-codemod-cypress ./cypress/e2e/

會幫你轉 80%、剩 20% 手工。

Step 4: 跑舊新平行 1-2 週

確認 case behavior 一致、再下架 Cypress。

任 3 個 → 啟動遷移討論。

Q1: Cypress 跟 Playwright 差別？

好答案（30 秒版）：

Cypress 是 chainable API、time travel debugger 神級、Chrome-only 體驗最好。Playwright 是 async/await 標準、原生 cross-origin / multi-tab / 多瀏覽器 / 免費平行。新案推 Playwright、舊 Cypress 案不一定要遷。

Q2: 你會選哪個？

好答案：

看情境。新案 90% 選 Playwright（多平台 + 免費平行）。Component testing 有時保留 Cypress。但團隊現在大多走 Playwright + Vitest 組合、Cypress 漸式微。

Q3: Cypress 如何處理 cross-origin?

好答案：

用 cy.origin('https://other.com', () => { ... })、但仍有 cookie 限制與環境變數設置麻煩。Playwright 原生支援、寫起來像同 domain。

不要急著遷。但：
1. 學 Playwright（找工作必備）
2. 新 case 開始用 Playwright
3. 舊 case 維持 Cypress 直到痛點累積
4. 痛了再 codemod 遷

兩個都會的 QA = 求職市場熱門。

Cypress 是好工具、time travel UX 至今沒對手。但整體生態 + 跨平台支援 + 免費平行 → Playwright 全方位贏。2026 年的新案沒理由選 Cypress、但 5 年的 Cypress 案也不用急遷。會兩個 = 最強。

延伸：

• Playwright 入門 — 30 分鐘上手
• Page Object Model 實戰
• GitHub Actions × Playwright 完整實戰