Cline+Playwright-MCP学习记录

简介

本文档记录了配置和使用 Playwright-MCP (Model Context Protocol) 的过程，旨在让 AI 能够通过 Playwright 控制浏览器执行自动化任务。内容涵盖了 Playwright-MCP 的基本配置、解决 Windows 环境下 PowerShell 执行策略问题、安装 Playwright 依赖和 Chrome 浏览器，以及通过 AI 指令进行基本浏览器操作（导航、截图、点击）的演示，并最终展示了一个自动化爬取文章并保存为 PDF 的完整流程。

配置playwright-mcp

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"
      ],
      "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"
      ]
    }
  }
}

填写playwright-mcp的配置文件。

让ai介绍playwright-mcp的使用。

提示需要先安装playwright的测试依赖在安装chrome。

npm脚本被禁止执行，运行失败。并且Cline无法读取到命令行的输出结果。

安装新版PowerShell

为了解决npm脚本被禁止执行和Cline无法读取到命令行的问题，我们需要安装PowerShell的7.0以上版本。

按下 Win + R，输入 pwsh（PowerShell 7+ 的专用命令），检查自己PowerShell的版本是不是7.0以上。

找不到文件，说明目前版本的确在7.0以下。

接下来需要升级PowerShell。用搜索功能搜索PowerShell，并点击Windows PowerShell。

运行winget search Microsoft.PowerShell命令，选择Y同意协议，搜索到最新版本的 PowerShell。

执行winget install --id Microsoft.PowerShell --source winget命令，系统从GitHub下载安装包。

等待一段时间后，安装完成。

重新按下 Win + R，输入 pwsh，显示了PowerShell 7.5.0的版本信息。

手动配置Shell集成。用 pwsh方式打开PowerShell，输入以下命令： New-Item -Path $PROFILE -ItemType File -Force

可以看到在上述目录创建出了PowerShell 配置文件，即后缀.psl的文件。

用VS Code打开这个文件，写入集成代码，保存并关闭：

shell 复制代码

if ($env:TERM_PROGRAM -eq "vscode") {
  . "$(code --locate-shell-integration-path pwsh)"
}

以管理员方式打开PowerShell。

输入Get-ExecutionPolicy命令查看当前的执行策略。如果是显示Restricted，则用Set-ExecutionPolicy RemoteSigned -Scope CurrentUser命令去修改执行策略（避免脚本被阻止）。这里显示RemoteSigned，所以不需要修改。

查找新版PowerShell安装位置。

按Ctrl + Shift + P，输入并选择Preferences: Open User Settings (JSON)，打开用户设置文件。

搜索terminal.integrated，增加"PowerShell 7"的终端配置信息。

json 复制代码

"PowerShell 7": {
      "path": "C:\\Program Files\\PowerShell\\7\\pwsh.exe",
      "args": []
    },

在"terminal.integrated.defaultProfile.windows"中将默认终端改为新增的"PowerShell 7"。最后关掉这个文件，重启软件。

重启后，新建终端。在终端中输入$PSVersionTable.PSVersion，终端中显示了版本信息，表明PowerShell7配置成功。

安装playwright和chrome

ai提示要安装playwright测试依赖和安装chrome浏览器。

执行了npm install @playwright/test命令，安装playwright测试依赖。

安装chrome浏览器。

安装失败。

执行npx playwright install --force chrome命令，安装chrome浏览器。

成功安装。ai请求调用browser_navigate命令，导航到example.com。

导航成功。

ai调用browser_snapshot命令，截取页面快照。

ai调用了browser_click命令，用于点击链接。

收到响应信息。

可以看到chrome浏览器在playwright操作下导航到了新的页面。

这里ai进行了总结。

我们问一下ai这个playwright-mcp有哪些功能。

这里ai强调了操作时需要先使用browser_snapshot获取页面快照，然后根据快照中的元素描述和引用来执行操作。

视频演示

演示视频链接

arduino 复制代码

当前已配置了playwright-mcp和安装了chrome。
要求：
1.在浏览器中打开稀土掘金网站，获取页面的快照。
2.在搜索栏输入Miku16，查询该用户。
3.获取该查询页面的快照。
4.在查询页面选择"用户"按钮"进行筛选。
5.再次获取该查询页面的快照，识别名为Miku16的用户。
6.点击打开该用户的主页，获取页面快照。
7.在该用户主页点击"文章"按钮进行筛选。
8.再次获取该主页快照，打开该用户最新的一篇文章，获取该文章页面的快照。
9.将该文章页面在路径"A:\study\学习笔记"进行保存。

视频中将上述命令发给AI，并且设置Auto-approve开启了自动执行，从而实现AI调用playwright的工具对chrome进行自动化操作。

总结

本次学习记录详细展示了在 Windows 环境下配置和使用 Playwright-MCP 的完整流程。关键步骤包括：

配置 Playwright-MCP 服务器: 在 cline_mcp_settings.json 中正确设置启动命令和参数，并配置 autoApprove 以简化操作。
解决环境问题: 升级 PowerShell 至 7.0 以上版本并配置执行策略（RemoteSigned）是解决 npx 脚本执行问题的关键。同时，需要在终端中正确配置 PowerShell 7 为默认终端。
安装依赖: 使用 npm install @playwright/test 安装 Playwright 测试依赖，并使用 npx playwright install --force chrome 安装所需的浏览器。
基本交互流程: AI 控制浏览器的核心流程是先使用 browser_snapshot 获取当前页面状态和可交互元素信息，然后根据快照信息调用 browser_navigate, browser_click, browser_type 等命令执行具体操作。
自动化演示: 通过一个具体的示例（搜索掘金用户、打开文章并保存为 PDF），展示了 AI 结合 Playwright-MCP 实现复杂浏览器自动化任务的能力。

总而言之，Playwright-MCP 为 AI 提供了一个强大的接口来与 Web 环境交互，通过结合 AI 的理解和指令能力与 Playwright 的自动化能力，可以实现各种复杂的 Web 操作自动化。