玩玩 Playwright — API Testing 初體驗

為什麼用 Playwright 測 API？

雖然我們常用 Postman、curl 或 Jest 來測 API，但若你的專案已經使用 Playwright 做 E2E 測試，那麼善用同一套框架處理 API 測試，不僅可減少工具切換，還能將 UI 流程與 API 驗證整合在一起，提升測試維運的一致性。

Playwright 提供的 request 模組，讓我們可以像在用 fetch 一樣操作 HTTP 請求，非常方便。

開始寫第一個 API 測試

安裝 Playwright

如果你尚未安裝 Playwright，可以透過下列指令快速安裝：

npm init playwright@latest

選擇 TypeScript 或 JavaScript 都可以，本篇範例以 TypeScript 為例。

撰寫 API 測試

假設我們有一個簡單的 API：https://jsonplaceholder.typicode.com/posts/1

我們來撰寫一個測試，驗證它回傳的內容正確：

import { test, expect, request } from '@playwright/test';

test('GET /posts/1 should return a valid post', async () => {
  const apiContext = await request.newContext();
  const response = await apiContext.get('https://jsonplaceholder.typicode.com/posts/1');
  
  expect(response.ok()).toBeTruthy();
  expect(response.status()).toBe(200);

  const body = await response.json();
  expect(body).toHaveProperty('id', 1);
  expect(body).toHaveProperty('userId');
  expect(body).toHaveProperty('title');
});

這段測試會：

• 建立一個新的 API context（不會受到 UI session 影響）
• 發送 GET 請求
• 驗證 HTTP 狀態碼與回傳資料欄位

常見應用場景

你可以用 Playwright 來做以下這些 API 測試場景：

• 使用者登入流程（POST login，取 token，存到測試 session）
• CRUD 測試（創建、讀取、更新、刪除資源）
• 驗證後端錯誤處理（如 400, 401, 500 的回傳）
• 測試前後端串接是否正確（UI 操作後檢查對應 API 結果）

這也意味著，我們可以混合使用 Playwright 的 UI 操作 + API 驗證，打造更全面的 E2E 測試！