VSCode MCP Servers 與專案導入 Playwright 自動化測試分享

Sat, 30 Aug 2025 00:00:00 +0000

本篇將分享如何在 VSCode 開發中，結合 MCP Servers 與 Playwright，製作現代化自動化測試的流程。

MCP

MCP 全名為 Model Context Protocol，中文為「模型上下文協定」，是一種開放協定，2024 年 11 月由開發模型 Claude 的美國新創公司 Anthropic 推出，提供了一種標準化的方式，讓 AI 向外部工具請求使用服務和數據。並且透過提供 AI 上下文指示，讓 AI 決定使用哪些工具、按什麼順序以及如何將工作流程連結在一起以完成任務。

換句話說，MCP 不只能當作轉接頭，也像是提供 AI 一本使用說明書，幫助 AI 理解企業數據和應用情境，例如內部數據的結構與存取方式、重要的業務邏輯與規則，以及專業術語等。

以銀行客服系統導入 AI 為例，當客戶詢問：「能否提前還清貸款？」MCP 能提示 AI 該銀行的房貸規則在哪裡查詢、違約金計算方式，和哪些客戶符合提前還款條件等。

典型應用：AI Copilot、Code Search、Test Runner、Remote Workspace 等
讓 VSCode extension 能像微服務一樣，與外部系統互動

MCP Server 架構圖：

MCP 主機（MCP Host）

Claude、ChatGPT…等需要透過 MCP 存取外部工具的 AI 模型，它們會請求 MCP 來幫助執行各種操作。這些 AI 模型就像筆電本身，需要透過轉接頭來連接外部裝置。

例如：Claude、ChatGPT、Gemini、Llama…等 AI 模型。

MCP 客戶端（MCP Client）

AI 存取 MCP 的程式碼，它讓 AI 可以透過 MCP 來請求特定的工具或數據來源。這就像筆電的 USB 連接埠，負責發送請求給轉接頭，讓筆電知道該怎麼存取外部設備。

例如：Anthropic 官方 MCP SDK、OpenAI MCP client library、Python/TypeScript MCP client 實作…等。

MCP 伺服端（MCP Server）

Slack、Gmail、Google 日曆、Mac 檔案系統等，提供 AI 所需的功能與數據，可以是遠端應用程式或本地數據來源。MCP Server 就像滑鼠、鍵盤、硬碟等各種 USB 設備，透過轉接頭連接到筆電。

以 VSCode 為例，MCP Servers 作為 VSCode 與外部工具或數據源之間的媒介，像是使用者可以從 Google Drive 調取數據檔案，也可以從 GitHub 創建任務分支和查詢程式碼。

例如：Google Drive MCP Server、GitHub MCP Server、VSCode MCP Server、Notion MCP Server、Jira MCP Server…等。

VSCode MCP Server 是什麼？

VSCode 官方也提出了自己的 MCP Servers，目標是讓 extension 能以更彈性的方式與外部服務溝通，突破過去 LSP（Language Server Protocol）或 Debug Adapter Protocol 的限制。

MCP Server 特色：

支援多種 context（如 AI、語意分析、測試、執行環境等）
可同時處理多種資料流與事件，適合大型、複雜的 extension
典型應用：AI Copilot、Code Search、Test Runner、Remote Workspace 等
讓 VSCode extension 能像微服務一樣，與外部系統互動

Playwright 是什麼？

Playwright 是由 Microsoft 推出的現代化瀏覽器自動化測試框架，支援 Chromium、Firefox、WebKit 三大主流瀏覽器，並可用 TypeScript、JavaScript、Python、C# 等語言撰寫測試腳本。Playwright 具備跨平台、API 直覺、可錄製操作、支援多分頁與多瀏覽器等特性，適合用於前端、Web App、SPA、Webview 等多種場景的自動化測試。

主要特色：

Playwright 讓開發者能快速撰寫、執行、維護自動化測試腳本，是現代前端開發與測試的主流選擇之一。

Playwright 與其他自動化操作工具的差異

工具	支援瀏覽器	語言支援	API/功能特色	CI/CD 整合	其他特色
Playwright	Chromium、Firefox、WebKit（含 Safari）	JavaScript、TypeScript、Python、C#	API 現代化且直覺，原生多分頁/多瀏覽器、網路攔截、等待同步、錄製腳本	易於整合	進階功能多
Selenium	幾乎所有主流瀏覽器	Java、Python、C#、JS 等	API 較繁瑣、較舊，等待/同步需手動處理	易於整合	穩定性高、跨平台
Cypress	Chromium、Firefox	JavaScript、TypeScript	API 現代化且直覺，原生等待/同步、無多分頁/多瀏覽器	易於整合	內建測試儀表板

重點差異說明：

Playwright 支援三大主流瀏覽器（含 Safari/WebKit），API 現代化，原生支援多分頁、網路攔截、等待同步，適合複雜互動測試。
Selenium 歷史悠久，支援最多語言與瀏覽器，但 API 較繁瑣，等待/同步需手動處理，適合跨平台、穩定性要求高的場景。
Cypress 以前端 E2E 測試為主，API 直覺，原生等待，但僅支援部分瀏覽器，不支援多分頁，適合前端 SPA/React/Vue 等專案。

Playwright 在現代前端、Web App、VSCode extension 測試場景下，通常能提供更高效、易用的自動化體驗。

Playwright 導入方式

安裝 Playwright 套件

1
2


npm install -D @playwright/test
npx playwright install

這會安裝 Playwright 及所需瀏覽器。

建立測試目錄與設定檔

建立 tests/ 目錄，並新增 playwright.config.ts：

playwright.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
 testDir: "./playwright", // 測試腳本目錄
 timeout: 30 * 1000,
 expect: {
 timeout: 5000
 },
 fullyParallel: true,
 forbidOnly: !!process.env.CI,
 retries: process.env.CI ? 2 : 0,
 workers: process.env.CI ? 1 : undefined,
 reporter: [["list"], ["html", { outputFolder: "playwright-report", open: "never" }]],
 use: {
 baseURL: "https://localhost:8082/", // Vite dev server https
 ignoreHTTPSErrors: true,
 trace: "on-first-retry",
 headless: false,
 viewport: { width: 1280, height: 800 },
 ...devices["Desktop Chrome"]
 }
})

撰寫第一個測試腳本

例如建立一支跑自動跑登入流程的腳本：

tests/login.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

test("登入流程測試", async ({ page }) => {
 await page.goto("https://{我要測試的網站}/login");
 await page.fill("input[name="username"]", "wayne");
 await page.fill("input[name="password"]", "123456");
 await page.click("button[type="submit"]");
 await expect(page).toHaveURL(/dashboard|home/);
 await expect(page.locator(".user-info")).toContainText("wayne");
});

執行測試

1
2
3
4
5
6
7
8


# 執行所有測試：
npx playwright test

#執行單一測項（指定檔案）：
npx playwright test tests/login.spec.ts

# 執行單一測項（指定測試名稱）：
npx playwright test -g "登入流程測試"

Playwright 會自動啟動瀏覽器並執行所有或指定的測試腳本。

進階設定與 CI 整合

可在 playwright.config.ts 設定多瀏覽器測試、環境變數、報告格式等
可在 GitHub Actions、GitLab CI 等自動化流程中執行 Playwright 測試

Playwright 在 VSCode Extension/MCP Server 專案的應用

驗證 extension Webview UI/互動
測試 MCP Server API 回應與錯誤處理
整合 CI/CD，確保 extension 發布品質

Playwright 讓開發者能快速撰寫、執行、維護自動化測試腳本，是現代前端開發與測試的主流選擇之一。

Playwright 的設定值與常用元件介紹

playwright.config 常用設定值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


import { defineConfig } from '@playwright/test';

export default defineConfig({
 testDir: './tests', // 測試檔案目錄
 timeout: 30000, // 單一測試逾時（毫秒）
 retries: 1, // 測試失敗時重試次數
 reporter: [['list'], ['html']], // 測試報告格式
 fullyParallel: true, // 是否完全平行執行所有測試
 forbidOnly: true, // 禁止 .only，避免漏跑測試
 workers: 2, // 平行執行的 worker 數量
 outputDir: 'test-results/', // 測試產生的快照、截圖、trace 等輸出目錄
 testIgnore: ['**/skip/**'], // 忽略哪些測試檔案（glob pattern）
 testMatch: ['**/*.spec.ts', '**/*.test.ts'], // 匹配哪些測試檔案（glob pattern）
 offline: false, // 是否離線模式（true | false）
 use: {
 headless: true, // 是否無頭模式
 baseURL: 'http://localhost:3000', // 預設 base URL
 viewport: {
 width: 1280,
 height: 720,
 }, // 預設瀏覽器視窗大小
 ignoreHTTPSErrors: true, // 忽略 HTTPS 錯誤
 video: 'retain-on-failure', // 錄影設定: 'on' | 'off' | 'retain-on-failure'
 screenshot: 'only-on-failure', // 截圖設定: 'on' | 'off' | 'only-on-failure'
 trace: 'retain-on-failure', // Trace 記錄: 'on' | 'off' | 'retain-on-failure'
 storageState: 'state.json', // 預載入登入狀態檔
 locale: 'zh-TW', // 預設語系
 colorScheme: 'dark', // 顏色主題: 'light' | 'dark' | 'no-preference'
 permissions: [
 'geolocation',
 'notifications',
 ], // 權限設定
 geolocation: {
 latitude: 25.033,
 longitude: 121.5654,
 }, // 預設地理位置
 timezoneId: 'Asia/Taipei', // 預設時區
 userAgent: 'MyCustomAgent/1.0', // 自訂 User-Agent
 httpCredentials: {
 username: 'user',
 password: 'pass',
 }, // HTTP 基本認證
 extraHTTPHeaders: {
 'x-test-header': 'test',
 'authorization': 'Bearer token',
 }, // 額外 HTTP 標頭
 acceptDownloads: true, // 是否允許下載檔案
 isMobile: false, // 是否模擬行動裝置（true | false）
 deviceScaleFactor: 1, // 裝置像素比例（預設 1）
 hasTouch: false, // 是否支援觸控（true | false）
 javaScriptEnabled: true, // 是否啟用 JS（true | false）
 recordVideo: {
 dir: 'videos/',
 size: { width: 1280, height: 720 },
 }, // 錄影輸出目錄與尺寸
 serviceWorkers: 'allow', // Service Worker 設定: 'allow' | 'block'
 strictSelectors: true, // 是否嚴格選取器（true | false）
 userDataDir: './user-data', // 使用者資料目錄
 launchOptions: {
 slowMo: 100,
 // 其他啟動選項可加在這裡
 }, // 啟動瀏覽器時的額外選項
 },
 projects: [ // 多瀏覽器/多環境測試設定
 {
 name: 'chromium',
 use: { browserName: 'chromium' },
 },
 {
 name: 'firefox',
 use: { browserName: 'firefox' },
 },
 {
 name: 'webkit',
 use: { browserName: 'webkit' },
 },
 ],
 globalSetup: './global-setup.js', // 全域初始化腳本
 globalTeardown: './global-teardown.js', // 全域清理腳本
});

更多請參考官方文件

常用元件與方法

類型	名稱/方法	說明
測試物件	`test`	定義測試案例
頁面物件	`page`	操作瀏覽器分頁
斷言	`expect`	驗證結果
定位器	`locator`	精準選取元素
填值	`fill`	填入表單欄位
點擊	`click`	點擊按鈕或元素
取得文字	`textContent`	取得元素文字內容
等待	`waitForSelector`	等待元素出現
螢幕截圖	`screenshot`	擷取頁面或元素畫面
輸入鍵盤	`keyboard`	鍵盤事件
輸入滑鼠	`mouse`	滑鼠事件
請求物件	`request`	API 請求測試
瀏覽器物件	`browser`	控制瀏覽器（多分頁、多瀏覽器）
配置	`defineConfig`	Playwright 設定檔
錯誤截圖	`trace`	錯誤追蹤與錄影

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


// 定義測試案例 test
test('首頁載入', async ({ page }) => {
 await page.goto('https://example.com');
});

// 操作瀏覽器分頁 page
await page.goto('https://example.com');

// 驗證結果 expect
await expect(page).toHaveURL('https://example.com');

// 精準選取元素 locator
const btn = page.locator('button.login');

// 填入表單欄位 fill
await page.fill('input[name="username"]', 'wayne');

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

// 取得元素文字內容 textContent
const txt = await page.textContent('.user-info');

// 等待元素出現 waitForSelector
await page.waitForSelector('.loading-done');

// 擷取頁面或元素畫面 screenshot
await page.screenshot({ path: 'home.png' });

// 鍵盤事件 keyboard
await page.keyboard.press('Enter');

// 滑鼠事件 mouse
await page.mouse.click(100, 200);

// API 請求測試 request
const res = await request.get('/api/health');

// 控制瀏覽器 browser
const browser = await chromium.launch();

// Playwright 設定檔 defineConfig
export default defineConfig({ testDir: './tests' });

// 錯誤追蹤與錄影 trace
npx playwright show-trace trace.zip

更多元件與 API 可參考 Playwright 官方文件

實戰一：自動化測試 API healthz check

建立 MCP Server 專案（Node.js/TypeScript）
在 extension 內啟動 MCP Server，並與前端溝通
撰寫 Playwright 測試腳本，模擬 VSCode extension 與 MCP Server 的互動

1
2
3
4
5
6
7
8
9


// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
 testDir: './tests',
 use: {
 headless: true,
 baseURL: 'http://localhost:3000',
 },
});

1
2
3
4
5
6


// tests/mcp-server.spec.ts
import { test, expect } from '@playwright/test';
test('MCP Server health check', async ({ request }) => {
 const res = await request.get('/health');
 expect(res.ok()).toBeTruthy();
});

實戰二：Playwright 自動化流程範例

以下以我自己的專案的登入流程自動化測試為例透過打開我的網站登入頁，並輸入帳號與密碼後進行登入，登入後檢查頁面上是否存在「Dashboard」字樣(因我的網站登入後會導向到 Dashboard 頁面)。

tests/login.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


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

test('登入流程測試', async ({ page }) => {
 await page.goto('https://{我的網站}/');
 await page.fill('input[name="username"]', 'wayne');
 await page.fill('input[name="password"]', '123456');
 await page.click('button[type="submit"]');
 // 驗證是否登入成功
 await expect(page).toHaveURL(/dashboard|home/);
 await expect(page.locator('.user-info')).toContainText('wayne');
});

封裝成一個 helper 好了：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import { chromium, Page } from "@playwright/test"

export async function doLogin(page: Page, saveStorageStatePath?: string) {
 await page.goto("https://{我的網站}/")
 await page.fill('input[name="username"], input[placeholder="帳號"], input[type="text"]', "wayne")
 await page.fill('input[name="password"], input[placeholder="密碼"], input[type="password"]', "123456")
 await page.click('button[type="button"]')
 await page.waitForSelector("text=Dashboard")
 if (saveStorageStatePath) {
 await page.context().storageState({ path: saveStorageStatePath })
 }
}

// 若直接執行本檔案，則自動產生 storageState.json
if (require.main === module) {
 ;(async () => {
 const browser = await chromium.launch()
 const page = await browser.newPage()
 await doLogin(page, "playwright/storageState.json")
 await browser.close()
 })()
}

延伸製作一個 登入並切換語系 的自動化測試腳本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


import { test, expect } from "@playwright/test"
import { doLogin } from "./login-helper"
test("測試登入流程與切換語系功能", async ({ page }) => {
 await test.step("測試登入流程環節", async () => {
 await doLogin(page)
 await page.waitForTimeout(1000)
 await page.screenshot({ path: "debug-login.png" })
 await expect(page.locator("text=Dashboard").first()).toBeVisible()
 })

 await test.step("測試切換語系為简体中文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "简体中文" }).click()

 // 驗證文字是否變成簡體中文了
 await expect(page.locator("text=仪表板").first()).toBeVisible()
 })

 await test.step("測試切換語系為英文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "English" }).click()

 // 驗證文字是否變成英文了
 await expect(page.locator("text=Dashboard").first()).toBeVisible()
 })

 await test.step("測試切換語系為繁體中文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "繁體中文" }).click()

 // 驗證文字是否變成繁體中文了
 await expect(page.locator("text=儀錶板").first()).toBeVisible()
 })
})

實戰三：Playwright 串聯 Vitest UI 跑單元測試

串聯一下之前在闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！，自己撰寫的 Utils tools function 的單元測試好了，讓自己後續可以直接打打字，讓 Agent 幫我跑這些單元測試(工程師沒有最懶，只有更懶)。

test-tools-unit.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


import { test, expect } from "@playwright/test"

test("執行 tools.test.ts 所有 Vitest 單元測試", async ({ page }) => {
 // 檢查 Vitest UI 服務
 try {
 const response = await page.goto("http://localhost:51204/__vitest__/")
 if (!response || !response.ok()) {
 throw new Error("Vitest UI 服務未啟動或無法連線，請先執行 npx vitest --ui")
 }
 } catch (e) {
 throw new Error("Vitest UI 服務未啟動或無法連線，請先執行 npx vitest --ui")
 }

 // 搜尋 tools.test.ts
 await page.fill('input[placeholder="Search..."]', "tools.test")
 await page.keyboard.press("Enter")

 // 點擊 tools.test.ts 測試檔
 await page.click("text=tools.test.ts")

 // 點擊 rerun file 按鈕
 const rerunButton = await page.$('button[title="Rerun file"], button[aria-label="Rerun file"]')
 if (rerunButton) await rerunButton.click()

 // 等待測試進入 running 狀態
 await page.waitForSelector("text=Running", { timeout: 10000 }).catch(() => {})

 // 等待 running 消失
 await page.waitForSelector("text=Running", { state: "detached", timeout: 60000 }).catch(() => {})

 // 等待「All tests passed in this file」出現以驗證單元測試是否通過
 await page.waitForSelector("text=All tests passed in this file", { timeout: 20000 })
 const successText = await page.textContent("text=All tests passed in this file")

 console.log("測試摘要:", successText)
 expect(successText).toContain("All tests passed in this file")
})

＊流程非常的彈性可控，且可以依照自己的需求去撰寫測試腳本，達到自動化測試的目的，以上就舉幾個較為單純的腳本內容，可以依各自業務需求去撰寫自己需要的腳本。
＊若你的 VSCode 有開啟 chat.mcp.enabled，則可直接透過 VSCode Chat 的 Agent 模式進行即時的測試腳本撰寫與調試，加速完成你的測試項目腳本，甚至直接透過 Chat 來執行你的測試項目。
＊可以在開發時，多在 DOM 上埋入 id、class，這樣當執行自動化驗證的操作時，可以更輕鬆的獲取到你所需要的元素，確保自動化測試流程的穩定與品質。

開發心得與建議

MCP Server 架構彈性高，適合 AI/自動化/大型 extension。
建議在開發前端代碼時，在 DOM 上多埋入 id、class，方便 Playwright 定位元素，確保自動化測試流程的穩定與品質。
建議可以透過 VSCode Chat 的 Agent 模式進行即時的測試腳本撰寫與調試，記得 vscode 的settings 要開啟 chat.mcp.enabled。
Playwright 腳本可直接整合 CI，快速驗證功能。
建議在使用 VSCode 時，安裝 Playwright 的官方 extension，方便在 VSCode 內撰寫、執行測試腳本。
建議將 MCP Server、Playwright 測試與 extension 專案分層管理，方便維護。
Playwright 支援多瀏覽器測試，建議在 CI 中同時驗證 Chrome/Firefox/WebKit。

結語

VSCode MCP Servers 與 Playwright 的結合，讓 extension 開發與測試更現代化、流程自動化。推薦給有志於 VSCode 生態圈、AI 工具、測試自動化的開發者！

如有相關問題，歡迎留言討論或參考官方文件。

自動化測試 on Wayne's blog | 偉恩的部落格 | 技術博客

VSCode MCP Servers 與專案導入 Playwright 自動化測試分享

MCP

MCP 主機（MCP Host）

MCP 客戶端（MCP Client）

MCP 伺服端（MCP Server）

VSCode MCP Server 是什麼？

Playwright 是什麼？

Playwright 與其他自動化操作工具的差異

Playwright 導入方式

安裝 Playwright 套件

建立測試目錄與設定檔

playwright.config.ts

撰寫第一個測試腳本

tests/login.spec.ts

執行測試

進階設定與 CI 整合

Playwright 在 VSCode Extension/MCP Server 專案的應用

Playwright 的設定值與常用元件介紹

playwright.config 常用設定值

常用元件與方法

實戰一：自動化測試 API healthz check

實戰二：Playwright 自動化流程範例

tests/login.spec.ts

login-helper.ts

實戰三：Playwright 串聯 Vitest UI 跑單元測試

test-tools-unit.spec.ts

開發心得與建議

結語