Playwright 2026 實戰：AI 驅動的 E2E 測試新時代

E2E（End-to-End，端對端）測試是前端開發中最容易被跳過、但又最重要的環節之一。它慢，它貴，它容易被忽略——但當你的用戶發現一個登入按鈕不能點擊的 bug 時，你會後悔沒有跑 E2E 測試。Playwright 在 2025-2026 年引入的 AI 功能，正在改變這個局面。Test Healing（測試自我修復）和 AI-powered agents（AI 驅動代理）讓 E2E 測試的維護成本大幅下降。

---

為什麼前端工程師要關心 E2E 測試的 AI 進化

E2E 測試的痛點很明確：寫測試不難，維護測試才難。

一個典型的場景：

1. 你寫了一個測試：登入 → 點擊「我的訂單」→ 確認看到訂單列表
2. 三週後，UI 工程師把「我的訂單」按鈕的 class 改了
3. 你的測試開始失敗，因為它還在找舊的 class
4. 你花了一小時更新測試
5. 兩週後，頁面結構又改了，測試又失敗了
6. 最後團隊決定停掉這個測試

這個循環是 E2E 測試最大的問題：維護成本太高，ROI（投資回報率）太低。

Playwright 的 AI 功能，就是為了解決這個問題。

---

Test Healing：測試失敗時自動修復

什麼是 Test Healing

Test Healing 是 Playwright 的一個 AI 功能：當測試因為 UI 變化而失敗時，Playwright 會自動分析失敗原因，並提議（或自動應用）修復方案。

// 你的測試
import { test, expect } from '@playwright/test';

test('使用者可以登入並看到訂單', async ({ page }) => {
  await page.goto('https://shop.example.com');
  
  // 這個 locator 可能因為 UI 變化而失效
  await page.click('[data-testid="login-button"]');  // 舊的 locator
  await page.fill('[data-testid="email-input"]', 'user@example.com');
  await page.click('[data-testid="submit-btn"]');
  
  await expect(page.locator('[data-testid="order-list"]')).toBeVisible();
});

// 當 UI 改變後，Test Healing 會：
// 1. 檢測到 [data-testid="login-button"] 找不到
// 2. AI 分析頁面，找到新的登入按鈕（可能是 #login-btn 或 .sign-in）
// 3. 提議更新 locator 或自動修復

Test Healing 的實際運作

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // 啟用 Test Healing
    aiAssistant: {
      testHealing: true,
    },
  },
});

# 當測試失敗時，Playwright CLI 會輸出 AI 建議
$ npx playwright test

FAIL src/e2e/shop.spec.ts
  × 找不到元素 [data-testid="login-button"]

  💡 AI 建議：
  元素可能在頁面重構後移動了。
  建議更新 locator 為：
  await page.click('#login-btn');

  [自動應用這個修復？ (y/n)]

Test Healing 的限制

Test Healing 不是萬能的：

• 它擅長：定位器（locator）變化、按鈕文字變化、簡單的 DOM 結構調整
• 它不擅長：业务流程變化（如登入流程整個改了）、需要業務邏輯理解的變化

---

AI-Powered Agents：用自然語言寫測試

概念

Playwright 的 AI-powered agents 讓你用自然語言描述測試場景，AI 幫你生成 Playwright 測試程式碼：

# 用 CLI 建立測試
$ npx playwright test:ai

> 描述你想測試的場景：

使用自然語言：使用者從首頁搜尋商品，加入購物車，確認購物車有商品

AI 生成：

// AI 生成的測試
import { test, expect } from '@playwright/test';

test('搜尋商品並加入購物車', async ({ page }) => {
  await page.goto('https://shop.example.com');
  
  // 搜尋商品
  await page.fill('[placeholder="搜尋商品"]', '運動鞋');
  await page.click('button:has-text("搜尋")');
  
  // 等待搜尋結果
  await expect(page.locator('.product-card')).toBeVisible();
  
  // 加入購物車
  await page.click('.product-card:first-child button:has-text("加入購物車")');
  
  // 確認購物車有商品
  await page.click('[data-testid="cart-icon"]');
  await expect(page.locator('.cart-item')).toBeVisible();
});

Smarter Code Gen

除了自然語言，Playwright 的 codegen（代碼生成）功能也變得更聰明：

# 新的 codegen 會自動檢查元素可見性
npx playwright codegen --target=typescript https://shop.example.com

生成時，Playwright 會：

• 自動檢查元素是否可見：避免生成對隱藏元素的點擊
• 智慧選擇定位器：優先使用 data-testid，其次是 role 和 label，最後才是 CSS selector
• 處理 Async 元素：自動等待元素出現

---

Playwright vs Cypress vs Selenium

維度	Playwright	Cypress	Selenium
速度	最快（瀏覽器隔離）	中等	較慢
平行測試	原生支援	需要付費版	需自行配置
Browser 支援	Chromium, Firefox, WebKit	僅 Chromium	所有瀏覽器
AI 功能	✅ Test Healing, AI agents	有限	❌
TypeScript 支援	原生	官方支援	需要 wrapper
學習曲線	中等	較低	較高

Playwright 的優勢場景

• 需要測試多瀏覽器：Firefox、WebKit 的支援是 Playwright 的強項
• 大型測試套件：平行測試和 browser contexts 的隔離讓測試套件更快
• AI 輔助需求：Test Healing 可以減少維護成本
• 微軟生態：GitHub Actions、Azure DevOps 整合良好

Cypress 的優勢場景

• 小型團隊：學習曲線低，文檔豐富
• React 應用：Cypress 對 React 元件的深層理解更好
• 簡單的內部工具測試：不需要多瀏覽器支援時，Cypress 足夠

---

實務：從零建立 Playwright 測試

安裝

npm init -y
npm install -D @playwright/test
npx playwright install --with-deps chromium

基本設定

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,          // 平行測試
  forbidOnly: !!process.env.CI, // CI 環境禁止 only
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined, // CI 用 1個，避免資源競爭
  reporter: 'html',
  
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',   // 失敗時保留 trace
    aiAssistant: {
      testHealing: true,        // 啟用 Test Healing
    },
  },
  
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

範例測試

// tests/e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('結帳流程', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
    // 登入
    await page.fill('[data-testid="email"]', 'test@example.com');
    await page.fill('[data-testid="password"]', 'password123');
    await page.click('[data-testid="login-submit"]');
  });

  test('可以完成簡單的購物流程', async ({ page }) => {
    // 瀏覽商品
    await page.goto('/products');
    await page.click('.product:first-child');
    
    // 加入購物車
    await page.click('[data-testid="add-to-cart"]');
    await expect(page.locator('[data-testid="cart-count"]')).toHaveText('1');
    
    // 結帳
    await page.click('[data-testid="checkout-btn"]');
    await page.fill('[data-testid="card-number"]', '4242424242424242');
    await page.fill('[data-testid="expiry"]', '12/28');
    await page.fill('[data-testid="cvv"]', '123');
    await page.click('[data-testid="pay-btn"]');
    
    // 確認成功
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
  });
});

---

CI/CD 整合

# .github/workflows/e2e.yml
name: E2E Tests
on: [push, pull_request]
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
        env:
          CI: true

---

結語：E2E 測試的 ROI 正在改變

Playwright 的 AI 功能，特別是 Test Healing，開始改變 E2E 測試的 ROI 計算方式。

過去：維護成本高 → 團隊放棄 E2E → 生產環境 bug 增加 現在：Test Healing 減少維護成本 → E2E 測試的持續價值更高

對於已經在使用 Playwright 的團隊，2026 年是升級到最新版本並啟用 AI 功能的好時機。對於還在評估 E2E 工具的團隊，Playwright 的 AI 功能和對多瀏覽器的原生支援，讓它成為大型專案的首選。

---

延伸閱讀

• VS Code 2026：AI 優先的開發體驗 — VS Code 中的 AI 測試輔助工具

---

本文是「2026 前端測試工具」系列文章之一。