在進行自動化測試時，前端頁面因為頻繁迭代UI 結構常有變動，這往往使得自動化測試的腳本往往“寫得快、廢得也快”，維護成本極高。
在大模型之前大家往往都會使用錄制類工具，但錄制類工具生成的代碼靈活性較差、定位方式不太合理只能， 頁面輕微改動就可能導致腳本完全失效。
然后AI大模型出現后, 測試工程師開始嘗試借助大模型（如 ChatGPT）生成測試代碼，但因為大模型無法實時獲取網頁的 DOM 結構和內容，整個開發過程也是相當麻煩，我們需要不斷地將頁面內容復制給大模型。
這正是?Playwright MCP?想要解決的問題。
Playwright MCP通過MCP協議，大模型不再對網頁內容進行亂想瞎猜，而是真實感知DOM和頁面結構后再發出操作指令。
因此，測試人員只需用自然語言描述測試需求，就能由模型完成整個測試流程——從打開頁面、執行交互、采集結果，到生成可運行的測試代碼，極大降低了測試腳本的開發門檻和維護成本。
即便頁面結構發生變化，也可以快速地完成測試腳本的開發甚至拋棄測試腳本直接使用Prompt就可以完成穩定的測試，從而真正實現了更智能、更高效、更穩定的自動化測試體驗。
什么是Playwright MCP
Playwright MCP是一個主要依賴于瀏覽器的可訪問樹的web自動化測試能力的MCP Server。
它允許使用LLM大模型使用結構化命令控制網頁瀏覽器，從而可以快速且更準確的操作瀏覽器，非常適合網頁導航、表單填寫、數據提取和自動化測試等任務。
Playwright MCP 的主要優勢：
快速響應：基于結構化命令，交互更輕量
高確定性：避免自然語言歧義，執行結果更可靠
易于集成：適用于 Copilot、Cursor?等 AI 編程工具
便于調試：多客戶端可共享一個瀏覽器上下文
什么是MCP
MCP（Model Context Protocol） 是一種為大語言模型（LLM）設計的協議，MCP充當 LLM 與實際應用之間的橋梁或“翻譯器”，將自然語言轉化為結構化指令，使得模型可以更精確、高效地控制外部行為。
通過 MCP，大語言模型可以像調用 API 一樣發出導航、點擊、輸入等指令，并接收結構化反饋，極大增強了模型的上下文理解與操作能力。
MCP使用傳統的客服端-服務端架構模式
MCP客戶端
可以理解成一個“中間人”，它會把我們發出的自然語言指令通過大模型轉換成標準的 MCP 指令，再和 MCP 服務器建立連接，發送請求、接收響應。
MCP服務器
MCP 服務器可以理解為一個 “調度大腦 + 工具集合”，里面封裝了很多功能和服務，比如訪問文件、操作文件、和網頁進行交互等等。
當MCP客戶端發來請求時，服務器就從工具箱里找出合適的工具，完成對應的任務。
常用MCP客戶端簡介
GitHub Copilot + VS Code
GitHub Copilot的Agent模式可以使用MCP的Tools，優點是結合代碼環境方便測試與生成自動化邏輯，支持多種插件擴展，使用體驗非常流暢便。
缺點是 MCP 工具的集成和識別較不穩定，有時需要重啟 VS Code或者電腦才能正確加載 MCP工具。然后當然你還需要額外付出10美金一個月。
Claude Desktop（Antropic）
Claude Desktop 是由 Anthropic 官方推出的桌面客戶端，Claude Desktop 在MCP工具調用方面的體驗非常出色，響應迅速、調用穩定。
優點：
- 原生支持 MCP 工具，配置簡單；
Claude 模型推理能力強，適合進行多輪復雜對話和自動化流程。
缺點：
國內用戶注冊需使用海外手機號驗證；
免費賬號有 Token 限制，內容稍長容易觸發配額限制。
Cherry Studio
Cherry Studio 是由國內開發者打造的一款輕量型桌面客戶端，支持接入多個主流廠商的大模型（如 OpenAI、Anthropic、Moonshot 等），但需用戶自行配置對應的API Key。
缺點是部分模型集成體驗不佳，尤其是在調用Playwright MCP等需要具備連貫推理能力的工具時，可能出現模型停頓、不繼續執行等問題，對流暢使用造成較大影響。
目前不推薦用于復雜自動化測試等場景。
Cursor IDE
Cursor 自然不用多介紹了，這是專為 AI 編程設計的 VS Code 分支版本，對于MCP的配置和支持同樣十分方便，但是在使用Playwright MCP時出現被判定為可疑行為被阻止的情況
環境準備
前置準備（Prerequisites）
Node.js
因為MCP其實就是nodejs程序，要運行MCP我們需要安裝Nodejs環境，
訪問 https://nodejs.org/en/download 下載并安裝推薦版本。
Playwright
安裝完 Node.js 后，可以使用以下命令安裝 Playwright 及其瀏覽器依賴：
-npm install -g playwright：全局安裝 Playwright，使其在所有項目中可用
-npx playwright install：安裝 Playwright 所需的 Chromium、Firefox 和?WebKit?瀏覽器。
可以到我的個人號：atstudy-js，看完整版內容
這里有10W+ 熱情踴躍的測試小伙伴們，一起交流行業熱點、測試技術各種干貨，一起共享面試經驗、跳槽求職各種好用的。 ? ? ? ?
多行業測試學習交流群，內含直播課+實戰+面試資料
AI測試、 車載測試、自動化測試、銀行、金融、游戲、AIGC.
安裝Playwright MCP
Playwright MCP 有兩個常用的實現版本，兩個MCP庫都可以使用：
- @playwright/mcp：
由Microsoft官方發布和維護，是最基礎、最標準的MCP客戶端實現
- @executeautomation/playwright
-mcp-server：
由社區開發者@executeautomation 構建，功能更加豐富，例如支持多頁簽、截圖、保存測試結果等擴展能力，適合進階使用者或自動化測試場景更復雜的項目。
安裝Playwright MCP
- npm install -g?
@playwright/mcp
- npm install -g?
@executeautomation/playwright-mcp-server
輸入以下命令驗證安裝成功
- npx @playwright/mcp --version
使用 Claude Desktop +?
Playwright MCP 自動生成測試代碼實戰
步驟一：
在 Claude Desktop 配置 Playwright MCP
1. 打開 Claude Desktop Settings → 切換至?Developer?→ 點擊 Edit Config，打開 claude-desktop-config.json 文件。
2. 添加以下配置來啟用 Playwright MCP：
{??"mcpServers": {? ??"playwright": {? ? ??"command":?"npx",? ? ??"args": ["-y",?"@executeautomation/playwright-mcp-server"]? ? }? }}
3. 保存文件并重啟 Claude Desktop，在聊天窗口中就可以看到Playwright MCP提供的Tools了
步驟二：
使用Prompt自動生成測試代碼
配置完成后，我們開始演示如何通過Playwright MCP去生成Playwright的測試代碼
示例 Prompt：
輸入了prompt后，接下來就可以直接發送命令
Please?explore?https://www.baidu.com and generate a playwright test that performs a search for `LangChain MCP Adapter`.Claude就會使用Playwright MCP工具執行以下操作：
- 打開默認瀏覽器，訪問百度
- 快照頁面結構，識別搜索框；
- 輸入關鍵詞LangChain MCP Adapter并點擊搜索；
- 驗證搜索結果 —— 檢查是否出現相關內容的搜索結果
- 關閉瀏覽器
- 基于執行記錄生成完整的 Playwright 測試代碼。
)
)
