跳至主要内容

Playwright vs Vitest：測試工具大比拼 🧪

寫程式就像蓋房子，測試就是在蓋好後確認牆壁不會倒、門可以開。
本文用最簡單的方式帶你認識兩個超熱門的測試工具：Playwright 和 Vitest。

🤔 什麼是「測試」？​

在開始之前，先簡單說明一下為什麼需要測試工具。

當你寫好一段程式，你會想知道：

  • 這個按鈕點下去會不會正常跳出視窗？
  • 這個計算函式算出來的結果對不對？
  • 改了 A 功能之後，B 功能有沒有壞掉？

測試工具就是幫你自動檢查這些事情的程式，讓你不用每次都手動去點網頁、看結果。

🎭 Playwright 是什麼？​

Playwright 是 Microsoft 開發的工具，專門用來做 E2E（End-to-End，端對端）測試。

白話說明​

想像你雇了一個機器人，它會幫你：

  1. 打開瀏覽器
  2. 進入你的網站
  3. 模擬真實用戶的行為（點按鈕、填表單、往下捲動）
  4. 確認結果是否正確

這就是 Playwright 做的事！

Playwright 的特色​

  • ✅ 支援多種瀏覽器：Chrome、Firefox、Safari（WebKit）都可以測
  • ✅ 可以截圖和錄影：測試失敗時自動截圖，方便除錯
  • ✅ 跨平台：Windows、Mac、Linux 都能用
  • ✅ 支援多種語言：JavaScript、TypeScript、Python、Java、C# 都可以寫測試

Playwright 程式範例​

// 測試「登入」功能的範例
import { test, expect } from '@playwright/test';

test('用戶可以成功登入', async ({ page }) => {
  // 打開登入頁面
  await page.goto('https://mywebsite.com/login');

  // 輸入帳號密碼
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'mypassword');

  // 點擊登入按鈕
  await page.click('button[type="submit"]');

  // 確認跳轉到首頁，且出現「歡迎回來」的文字
  await expect(page).toHaveURL('https://mywebsite.com/home');
  await expect(page.locator('h1')).toContainText('歡迎回來');
});

這段程式就像在告訴機器人：「幫我去試試看用戶能不能登入。」

⚡ Vitest 是什麼？​

Vitest 是由 Vite 團隊開發的**單元測試（Unit Test）**工具，特別適合搭配現代前端框架（如 Vue、React）使用。

白話說明​

Vitest 比較像是直接檢查你寫的每一個零件，而不是測整個網站流程。

例如：

  • 你寫了一個「計算購物車總金額」的函式
  • Vitest 直接呼叫這個函式，丟進去測試資料，看答案對不對
  • 不需要打開瀏覽器，速度非常快！

Vitest 的特色​

  • ✅ 速度超快：因為不需要啟動瀏覽器，執行很迅速
  • ✅ 與 Vite 無縫整合：如果你用 Vite 開發，幾乎零設定就能用
  • ✅ 語法和 Jest 很像：學過 Jest 的話，上手很容易
  • ✅ 支援 TypeScript：原生支援，不需要額外設定
  • ✅ 有 UI 介面：可以在瀏覽器裡看測試結果，很直觀

Vitest 程式範例​

// 測試「計算折扣」函式的範例
import { describe, it, expect } from 'vitest';
import { calculateDiscount } from './discount';

describe('calculateDiscount 折扣計算', () => {
  it('購買金額超過 1000，應打九折', () => {
    const result = calculateDiscount(1200);
    expect(result).toBe(1080); // 1200 * 0.9 = 1080
  });

  it('購買金額未達 1000，不打折', () => {
    const result = calculateDiscount(800);
    expect(result).toBe(800);
  });

  it('購買金額為 0，應回傳 0', () => {
    const result = calculateDiscount(0);
    expect(result).toBe(0);
  });
});

這段程式在測試「折扣計算」這個函式，在不同情境下是否都能給出正確答案。

📊 Playwright vs Vitest：一眼看懂差異​

比較項目PlaywrightVitest
主要用途測試整個網站流程測試單一函式或元件
測試類型E2E 測試單元測試 / 整合測試
需要瀏覽器？✅ 需要❌ 不需要
執行速度較慢（需啟動瀏覽器）非常快
適合測試用戶操作流程邏輯函式、元件
開發商MicrosoftVite 團隊
難易度中等較簡單
截圖/錄影✅ 支援❌ 不支援

🤷 我應該用哪一個？​

用 Playwright 如果你想測：​

  • 用戶從登入到結帳的完整流程
  • 表單填寫後頁面是否正確跳轉
  • 網頁在不同瀏覽器的顯示是否正常
  • 動態載入的內容（例如無限滾動）

💡 簡單記法：Playwright = 模擬真實用戶在使用你的網站

用 Vitest 如果你想測：​

  • 計算函式（例如：計算稅金、排序演算法）
  • Vue / React 元件的邏輯行為
  • API 回傳資料的處理邏輯
  • 想要超快速的測試回饋

💡 簡單記法：Vitest = 測試你寫的每一個「零件」是否正常運作

🧩 可以同時用嗎？​

可以！而且非常推薦這樣做。

在真實的專案中，這兩個工具經常搭配使用：

整個專案的測試策略
├── Vitest（單元測試）
│   ├── 測試工具函式
│   ├── 測試 API 邏輯
│   └── 測試 Vue/React 元件行為
│
└── Playwright（E2E 測試）
    ├── 測試登入/登出流程
    ├── 測試購物車到結帳
    └── 測試跨瀏覽器相容性

用 Vitest 確保每個零件都沒問題，再用 Playwright 確保把零件組裝起來的整體流程也沒問題。

🚀 如何快速開始？​

安裝 Vitest​

# 在你的專案目錄下執行
npm install -D vitest

# 在 package.json 新增指令
# "scripts": { "test": "vitest" }

# 執行測試
npm test

安裝 Playwright​

# 安裝 Playwright
npm init playwright@latest

# 執行測試
npx playwright test

# 打開有 UI 介面的測試模式
npx playwright test --ui

📝 總結​

PlaywrightVitest
一句話模擬用戶操作整個網站快速測試程式邏輯
最大優點最接近真實情境速度快、整合方便
最大缺點速度較慢無法測試真實瀏覽器行為

兩個工具各有擅長的場景，對初學者來說：

  1. 先學 Vitest ——入門簡單，能快速建立測試習慣
  2. 再學 Playwright ——當你的專案需要測試完整流程時加入

測試不是一蹴可幾的事，從小地方開始，慢慢養成習慣，你的程式碼品質會越來越好！💪

本文適合前端開發初學者閱讀，範例使用 JavaScript / TypeScript。