在軟件開(kāi)發(fā)和自動(dòng)化測(cè)試領(lǐng)域，瀏覽器自動(dòng)化一直是一個(gè)熱門話題。微軟最近開(kāi)源了一個(gè)強(qiáng)大的瀏覽器自動(dòng)化工具——Playwright-MCP，它通過(guò)模型上下文協(xié)議（MCP）為L(zhǎng)LMs（大型語(yǔ)言模型）提供了與網(wǎng)頁(yè)交互的能力，無(wú)需依賴截圖或視覺(jué)調(diào)整模型。今天，我們就來(lái)深入了解一下這個(gè)工具，看看它是如何為開(kāi)發(fā)者帶來(lái)便利的。

Playwright-MCP簡(jiǎn)介

Playwright-MCP是一個(gè)基于Playwright的MCP服務(wù)器，它允許LLMs通過(guò)結(jié)構(gòu)化可訪問(wèn)性快照與網(wǎng)頁(yè)交互。這意味著，開(kāi)發(fā)者可以利用LLMs的強(qiáng)大功能來(lái)實(shí)現(xiàn)復(fù)雜的瀏覽器自動(dòng)化任務(wù)，而無(wú)需擔(dān)心視覺(jué)模型的復(fù)雜性和不確定性。

關(guān)鍵特性

• 快速輕量：使用Playwright的無(wú)障礙樹(shù)，而非基于像素的輸入，大大提高了性能和可靠性。
• LLM友好：完全基于結(jié)構(gòu)化數(shù)據(jù)運(yùn)行，無(wú)需視覺(jué)模型，使得LLMs能夠更高效地處理網(wǎng)頁(yè)內(nèi)容。
• 確定性工具應(yīng)用：避免了截圖方法常見(jiàn)的歧義，確保了自動(dòng)化任務(wù)的準(zhǔn)確性和一致性。

使用場(chǎng)景

Playwright-MCP適用于多種場(chǎng)景，包括但不限于：

• 網(wǎng)頁(yè)導(dǎo)航和表單填寫(xiě)：自動(dòng)完成網(wǎng)頁(yè)導(dǎo)航和表單填寫(xiě)任務(wù)，提高工作效率。
• 結(jié)構(gòu)化內(nèi)容的數(shù)據(jù)提取：從網(wǎng)頁(yè)中提取結(jié)構(gòu)化數(shù)據(jù)，用于數(shù)據(jù)分析或其他應(yīng)用。
• 由LLMs驅(qū)動(dòng)的自動(dòng)化測(cè)試：利用LLMs的強(qiáng)大功能，實(shí)現(xiàn)更智能的自動(dòng)化測(cè)試。
• 通用瀏覽器交互代理：作為一個(gè)通用的瀏覽器交互代理，支持多種瀏覽器操作。

示例配置

以下是一個(gè)基本的Playwright-MCP服務(wù)器配置示例：

安裝與使用

VS Code中的安裝

您可以通過(guò)以下方式在VS Code中安裝Playwright-MCP服務(wù)器：

• 使用VS Code中的安裝按鈕。
• 使用VS Code CLI安裝：
• code --add-mcp '{'name':'playwright','command':'npx','args':['@playwright/mcp@latest']}'
• 或者，對(duì)于VS Code Insiders：
• code-insiders --add-mcp '{'name':'playwright','command':'npx','args':['@playwright/mcp@latest']}'

安裝后，Playwright-MCP服務(wù)器將可用于與您的GitHub Copilot代理在VS Code中使用。

用戶數(shù)據(jù)目錄

Playwright-MCP將使用新配置文件啟動(dòng)Chrome瀏覽器，配置文件位于以下位置：

• Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
• macOS：~/Library/Caches/ms-playwright/mcp-chrome-profile
• Linux：~/.cache/ms-playwright/mcp-chrome-profile

所有登錄信息都將存儲(chǔ)在該配置文件中，您可以在會(huì)話之間刪除它以清除離線狀態(tài)。

無(wú)GUI瀏覽器（無(wú)頭瀏覽器）

對(duì)于后臺(tái)或批量操作，可以運(yùn)行無(wú)GUI的瀏覽器：

{  'mcpServers': {    'playwright': {      'command': 'npx',      'args': ['@playwright/mcp@latest', '--headless']    }  }}

在Linux上運(yùn)行無(wú)DISPLAY的瀏覽器

當(dāng)在無(wú)顯示器的系統(tǒng)上運(yùn)行帶頭的瀏覽器時(shí)，可以從具有DISPLAY的環(huán)境運(yùn)行MCP服務(wù)器，并通過(guò)傳遞--port標(biāo)志來(lái)啟用SSE傳輸：

然后在MCP客戶端配置中，將url設(shè)置為SSE端點(diǎn)：

{  'mcpServers': {    'playwright': {      'url': 'http://localhost:8931/sse'    }  }}

工具模式

Playwright-MCP提供兩種模式：

0. 快照模式（默認(rèn)）：使用無(wú)障礙快照以獲得更好的性能和可靠性。
1. 視覺(jué)模式：使用截圖進(jìn)行基于視覺(jué)的交互。

要使用視覺(jué)模式，在啟動(dòng)服務(wù)器時(shí)添加--vision標(biāo)志：

編程使用

您還可以通過(guò)編程方式使用Playwright-MCP：

import { createServer } from '@playwright/mcp';// ...const server = createServer({ launchOptions: { headless: true } });transport = new SSEServerTransport('/messages', res);server.connect(transport);

工具集

Playwright-MCP提供了一套豐富的瀏覽器自動(dòng)化工具，包括導(dǎo)航、點(diǎn)擊、懸停、拖放、輸入文本、選擇選項(xiàng)、上傳文件、按鍵操作、捕獲快照和截圖等。

Playwright-MCP的開(kāi)源為開(kāi)發(fā)者提供了一個(gè)強(qiáng)大的瀏覽器自動(dòng)化工具，它不僅輕量級(jí)、高性能，還與LLMs無(wú)縫集成，極大地簡(jiǎn)化了自動(dòng)化任務(wù)的實(shí)現(xiàn)。無(wú)論您是進(jìn)行自動(dòng)化測(cè)試、數(shù)據(jù)提取還是其他瀏覽器自動(dòng)化任務(wù)，Playwright-MCP都值得一試。立即訪問(wèn)Playwright-MCP的GitHub頁(yè)面，開(kāi)始探索這個(gè)強(qiáng)大的工具吧！您在使用Playwright-MCP時(shí)遇到了哪些挑戰(zhàn)？歡迎在評(píng)論區(qū)分享您的經(jīng)驗(yàn)和見(jiàn)解。