简介
本文档记录了在使用 Cline 和 Playwright-MCP 进行浏览器自动化时,如何配置和使用多种不同浏览器(如 Chrome, Edge, Firefox, WebKit)的过程。主要内容包括安装 Playwright 支持的各种浏览器、通过 Playwright 命令行工具 (npx playwright open
) 启动指定浏览器,并最终解决了如何在 Playwright-MCP 环境下(其 browser_navigate
等工具本身不带浏览器选择参数)指定运行浏览器的关键问题——通过修改 cline_mcp_settings.json
配置文件实现。
探索如何配置
mcp工具的browser_navigate只有一个url参数,无法指定浏览器。
使用browser_navigate将会使用默认的浏览器打开网页。
去playwright官方文档查看关于浏览器配置的说明。
PS A:\study\AI\MCP-Test> npx playwright install
Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-win64.zip
Error: read ECONNRESET
at TLSWrap.onStreamRead (node:internal/stream_base_commons:216:20) {
errno: -4077,
code: 'ECONNRESET',
syscall: 'read'
}
Downloading Chromium 134.0.6998.35 (playwright build v1161) from https://playwright.download.prss.microsoft.com/dbazure/download/playwright/builds/chromium/1161/chromium-win64.zip
141.8 MiB [====================] 100% 0.0s
Chromium 134.0.6998.35 (playwright build v1161) downloaded to C:\Users\IU\AppData\Local\ms-playwright\chromium-1161
Downloading Chromium Headless Shell 134.0.6998.35 (playwright build v1161) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1161/chromium-headless-shell-win64.zip
87.8 MiB [====================] 100% 0.0s
Chromium Headless Shell 134.0.6998.35 (playwright build v1161) downloaded to C:\Users\IU\AppData\Local\ms-playwright\chromium_headless_shell-1161
Downloading Firefox 135.0 (playwright build v1475) from https://cdn.playwright.dev/dbazure/download/playwright/builds/firefox/1475/firefox-win64.zip
91.5 MiB [====================] 100% 0.0s
Firefox 135.0 (playwright build v1475) downloaded to C:\Users\IU\AppData\Local\ms-playwright\firefox-1475
Downloading Webkit 18.4 (playwright build v2140) from https://cdn.playwright.dev/dbazure/download/playwright/builds/webkit/2140/webkit-win64.zip
52.8 MiB [====================] 100% 0.0s
Webkit 18.4 (playwright build v2140) downloaded to C:\Users\IU\AppData\Local\ms-playwright\webkit-2140
使用npx playwright install
命令安装默认的浏览器,可以看到我们安装了Chromium 134.0.6998.35、Chromium Headless Shell 134.0.6998.35、Firefox 135.0、Webkit 18.4。
PS A:\study\AI\MCP-Test> npx playwright install --force msedge
Downloading Microsoft Edge
Installing Microsoft Edge
ProductVersion FileVersion FileName
-------------- ----------- --------
135.0.3179.85 135.0.3179.85 C:\Program Files (x86)\Microsoft\Edge\...
使用上面的命令可以安装Edge浏览器。
PS A:\study\AI\MCP-Test> npx playwright help
Usage: npx playwright [options] [command]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
open [options] [url] open page in browser specified via -b, --browser
codegen [options] [url] open page and generate code for user actions
install [options] [browser...] ensure browsers necessary for this version of Playwright are installed
uninstall [options] Removes browsers used by this installation of Playwright from the system
(chromium, firefox, webkit, ffmpeg). This does not include branded channels.
install-deps [options] [browser...] install dependencies necessary to run browsers (will ask for sudo permissions)
cr [options] [url] open page in Chromium
ff [options] [url] open page in Firefox
wk [options] [url] open page in WebKit
screenshot [options] <url> <filename> capture a page screenshot
pdf [options] <url> <filename> save page as pdf
run-server [options]
show-trace [options] [trace...] show trace viewer
test [options] [test-filter...] run tests with Playwright Test
show-report [options] [report] show HTML report
merge-reports [options] [dir] merge multiple blob reports (for sharded tests) into a single report
clear-cache [options] clears build and test caches
help [command] display help for command
PS A:\study\AI\MCP-Test> npx playwright help open
Usage: npx playwright open [options] [url]
open page in browser specified via -b, --browser
Options:
-b, --browser <browserType> browser to use, one of cr, chromium, ff, firefox, wk, webkit (default: "chromium")
--block-service-workers block service workers
--channel <channel> Chromium distribution channel, "chrome", "chrome-beta", "msedge-dev", etc
--color-scheme <scheme> emulate preferred color scheme, "light" or "dark"
--device <deviceName> emulate device, for example "iPhone 11"
--geolocation <coordinates> specify geolocation coordinates, for example "37.819722,-122.478611"
--ignore-https-errors ignore https errors
--load-storage <filename> load context storage state from the file, previously saved with --save-storage
--lang <language> specify language / locale, for example "en-GB"
--proxy-server <proxy> specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"
--proxy-bypass <bypass> comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"
--save-har <filename> save HAR file with all network activity at the end
--save-har-glob <glob pattern> filter entries in the HAR by matching url against this glob pattern
--save-storage <filename> save context storage state at the end, for later use with --load-storage
--timezone <time zone> time zone to emulate, for example "Europe/Rome"
--timeout <timeout> timeout for Playwright actions in milliseconds, no timeout by default
--user-agent <ua string> specify user agent string
--viewport-size <size> specify browser viewport size in pixels, for example "1280, 720"
-h, --help display help for command
Examples:
$ open
$ open -b webkit https://example.com
运行npx playwright help
命令查看使用说明,发现open命令的–browser选项和指定浏览器有关,于是运行npx playwright help open
命令查看关于启动时指定浏览器的说明,发现可以通过–channel指定使用的浏览器版本。
PS A:\study\AI\MCP-Test> npx playwright open https://example.com
PS A:\study\AI\MCP-Test> npx playwright open --browser chromium https://example.com
默认使用chrome浏览器打开网页,指定chromium内核时也是默认用chrome浏览器。
PS A:\study\AI\MCP-Test> npx playwright open --browser chromium --channel msedge https://example.com
指定使用chromium内核的Edge浏览器打开网页。
PS A:\study\AI\MCP-Test> npx playwright open --browser firefox https://example.com
指定使用火狐浏览器打开网页。
PS A:\study\AI\MCP-Test> npx playwright open --browser webkit https://example.com
指定使用webkit浏览器打开网页。
由于mcp的browser_navigate函数无法指明使用的浏览器,调用该方法时仍然使用默认的chrome浏览器,没有解决问题。所以我们去playwright-mcp的github查找解决方法,得知可以在cline_mcp_settings.json配置文件中在args参数配置中指明使用的浏览器。
{
"mcpServers": {
"github.com/modelcontextprotocol/servers/tree/main/src/github": {
"command": "cmd",
"args": [
"/c",
"npx",
"-y",
"@modelcontextprotocol/server-github"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "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"
},
"disabled": false,
"autoApprove": []
},
"playwright": {
"command": "cmd",
"args": [
"/c",
"npx",
"@playwright/mcp@latest",
"--browser",
"msedge"
],
"autoApprove": [
"browser_navigate",
"browser_type",
"browser_click",
"browser_snapshot",
"browser_tab_select",
"browser_tab_list",
"browser_pdf_save",
"browser_press_key",
"browser_resize",
"browser_tab_close"
]
}
}
}
如图所示,使用–browser指明使用msedge。
演示视频
Cline+Playwright-mcp演示保存斋藤飞鸟图片
当前已配置了playwright-mcp和安装了所需的浏览器
1. 打开浏览器bing搜索页面,获取页面快照。
2. 搜索斋藤飞鸟,获取页面快照。
3. 找到斋藤飞鸟的图片,打开该图片链接,获取页面快照。
4. 将图片页面保存为pdf文件。
视频中将上述命令发给AI,并且设置Auto-approve开启了自动执行,从而实现AI调用playwright的工具对Edge浏览器进行自动化操作,搜索斋藤飞鸟老婆的图片并以pdf格式保存。
总结
通过本次探索,我们明确了在 Cline + Playwright-MCP 环境下使用不同浏览器的方法:
- 浏览器安装: 可以使用
npx playwright install
安装默认的 Chromium, Firefox, WebKit,或使用npx playwright install <browser_name>
(如msedge
) 安装特定浏览器。 - Playwright CLI 使用:
npx playwright open
命令可以通过-b
或--browser
参数指定浏览器类型(chromium
,firefox
,webkit
),并通过--channel
参数进一步指定具体的分发版本(如msedge
,chrome
)。 - Playwright-MCP 配置: 由于 Playwright-MCP 提供的
browser_*
工具没有直接指定浏览器的参数,关键在于修改 MCP 服务器的启动参数。在cline_mcp_settings.json
文件中,为playwright
服务器配置项的args
数组添加相应的命令行参数,例如"--browser", "firefox"
或"--browser", "chrome-dev", "--browser", "msedge"
,即可让 MCP 启动并控制指定的浏览器。
这种配置方法使得我们可以灵活地让 AI 控制不同的浏览器执行自动化任务,满足不同的测试或操作需求。