Cline+Playwright-MCP配置浏览器

简介

本文档记录了在使用 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官方文档查看关于浏览器配置的说明。

powershell 复制代码

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。

powershell 复制代码

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浏览器。

powershell 复制代码

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指定使用的浏览器版本。

powershell 复制代码

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浏览器。

powershell 复制代码

PS A:\study\AI\MCP-Test> npx playwright open --browser chromium --channel msedge https://example.com

指定使用chromium内核的Edge浏览器打开网页。

powershell 复制代码

PS A:\study\AI\MCP-Test> npx playwright open --browser firefox  https://example.com

指定使用火狐浏览器打开网页。

powershell 复制代码

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参数配置中指明使用的浏览器。

json 复制代码

{
  "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演示保存斋藤飞鸟图片

markdown 复制代码

当前已配置了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 控制不同的浏览器执行自动化任务，满足不同的测试或操作需求。