Windows环境下搭建Cline+Playwright+MCP，超详细

ljyfree

于 2025-04-23 22:44:30 发布

阅读量1k

点赞数 9

分类专栏： AI 文章标签： AI MCP

本文链接：https://blog.csdn.net/ljyfree/article/details/147462992

版权

AI 专栏收录该内容

1 篇文章

订阅专栏

基础知识

Cline

Cline 是一款基于 VS Code 的 AI 编程助手扩展，通过集成 MCP 协议，能够直接调用外部工具和数据源，提升开发效率。其核心特点包括：

多模型支持：兼容 OpenAI、Anthropic、DeepSeek 等大模型 API，用户可灵活选择模型
MCP 集成：通过配置 MCP 服务器（如浏览器自动化、数据库访问等），扩展 AI 助手的功能边界，例如自动执行网页抓取或文件操作
自然语言交互：用户可通过自然语言指令让 Cline 自动安装 MCP 服务器或生成代码

典型应用场景：开发者通过 Cline 调用 Playwright MCP 服务器实现自动化测试，或连接 GitHub 工具管理代码仓库

Playwright

Playwright 是微软开发的跨浏览器自动化测试工具，支持 Chromium、Firefox 和 WebKit，其优势在于：

现代化 API：提供简洁的同步/异步 API，支持自动等待、网络请求拦截等高级功能
与 MCP 结合：通过 Playwright MCP 服务器，用户可用自然语言驱动浏览器自动化（如录制测试流程），无需手动编写脚本
性能优势：相比 Selenium，启动更快且支持并行测试，适合复杂交互场景

示例：Cline 用户可通过 Playwright MCP 自动登录网站并抓取数据，无需直接操作代码

MCP（Model Context Protocol）

MCP 是由 Anthropic 提出的开放协议，旨在标准化 AI 模型与外部工具/数据的交互方式，核心特性包括：

模块化架构：采用客户端-服务器模型，支持本地（stdio）和远程（HTTP/SSE）通信
三类能力：
- Resources：访问文件或 API 数据（如天气查询）
- Tools：集成第三方服务（如浏览器控制、数据库操作）
- Prompts：预定义提示词模板
生态丰富：已有 GitHub、PostgreSQL、Playwright 等开源 MCP 服务器实现

应用场景：开发者通过 MCP 为 AI 模型扩展实时数据获取或工具调用能力，例如让 Claude 查询天气或操作文件系统

三者关联总结

技术	角色	与其余技术的关联
Cline	AI 编程助手	通过 MCP 调用 Playwright 等工具
Playwright	浏览器自动化工具	作为 MCP 服务器扩展 AI 的测试能力
MCP	协议标准	为 Cline 和 Playwright 提供集成框架

通过 MCP 协议，Cline 和 Playwright 等工具形成协作生态，使开发者能够以低代码方式构建智能工作流。

前期准备

python相关

首先下载安装python3，笔者安装的是python3.10
设置pip3使用清华源

C:\Users\Administrator# pip3.exe config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
Writing to C:\Users\Administrator\AppData\Roaming\pip\pip.ini
C:\Users\Administrator#

安装playwright

C:\Users\Administrator# pip3.exe install playwright

安装chrome,后面供调用

C:\Users\Administrator# playwright install --force chrome
Downloading Google Chrome
Installing Google Chrome
ProductVersion   FileVersion      FileName
--------------------------------------------------------------------------------
135.0.7049.96    135.0.7049.96    C:\Program Files\Google\Chrome\Application\chrome.exe
Downloading FFMPEG playwright build v1011 from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1011/ffmpeg-win64.zip
1.3 MiB [====================] 100% 0.0s
FFMPEG playwright build v1011 downloaded to C:\Users\Administrator\AppData\Local\ms-playwright\ffmpeg-1011
Downloading Winldd playwright build v1007 from https://cdn.playwright.dev/dbazure/download/playwright/builds/winldd/1007/winldd-win64.zip
0.1 MiB [====================] 100% 0.0s
Winldd playwright build v1007 downloaded to C:\Users\Administrator\AppData\Local\ms-playwright\winldd-1007
C:\Users\Administrator#

nodejs相关

要运行的mcp server是基于nodejs，所以要先安装nodejs
网上教程很多，笔者安装的版本是v22.14.0，记得将安装目录添加到环境变量中
设置nodejs使用淘宝源

C:\Users\Administrator# npm config set registry https://registry.npmmirror.com

可能需要更改执行策略

C:\Users\Administrator> Set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): Y
C:\Users\Administrator>

安装并运行playwright mcp，指定服务端口为8931,运行后不会返回

C:\Users\Administrator# npx @playwright/mcp@latest --port 8931
Need to install the following packages:
@playwright/mcp@0.0.15
Ok to proceed? (y) y
Listening on http://localhost:8931
Put this in your client config:
{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}