手把手教你用 AI + Playwright 寫 UI 自動化測試

作者：測試的雞腿
日期：2026年4月13日 上午11:05
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

利用 AI + Playwright MCP 自動產生語義化定位器，徹底解決 UI 自動化測試嘅定位器脆弱問題

整理版摘要

作者係一個測試工程師，親身經歷傳統 UI 自動化測試嘅崩潰時刻：花幾日寫好測試用例，前端改咗佈局就成片報錯，定位器全部失效。呢個唔係技術問題，而係傳統方法嘅根本缺陷——CSS/XPath 選擇器同頁面結構綁死咗。為咗解決呢個問題，作者分享咗一套基於 Playwright MCP 嘅方案，等 AI 可以「睇得明」網頁，自動生成語義化定位器，從此唔使再手動揾元素。

Playwright MCP 係一個 MCP 伺服器，為 AI（例如 VS Code 嘅 Copilot）提供讀取網頁無障礙樹（Accessibility Tree）嘅能力。瀏覽器會將每個元素翻譯成結構化說明：按鈕名「登錄」、輸入框標籤「用戶名」等。AI 根據呢份說明書生成嘅程式碼用 `get_by_role`、`get_by_label` 呢類 API，完全唔依賴 CSS 路徑或 XPath。只要元素嘅角色同名稱唔變，前端點樣改佈局都唔會影響測試。

呢套方案嘅本質係將「揾元素」嘅重複勞動交俾 AI，測試工程師只需專注「測啲咩」同「點樣設計測試策略」。作者透過實戰示範，由環境搭建到寫第一個登錄測試用例，再到批量生成參數化用例同開 Trace 除錯，完整展示咗點樣將 AI 融入日常工作。結論係：而家就可以動手，用一個鐘頭左右拉通環境，體驗 AI 生成測試用例嘅爽快感。

  • Playwright MCP 讓 AI 直接讀取無障礙樹，生成語義定位器（get_by_role / get_by_label），從此唔怕前端改佈局。
  • 環境搭建只需安裝 Python、Playwright、Playwright MCP npm 套件，並喺 VS Code 設定 mcp.json，連通 Copilot Agent 模式。
  • 傳統定位器（CSS/XPath）同頁面結構綁死，語義定位器根據元素角色同名稱定位，穩定性大幅提升。
  • 測試工程師可以將揾元素嘅重複工作交俾 AI，將精力放喺測試場景設計同策略分析，呢個先係真正有價值嘅地方。
  • 即時可用：跟住步驟配置環境，用 Copilot Chat 生成第一個登錄測試用例，再擴展到批量參數化場景，配合 Trace 功能快速排查失敗。
值得記低
流程

Playwright MCP 配置步驟

1. 裝 Python 3.8+、Node.js 18+、VS Code 同 GitHub Copilot；2. pip install playwright pytest-playwright && playwright install chromium；3. npm install -g @playwright/mcp@latest；4. 喺 .vscode/mcp.json 寫入 {"servers":{"playwright":{"command":"npx","args":["@playwright/mcp@latest"]}}}；5. 啟用 Agent 模式。

留作參考
整理重點

問題根源與 Playwright MCP 嘅解決原理

傳統 UI 自動化最令人頭痛嘅位就係定位器太脆弱：用 CSS 或 XPath 揀元素，前端一改佈局就全部失效。作者第一次遇到成片報錯嘅時候，心態真係崩咗。

呢個唔係你技術唔得，而係傳統定位器同頁面結構綁死咗，頁面一變用例就全掛。

Playwright MCP 嘅底層邏輯係畀 AI 讀取無障礙樹，唔係靠截圖。瀏覽器會將每個元素變成結構化說明：呢個係按鈕、名叫「登錄」；嗰個係輸入框、標籤係「用戶名」。

呢個就係解決脆弱定位器問題嘅底層邏輯——由「睇樣式」變成「睇語義」。

整理重點

由零開始：環境搭建到第一個測試用例

  1. 1 確保有 Python 3.8+、Node.js 18+，VS Code 裝好 GitHub Copilot 擴展。
  2. 2 開一個空文件夾，建立虛擬環境，裝 playwright 同 pytest-playwright，再用 playwright install chromium 下載瀏覽器。
  3. 3 全系統裝 @playwright/mcp@latest，然後喺 .vscode/mcp.json 寫入 MCP 配置，VS Code 會自動偵測並啟用。
  4. 4 喺 Copilot Chat 切到 Agent 模式，工具列表見到 playwright 工具就代表接通咗。

環境搞掂之後，用一個登錄頁實戰。叫 AI 分析頁面，生成輸入用戶名、密碼、點擊登錄同斷言嘅程式碼。AI 會自動讀取無障礙樹，產出類似 page.get_by_label('Username').fill('student') 嘅語義定位器。

你完全唔需要手動揾元素，AI 直接俾精準定位器，慳返大量時間。

AI 生成嘅第一個測試用例 python 
import pytest
from playwright.sync_api import Page, expect

def test_login_success(page: Page):
    page.goto("https://practicetestautomation.com/practice-test-login/")
    page.get_by_label("Username").fill("student")
    page.get_by_label("Password").fill("Password123")
    page.get_by_role("button", name="Submit").click()
    expect(page.get_by_text("Congratulations")).to_be_visible()

將程式碼保存做 test_login.py，用 pytest 執行，見到 PASSED 就成功。如果想睇瀏覽器操作過程，可以加 --headed 參數。

跑通第一個 AI 生成嘅測試用例嗰一刻，真係好有滿足感。

整理重點

進階技巧：批量場景、Trace 除錯同常見問題

逐個用例「傾」出嚟太慢？可以叫 AI 先列出所有要覆蓋嘅場景（錯誤密碼、空用戶名等），確認之後再直接生成參數化用例。一個函數就搞掂五個場景。

  • 開 Trace：pytest 加 --tracing=on，跑完喺 test-results/ 生成 trace 文件，用 playwright show-trace 打開可視化時間線，每一步嘅截圖同 DOM 快照都清清楚楚。
  • 定位器揾唔到元素？叫 AI 重新打開頁面分析一次，通常會畀到正確答案。
  • 需要登錄狀態？先用 codegen --save-storage=auth.json 保存登錄，然後喺 fixture 入面設定 storage_state，一次登錄後續用例複用。
  • MCP 連唔上？Cmd+Shift+P 搜 MCP: Show Output 睇伺服器日誌，大部分錯誤都喺嗰度顯示。

Trace 功能比打 print 方便好多，每個步驟都有截圖同網絡請求，排查失敗好直觀。

總括嚟講，呢套方案嘅核心係將重複勞動外判俾 AI，你只需負責審查邏輯同設計策略。而家就動手試嚇，用你哋系統嘅登錄頁行一次，好快就會愛上呢種工作方式。

你有冇試過呢種崩潰嘅時刻——

用咗兩三日寫好一批 UI 自動化用例，跑得順順利利，心諗都幾型。然後前端突然走過嚟話「我尋晚改咗嚇佈局」。你一跑，紅曬成個畫面。打開報錯，全部係 ElementNotFound，CSS 選擇器逐個失效。

然後你就開始一個一個揾元素，重新定位，重新除錯，重新跑……

（我第一次遇到呢個情況嘅時候，心態真係崩咗。）

呢個唔係你技術唔得，而係傳統 UI 自動化嘅老問題：定位器同頁面綁死咗，頁面一變，用例就全部死曬。今日分享嘅呢套方案，就係專登針對呢個問題嚟嘅。

— — —

Playwright MCP 係啲乜，先搞清楚佢

咪咁心急裝環境，先搞明個概念，唔係之後會一頭霧水。

Playwright MCP 係一個 MCP 伺服器（Model Context Protocol）。講白啲，就係俾 AI（例如 VS Code 裏面嘅 Copilot）裝咗對眼，等佢可以「讀得明」你個網頁——但唔係靠截圖，而係靠讀頁面嘅無障礙樹（Accessibility Tree）。

無障礙樹你可以咁樣理解：瀏覽器會將頁面上每個元素「翻譯」成一份結構化嘅說明書：呢個係按鈕、個名叫「登錄」，嗰個係輸入框、標籤係「用戶名」。AI 攞到呢份說明書，就知道應該點操作。

所以佢最終幫你生成嘅代碼係咁樣：

pythonpage.get_by_role("button", name="登錄").click()page.get_by_label("用戶名").fill("test@example.com")

你睇，冇任何 CSS 路徑，冇 XPath。佢認嘅係「個名叫登錄嘅按鈕」，唔認具體樣式。前端改咗佈局、調咗間距，只要按鈕仲叫「登錄」，呢行代碼就唔會死。

呢個就係佢解決脆弱定位器問題嘅底層邏輯。

— — —

環境搭建，由零開始

前提條件確認

先確認本地有呢幾樣嘢：

  • Python 3.8+（終端機執行 python --version 睇一睇）
  • VS Code
  • VS Code 裏面裝咗 GitHub Copilot 擴展（需要訂閲）
  • Node.js 18+（node --version 確認，裝 MCP 用）

初始化 Playwright 項目

揾個空白資料夾，用 VS Code 打開，終端機度執行：

bash# 創建虛擬環境python -m venv .venv# 激活（macOS/Linux）source .venv/bin/activate# Windows 用這個.venv\Scripts\activate# 裝 Playwrightpip install playwright pytest-playwright# 下載 Chromium（第一次要等一會兒）playwright install chromium

裝完驗證一下：

bashplaywright --version

出到版本號就得。

安裝 Playwright MCP 伺服器

bashnpm install -g @playwright/mcp@latest

喺 VS Code 入面設定 MCP

項目根目錄新增 .vscode/mcp.json，寫入：

json{  "servers": {    "playwright": {      "command": "npx",      "args": ["@playwright/mcp@latest"]    }  }}

保存，VS Code 右下角會彈出提示偵測到 MCP 設定，㩒啓用。

然後打開 Copilot Chat（側邊欄對話圖示），下拉切換到 Agent 模式，工具列表入面會睇到 playwright 相關工具，表示接通咗。

— — —

實戰：寫一個登錄測試案例

環境搞掂咗，嚟真嘅。用一個經典嘅登錄場景完整行一次。

俾 AI 幫你分析頁面

Copilot Chat 切換到 Agent 模式，輸入：

text幫我用 playwright 打開 https://practicetestautomation.com/practice-test-login/分析頁面結構，寫一個 Python 測試用例：1. 輸入用戶名 student2. 輸入密碼 Password1233. 點擊登錄按鈕4. 斷言登錄成功（頁面出現"Congratulations"）

Copilot 會經 MCP 自動打開呢個頁面，讀取無障礙樹，然後生成代碼：

pythonimport pytestfrom playwright.sync_api import Page, expectdef test_login_success(page: Page):    page.goto("https://practicetestautomation.com/practice-test-login/")    page.get_by_label("Username").fill("student")    page.get_by_label("Password").fill("Password123")    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text("Congratulations")).to_be_visible()

你唔使手動去揾任何元素，AI 直接俾你精準嘅語義定位器。

跑起來

將代碼保存為 test_login.py，然後：

bashpytest test_login.py -v

看到 PASSED 就搞掂。想睇瀏覽器操作過程：

bashpytest test_login.py -v --headed

順便加個失敗場景

繼續同 Copilot 講：

text再加一個用例：輸入錯誤密碼 WrongPassword，斷言頁面顯示錯誤提示

生成：

pythondef test_login_failed(page: Page):    page.goto("https://practicetestautomation.com/practice-test-login/")    page.get_by_label("Username").fill("student")    page.get_by_label("Password").fill("WrongPassword")    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text("Your password is invalid!")).to_be_visible()

兩個案例一齊跑，全部綠，收工。

— — —

Trace 開咗佢，失敗都唔使騰雞

測試死咗唔知邊步出問題？開 Trace 就啱，每一步都有截圖同 DOM 快照，比起你自己打 print 方便好多。

bashpytest test_login.py -v --tracing=on

跑完在 test-results/ 目錄生成了 trace 檔案，用下面指令打開可視化介面：

bashplaywright show-trace test-results/test_login_py-test_login_success/trace.zip

會彈出一個操作時間線，每一步嘅截圖、網絡請求、控制枱日誌都有，排查失敗原因非常直觀。

— — —

進階：批量生成案例

逐個「傾」出案例太慢？轉個問法：

text針對這個登錄頁，幫我列出所有需要覆蓋的測試場景（先列清單，不用寫代碼）

AI 會俾你列出：正確密碼、錯誤密碼、錯誤用戶名、空用戶名、空密碼……確認之後再講：

text幫我把這些場景全部寫成 pytest 參數化用例
python@pytest.mark.parametrize("username, password, expected_text", [    ("student", "Password123", "Congratulations"),    ("student", "WrongPassword", "Your password is invalid!"),    ("wronguser", "Password123", "Your username is invalid!"),    ("", "Password123", "Your username is invalid!"),    ("student", "", "Your password is invalid!"),])def test_login_scenarios(page: Page, username, password, expected_text):    page.goto("https://practicetestautomation.com/practice-test-login/")    if username:        page.get_by_label("Username").fill(username)    if password:        page.get_by_label("Password").fill(password)    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text(expected_text)).to_be_visible()

五個場景，一個函數，一次過跑完。

— — —

遇到問題點算好

定位器揾唔到元素？ 同 Copilot 講「重新打開呢個頁面，話俾我知呢個按鈕嘅正確定位方式」，等佢重新分析一次，通常會俾到正確答案。

頁面需要登錄先至可以測試？ 先用 codegen 保存登錄狀態：

bashplaywright codegen --save-storage=auth.json https://your-app.com

登錄完之後熄咗瀏覽器，後續測試設定度加上：

python@pytest.fixture(scope="session")def browser_context_args(browser_context_args):    return {**browser_context_args, "storage_state": "auth.json"}

一次登錄，之後嘅案例重複用，唔使每次都重新行登錄流程。

MCP 連接唔到？Cmd+Shift+P（Windows 係 Ctrl+Shift+P），搜「MCP: Show Output」，睇伺服器日誌，錯誤訊息都喺曬入面。

— — —

最後講兩句

呢套方案嘅本質就係：AI 負責理解頁面、生成代碼，你負責審查邏輯、把控質素。

你唔再需要手動揾 CSS 選擇器，亦唔使記 XPath 點寫。揾元素呢啲重複勞動交出去，心力放喺「測啲乜」同「點樣設計測試策略」上面——呢啲先係測試工程師真正值錢嘅部分。

而家就可以動手：揾你哋系統嘅一個登錄頁，跟上面步驟行一次。打通環境可能要個幾鐘，但係跑通第一個 AI 生成嘅測試案例嘅一刻，真係好爽。（唔好問我點解知道）。

你有沒有經歷過這種崩潰時刻——

花了兩三天寫好一批 UI 自動化用例，跑得妥妥的，心裏還挺得意。然後前端突然過來說"我昨晚改了一下佈局"。你一跑，紅了一片。打開報錯，全是 ElementNotFound，CSS 選擇器挨個失效。

然後你就開始一個一個找元素，重新定位，重新調試，重新跑……

（我第一次遇到這個的時候，心態是真的崩了。）

這不是你技術不行，這是傳統 UI 自動化的老問題：定位器和頁面綁死了，頁面一變，用例就全掛。今天分享的這套方案，就是專門衝這個問題來的。

— — —

Playwright MCP 是什麼，先搞清楚

先別急着裝環境，把概念搞明白，不然後面會一頭霧水。

Playwright MCP 是一個 MCP 服務器（Model Context Protocol）。說白了，就是給 AI（比如 VS Code 裏的 Copilot）裝了一雙眼睛，讓它能"讀懂"你的網頁——但不是靠截圖，而是靠讀頁面的無障礙樹（Accessibility Tree）。

無障礙樹你可以這樣理解：瀏覽器會把頁面上每個元素"翻譯"成一份結構化的說明書：這個是按鈕、名字叫"登錄"，那個是輸入框、標籤是"用戶名"。AI 拿到這份說明書，就知道該怎麼操作。

所以它最終幫你生成的代碼長這樣：

pythonpage.get_by_role("button", name="登錄").click()page.get_by_label("用戶名").fill("test@example.com")

你看，沒有任何 CSS 路徑，沒有 XPath。它認的是"名字叫登錄的按鈕"，不認具體樣式。前端改了佈局、調了間距，只要按鈕還叫"登錄"，這行代碼就不會掛。

這就是它解決脆弱定位器問題的底層邏輯。

— — —

環境搭建，從零開始

前提條件確認

先確認本地有這幾樣東西：

  • Python 3.8+（終端跑 python --version 看一眼）
  • VS Code
  • VS Code 裏裝了 GitHub Copilot 擴展（需要訂閲）
  • Node.js 18+（node --version 確認，裝 MCP 用）

初始化 Playwright 項目

找個空文件夾，VS Code 打開，終端裏跑：

bash# 創建虛擬環境python -m venv .venv# 激活（macOS/Linux）source .venv/bin/activate# Windows 用這個.venv\Scripts\activate# 裝 Playwrightpip install playwright pytest-playwright# 下載 Chromium（第一次要等一會兒）playwright install chromium

裝完驗證一下：

bashplaywright --version

能輸出版本號就行。

安裝 Playwright MCP 服務器

bashnpm install -g @playwright/mcp@latest

在 VS Code 裏配 MCP

項目根目錄新建 .vscode/mcp.json，寫入：

json{  "servers": {    "playwright": {      "command": "npx",      "args": ["@playwright/mcp@latest"]    }  }}

保存，VS Code 右下角會彈出提示檢測到 MCP 配置，點啓用。

然後打開 Copilot Chat（側邊欄聊天圖標），下拉切換到 Agent 模式，工具列表裏能看到 playwright 相關工具，說明接通了。

— — —

實戰：寫一個登錄測試用例

環境好了，來幹真的。用一個經典的登錄場景完整走一遍。

讓 AI 幫你分析頁面

Copilot Chat 切到 Agent 模式，輸入：

text幫我用 playwright 打開 https://practicetestautomation.com/practice-test-login/分析頁面結構，寫一個 Python 測試用例：1. 輸入用戶名 student2. 輸入密碼 Password1233. 點擊登錄按鈕4. 斷言登錄成功（頁面出現"Congratulations"）

Copilot 會通過 MCP 自動打開這個頁面，讀無障礙樹，然後生成代碼：

pythonimport pytestfrom playwright.sync_api import Page, expectdef test_login_success(page: Page):    page.goto("https://practicetestautomation.com/practice-test-login/")    page.get_by_label("Username").fill("student")    page.get_by_label("Password").fill("Password123")    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text("Congratulations")).to_be_visible()

你不用手動去找任何元素，AI 直接給你精準的語義化定位器。

跑起來

把代碼保存為 test_login.py，然後：

bashpytest test_login.py -v

看到 PASSED 就對了。想看瀏覽器操作過程：

bashpytest test_login.py -v --headed

順手加個失敗場景

繼續跟 Copilot 說：

text再加一個用例：輸入錯誤密碼 WrongPassword，斷言頁面顯示錯誤提示

生成：

pythondef test_login_failed(page: Page):    page.goto("https://practicetestautomation.com/practice-test-login/")    page.get_by_label("Username").fill("student")    page.get_by_label("Password").fill("WrongPassword")    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text("Your password is invalid!")).to_be_visible()

兩個用例一起跑，全綠，收工。

— — —

Trace 開起來，失敗不抓瞎

測試掛了不知道哪步出問題？開 Trace 就對了，每一步都有截圖和 DOM 快照，比你自己打 print 方便多了。

bashpytest test_login.py -v --tracing=on

跑完在 test-results/ 目錄生成了 trace 文件，用下面命令打開可視化界面：

bashplaywright show-trace test-results/test_login_py-test_login_success/trace.zip

會彈出一個操作時間線，每一步的截圖、網絡請求、控制枱日誌都在，排查失敗原因非常直觀。

— — —

進階：批量生成用例

一個個"聊"出用例太慢？換個問法：

text針對這個登錄頁，幫我列出所有需要覆蓋的測試場景（先列清單，不用寫代碼）

AI 給你列出：正確密碼、錯誤密碼、錯誤用戶名、空用戶名、空密碼……確認後再說：

text幫我把這些場景全部寫成 pytest 參數化用例
python@pytest.mark.parametrize("username, password, expected_text", [    ("student", "Password123", "Congratulations"),    ("student", "WrongPassword", "Your password is invalid!"),    ("wronguser", "Password123", "Your username is invalid!"),    ("", "Password123", "Your username is invalid!"),    ("student", "", "Your password is invalid!"),])def test_login_scenarios(page: Page, username, password, expected_text):    page.goto("https://practicetestautomation.com/practice-test-login/")    if username:        page.get_by_label("Username").fill(username)    if password:        page.get_by_label("Password").fill(password)    page.get_by_role("button", name="Submit").click()    expect(page.get_by_text(expected_text)).to_be_visible()

五個場景，一個函數，一把跑完。

— — —

遇到問題怎麼辦

定位器找不到元素？ 跟 Copilot 說"重新打開這個頁面，告訴我這個按鈕的正確定位方式"，讓它重新分析一次，通常能給出正確答案。

頁面需要登錄後才能測試？ 先用 codegen 保存登錄狀態：

bashplaywright codegen --save-storage=auth.json https://your-app.com

登錄完關閉瀏覽器，後續測試配置里加上：

python@pytest.fixture(scope="session")def browser_context_args(browser_context_args):    return {**browser_context_args, "storage_state": "auth.json"}

一次登錄，後續用例複用，不用每次都重新走登錄流程。

MCP 連接不上？Cmd+Shift+P（Windows 是 Ctrl+Shift+P），搜"MCP: Show Output"，看服務器日誌，報錯信息都在裏面。

— — —

說在最後

這套方案的本質就是：AI 負責理解頁面、生成代碼，你負責審查邏輯、把控質量。

你不再需要手動扒 CSS 選擇器，也不用記 XPath 怎麼寫。找元素這種重複勞動交出去，精力放在"測什麼"和"怎麼設計測試策略"上——這才是測試工程師真正值錢的部分。

現在就可以動手：找你們系統的一個登錄頁，按上面步驟走一遍。拉通環境可能要一個多小時，但跑通第一個 AI 生成的測試用例的那一刻，真的挺爽的。（別問我怎麼知道的）。