AI导哈

Playwright MCP服务器配置

通过WSL配置Playwright MCP服务器，使用外部浏览器（Brave/Chrome），避免在Linux环境中重复安装浏览器，并与VS Code集成。

  • by DevJoaoLopes
  • 本地部署
  • 更新于
在 GitHub 查看 DevJoaoLopes/mcps-configs-wsl

使用说明

mcps配置wsl

使用外部浏览器（Brave/Chrome）通过 WSL 配置 MCP（Playwright）服务器的文档和示例。

目标

演示如何使用Windows上已安装的浏览器在WSL中启动Playwright模型上下文协议（MCP）服务器，避免在Linux环境中安装重复的浏览器，并保持与VS Code的集成。

JSON 配置（示例）

"playwright": {
  "command": "wsl",
  "args": [
    "bash",
    "-c",
    "source ~/.nvm/nvm.sh && npx @playwright/mcp@latest --executable-path '/mnt/c/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe' --extension"
  ],
  "type": "stdio",
  "env": {
    "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "<SEU_TOKEN_AQUI>"
  }
}

从不更改令牌的实际值 。

论点解释

  • 命令：wsl 确保在Node/NVM配置的Linux环境（WSL）中运行。
  • bash-c – 允许链接多个命令 （加载NVM和调用 npx在一个subshell。
  • 来源~/.nvm/nvm.sh 加载 NVM 函数和 PATH；没有它 npx 可能不可用。
  • npx@剧作家/mcp@latest 始终获取并运行最新版本的 MCP Playwright 服务器（考虑生产版本引脚： @playwright/mcp@0.2.x).
  • --可执行路径”。..勇敢的.exe – 在Windows上安装的浏览器路径， 通过WSL安装 /mnt/c避免在WSL内安装浏览器，并重新利用Brave（Chromium）。
  • --扩展 通过MCP扩展启用额外功能（例如：改进的通信，事件捕获）。需要环境令牌 。
  • 类型：stdio 直接 stdin/stdout 通道可简化与 VS Code 中的 MCP 客户端集成。
  • 剧作家_MCP_EXTENSION_TOKEN – 用于验证扩展会话的秘密；可变的安全环境储存。

良好做法

  1. 版本 PIN为了可重复性，替换 @latest 具体版本。
  2. 脚本包装器创建 ~/bin/playwright-mcp.sh:
    #!/usr/bin/env bash
source ~/.nvm/nvm.sh
npx @playwright/mcp@0.2.x --executable-path "/mnt/c/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe" --extension
    变成可执行文件 ： chmod +x ~/bin/playwright-mcp.sh.
  3. 安全令牌：开始前导出VS代码：
    export PLAYWRIGHT_MCP_EXTENSION_TOKEN="<seu-token>"
    如果客户端支持， 从配置文件中删除值 。
  4. Node 版本：加兰蒂尔 nvm use <versão> 启动 shell 以保持一致性。
  5. 后备浏览器如果您想使用 Playwright 打包的浏览器，请安装 Linux 依赖项并跳过 --executable-path.

故障排除

问题 共同原因 解决方案
"chrome" executable not found 路径不正确或未提供 检查 Windows 路径，使用引号和 /mnt/c/ 正确
npx: command not found NVM 未加载 确认 source ~/.nvm/nvm.sh 或添加到 .bashrc
浏览器无法打开 没有显示器访问权限 （WSL2） 通常无头Chromium工作；对于 GUI，请使用无头模式或 X 服务器。
启动时超时 浏览器运行缓慢 添加 --log-level debug （如果支持）进行分析。

安全

  • 永远不要在公共提交中暴露令牌。
  • 如果怀疑泄漏，请撤销并重新生成令牌。
  • 考虑 .env 在VS代码之前加载以避免暴露于 mcp.json.

极简主义示例（ 无包装）

wsl bash -c "source ~/.nvm/nvm.sh && npx @playwright/mcp@0.2.x --executable-path '/mnt/c/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe' --extension"

下一步

  • 为其他 MCP 服务器添加示例。
  • 使用 Chrome Canary 或 Edge 包含变体。
  • 创建自动版本引脚脚本 。

欢迎捐款！打开问题或PRs.

相关 MCP