余小章 @ 大內殿堂

開發環境

• Windows 11/WSL2
• nodejs 20.19.5
• npm 11.6
• playwright 1.58.0
• claude v2.1.19
• copilot v0.0.394
• gemini 0.25.2

安裝 Skill/MCP

Agent Skill

這裡分別需要 chrome-devtools、playwright skill，現在透過 context7 可以很快速的安裝

npx ctx7 skills search "chrome devtools"
npx ctx7 skills search "playwright"

執行結果如下圖

如果知道路徑，也可以直接安裝

npx ctx7 skills install /johnlindquist/claude-workshop-skills

 

MCP

當然也可以選擇 MCP

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

---

什麼是 Playwright？

Playwright 是一個 Node.js 函式庫，用於自動化瀏覽器操作。它的特色包括：

• 跨瀏覽器支援：支援 Chromium、Firefox、WebKit 三大瀏覽器引擎
• 自動等待：內建智慧等待機制，不需要手動寫 sleep 或 waitFor
• Codegen 錄製：可以錄製操作過程，自動產生測試程式碼
• 平行執行：支援多個測試同時執行，加快測試速度
• Trace Viewer：提供視覺化的測試追蹤工具，方便除錯

安裝

初始化專案

建立新專案並初始化：

mkdir e2e-test-project
cd e2e-test-project
npm init -y

 

安裝 Playwright

使用 npm 安裝 Playwright：

npm init playwright@latest

 

執行後會出現互動式選單，依照需求選擇：

✔ Do you want to use TypeScript or JavaScript? › TypeScript
✔ Where to put your end-to-end tests? › e2e
✔ Add a GitHub Actions workflow? › false
✔ Install Playwright browsers? › true

 

安裝完成後，專案結構如下：

e2e-test-project/
├── e2e/
│   └── example.spec.ts
├── playwright.config.ts
├── package.json
└── package-lock.json

 

上述動作可以在

錄製測試腳本

Playwright 提供 codegen 功能，可以錄製操作過程並產生測試程式碼。這是快速產生測試腳本的好方法。

啟動錄製

npx playwright codegen https://www.example.com

 

執行後會開啟兩個視窗：

1. 瀏覽器視窗：用來操作網站
2. Inspector 視窗：即時顯示產生的程式碼

錄製並輸出檔案

如果要將錄製結果直接輸出到檔案：

npx playwright codegen https://www.example.com --output e2e/example.spec.ts

 

錄製範例

以人力銀行網站為例：

npx playwright codegen https://www.1111.com.tw --output e2e/1111-job-bank.spec.ts

 

操作步驟：

1. 在瀏覽器中進行想要測試的操作（點擊、輸入、選擇等）
2. Inspector 視窗會同步產生對應的程式碼
3. 完成後關閉瀏覽器，程式碼會自動儲存到指定檔案

NOTE：如果在 WSL2 或無 GUI 環境執行 codegen，可能會無法啟動。建議在有桌面環境的終端機手動執行此命令。

---

撰寫測試腳本

基本結構

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

test.describe('功能描述', () => {
  test('測試案例名稱', async ({ page }) => {
    // 開啟網頁
    await page.goto('https://www.example.com');

    // 取得元素並操作
    await page.getByRole('button', { name: '登入' }).click();

    // 驗證結果
    await expect(page).toHaveTitle(/Example/);
  });
});

 

導航

await page.goto('https://www.example.com');
await page.goBack();
await page.reload();

 

元素定位

// 使用 Role
await page.getByRole('button', { name: '送出' });

// 使用文字
await page.getByText('歡迎');

// 使用 Placeholder
await page.getByPlaceholder('請輸入帳號');

// 使用 Test ID
await page.getByTestId('submit-button');

// 使用 CSS Selector
await page.locator('.login-form input[name="email"]');

 

表單操作

// 輸入文字
await page.getByPlaceholder('帳號').fill('user@example.com');

// 點擊按鈕
await page.getByRole('button', { name: '登入' }).click();

// 勾選 checkbox
await page.getByLabel('記住我').check();

// 選擇下拉選單
await page.getByLabel('城市').selectOption('taipei');

 

斷言

// 檢查元素存在
await expect(page.getByText('登入成功')).toBeVisible();

// 檢查 URL
await expect(page).toHaveURL(/.*dashboard/);

// 檢查標題
await expect(page).toHaveTitle('首頁');

// 檢查元素數量
await expect(page.getByRole('listitem')).toHaveCount(5);

 

執行測試

執行所有測試

npx playwright test

 

執行特定檔案

npx playwright test e2e/login.spec.ts

 

使用 UI 模式

npx playwright test --ui

UI 模式提供視覺化介面，可以看到每個測試步驟的執行過程與截圖。

產生測試報告

npx playwright show-report

 

設定檔

playwright.config.ts 是主要的設定檔，常用設定如下：

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

export default defineConfig({
  // 測試目錄
  testDir: './e2e',

  // 平行執行
  fullyParallel: true,

  // 失敗重試次數
  retries: process.env.CI ? 2 : 0,

  // 測試報告
  reporter: 'html',

  // 全域設定
  use: {
    // 基礎 URL
    baseURL: 'https://www.example.com',

    // 截圖（失敗時）
    screenshot: 'only-on-failure',

    // 追蹤
    trace: 'on-first-retry',
  },

  // 瀏覽器設定
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

上面的安裝步驟，透過 AI 可以很快速的就幫我們完成，使用以下提示詞

初始化 playwright 專案

---

搭配 AI 輔助產生測試

除了使用 codegen 錄製，也可以搭配 AI 工具產生測試腳本，開始之前我先建立最佳實踐

產生最佳實踐

在 AI 輸入

你是資深測試專家，協助我完成網站的自動化測試腳本
從 context7、google search 找到 playwright 的 2026 最佳實踐，輸出 playwright-best

產生結果如下

e2e-test-job-bank-init/playwright-best-practices.md at main · yaochangyu/e2e-test-job-bank-init

 

搭配 AI 產生測試腳本

方法一：提供規格文件

準備測試規格文件（例如 login-spec.md），描述測試情境：

# 登入功能測試 
## 測試情境 
1. 正常登入   
- 輸入正確的帳號密碼   
- 預期：跳轉到首頁 
2. 登入失敗   
- 輸入錯誤的密碼   
- 預期：顯示錯誤訊息

 

讓 AI 根據規格產生測試程式碼。

方法二：描述操作流程

直接描述想要測試的操作流程：

產生 1111 人力銀行的登入測試：
1. 開啟首頁
2. 點擊登入按鈕
3. 輸入帳號密碼
4. 點擊送出
5. 驗證登入成功

 

AI 會根據描述產生對應的 Playwright 測試程式碼。

---

我建立了一個空白專案，我裝了 Skill、最佳實踐 yaochangyu/e2e-test-job-bank-init，執行你的 AI 工具，依照順序輸入提示詞

1. 初始化 playwright 專案
2. @login-spec.md 依照檔案產生測試腳本

---

最佳實踐

1. 使用 Page Object Model：將頁面操作封裝成類別，提高可維護性
2. 避免硬編碼等待：使用 Playwright 內建的自動等待，不要用 page.waitForTimeout()
3. 使用 Test ID：在前端加入 data-testid 屬性，讓測試更穩定
4. 獨立測試資料：每個測試應該獨立，不依賴其他測試的執行結果
5. 善用 Fixtures：使用 fixtures 管理測試前後的設定與清理

心得

Playwright 的學習曲線不算陡峭，codegen 錄製功能對於快速產生測試腳本非常有幫助。自動等待機制也讓測試程式碼更簡潔，不用到處寫 sleep。

比較需要注意的是：

• 錄製產生的程式碼可能不夠精簡，需要手動優化
• 某些動態網站可能需要額外處理等待邏輯

整體來說，Playwright 是目前 E2E 測試工具中相當成熟的選擇，推薦給需要進行瀏覽器自動化測試的團隊。

另外，claude code 的體驗還是最好的，雖然 copilot cli 選的模型是 claude

參考連結

• Playwright 官方文件
• Playwright GitHub
• Playwright Best Practices

範本位置

yaochangyu/e2e-test-job-bank-init

若有謬誤，煩請告知，新手發帖請多包涵

Microsoft MVP Award 2010~2017 C# 第四季
Microsoft MVP Award 2018~2022 .NET