Playwright MCP玩转浏览器自动化

老克聊AI2025-11-18 15:47

大家好，分享知识，乘风而行，我是老克。今天为大家分享一款MCP应用，Playwright MCP。通过这个MCP，你可以让Claude直接控制浏览器，自动完成网页操作、数据抓取、表单填写等任务。接下来，我将手把手教你如何安装配置，并通过两个实战案例展示它的强大功能。

Playwright MCP下载安装

环境准备

windows 11操作系统需要安装nodejs，我已经安装了版本是22.21.1。

安装Playwright

复制代码 
npm install -g playwright

通过Playwright 安装浏览器

复制代码 
playwright install chromium

安装Playwright MCP

Playwright MCP的在github中的项目地址 github.com/executeauto... 通过smithery安装Playwright MCP

sql 复制代码 
npx -y @smithery/cli@latest install @executeautomation/playwright-mcp-server --client claude --key d46d0ada-0f5c-4392-b731-3304a101d362

安装完成后打开Claude Desktop客户端，在Settings→Developer中可以看到已经安装的Playwright MCP。

注意：由于playwright-mcp-server中的对playwright的浏览器位置使用的是硬编码，playwright的浏览器必须使用chromium-1179------这一点可以改进一下，安装完成Playwright MCP，需要对Playwright中浏览器文件夹进行修改，找到安装目录：C:\Users\DELL\AppData\Local\ms-playwright\，浏览器文件夹修改为chromium-1179

实战一：百度热搜抓取

演示目标，使用 Playwright MCP 访问百度，获取当天的热门搜索信息。

1. 发送指令给 Claude：

请帮我使用浏览器访问百度（www.baidu.com）， 找到今天的热搜榜单，并整理成列表返回给我。

Playwright打开浏览器，访问了百度浏览器。

可以看到获取数据和原页面中的内容一致，能够很好的完成数据采集工作。

实战演示二：复杂表单填报

准备工作：创建测试表单

我在本地创建了一个vite的vue项目，将index.html替换为表单

xml 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>员工信息登记表</title>
    <style>
        body { font-family: Arial; max-width: 600px; margin: 50px auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h2>员工信息登记表</h2>
    <form id="employeeForm">
        <div class="form-group">
            <label>姓名 *</label>
            <input type="text" name="name" required>
        </div>

        <div class="form-group">
            <label>性别 *</label>
            <select name="gender" required>
                <option value="">请选择</option>
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </div>

        <div class="form-group">
            <label>出生日期 *</label>
            <input type="date" name="birthday" required>
        </div>

        <div class="form-group">
            <label>联系电话 *</label>
            <input type="tel" name="phone" required>
        </div>

        <div class="form-group">
            <label>电子邮箱 *</label>
            <input type="email" name="email" required>
        </div>

        <div class="form-group">
            <label>部门 *</label>
            <select name="department" required>
                <option value="">请选择部门</option>
                <option value="tech">技术部</option>
                <option value="sales">销售部</option>
                <option value="hr">人力资源部</option>
                <option value="finance">财务部</option>
            </select>
        </div>

        <div class="form-group">
            <label>职位 *</label>
            <input type="text" name="position" required>
        </div>

        <div class="form-group">
            <label>入职日期 *</label>
            <input type="date" name="hireDate" required>
        </div>

        <div class="form-group">
            <label>教育程度 *</label>
            <select name="education" required>
                <option value="">请选择</option>
                <option value="bachelor">本科</option>
                <option value="master">硕士</option>
                <option value="phd">博士</option>
                <option value="other">其他</option>
            </select>
        </div>

        <div class="form-group">
            <label>技能特长</label>
            <textarea name="skills" rows="4" placeholder="请描述您的专业技能和特长"></textarea>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="agreement" required>
                我已阅读并同意公司相关规定
            </label>
        </div>

        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('employeeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('表单提交成功！');
        });
    </script>
</body>
</html>

启动项目，通过http://localhost:5173/访问表单

演示操作

1.打开表单

告诉claude 打开浏览器，访问http://localhost:5173/

2.填写表单内容

告诉claude，填写表单内容，命令如下：

diff 复制代码 
请帮我填写这个员工登记表单（file:///path/to/complex-form.html），
使用以下信息：
- 姓名：张小明
- 性别：男
- 出生日期：1990-05-15
- 联系电话：13800138000
- 电子邮箱：zhangxiaoming@example.com
- 部门：技术部
- 职位：高级工程师
- 入职日期：2024-01-15
- 教育程度：硕士
- 技能特长：精通Python、JavaScript，5年全栈开发经验

然后勾选同意条款，并提交表单。

大家好，分享知识，乘风而行，我是老克。今天为大家分享一款MCP应用，Playwright MCP。通过这个MCP，你可以让Claude直接控制浏览器，自动完成网页操作、数据抓取、表单填写等任务。接下来，我将手把手教你如何安装配置，并通过两个实战案例展示它的强大功能。

Playwright MCP下载安装

环境准备

windows 11操作系统需要安装nodejs，我已经安装了版本是22.21.1。

安装Playwright

复制代码 
npm install -g playwright

通过Playwright 安装浏览器

复制代码 
playwright install chromium

安装Playwright MCP

Playwright MCP的在github中的项目地址 github.com/executeauto... 通过smithery安装Playwright MCP

sql 复制代码 
npx -y @smithery/cli@latest install @executeautomation/playwright-mcp-server --client claude --key d46d0ada-0f5c-4392-b731-3304a101d362

安装完成后打开Claude Desktop客户端，在Settings→Developer中可以看到已经安装的Playwright MCP。

注意：由于playwright-mcp-server中的对playwright的浏览器位置使用的是硬编码，playwright的浏览器必须使用chromium-1179------这一点可以改进一下，安装完成Playwright MCP，需要对Playwright中浏览器文件夹进行修改，找到安装目录：C:\Users\DELL\AppData\Local\ms-playwright\，浏览器文件夹修改为chromium-1179

实战一：百度热搜抓取

演示目标，使用 Playwright MCP 访问百度，获取当天的热门搜索信息。

1. 发送指令给 Claude：

请帮我使用浏览器访问百度（www.baidu.com）， 找到今天的热搜榜单，并整理成列表返回给我。

Playwright打开浏览器，访问了百度浏览器。

可以看到获取数据和原页面中的内容一致，能够很好的完成数据采集工作。

实战演示二：复杂表单填报

准备工作：创建测试表单

我在本地创建了一个vite的vue项目，将index.html替换为表单

xml 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>员工信息登记表</title>
    <style>
        body { font-family: Arial; max-width: 600px; margin: 50px auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <h2>员工信息登记表</h2>
    <form id="employeeForm">
        <div class="form-group">
            <label>姓名 *</label>
            <input type="text" name="name" required>
        </div>

        <div class="form-group">
            <label>性别 *</label>
            <select name="gender" required>
                <option value="">请选择</option>
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </div>

        <div class="form-group">
            <label>出生日期 *</label>
            <input type="date" name="birthday" required>
        </div>

        <div class="form-group">
            <label>联系电话 *</label>
            <input type="tel" name="phone" required>
        </div>

        <div class="form-group">
            <label>电子邮箱 *</label>
            <input type="email" name="email" required>
        </div>

        <div class="form-group">
            <label>部门 *</label>
            <select name="department" required>
                <option value="">请选择部门</option>
                <option value="tech">技术部</option>
                <option value="sales">销售部</option>
                <option value="hr">人力资源部</option>
                <option value="finance">财务部</option>
            </select>
        </div>

        <div class="form-group">
            <label>职位 *</label>
            <input type="text" name="position" required>
        </div>

        <div class="form-group">
            <label>入职日期 *</label>
            <input type="date" name="hireDate" required>
        </div>

        <div class="form-group">
            <label>教育程度 *</label>
            <select name="education" required>
                <option value="">请选择</option>
                <option value="bachelor">本科</option>
                <option value="master">硕士</option>
                <option value="phd">博士</option>
                <option value="other">其他</option>
            </select>
        </div>

        <div class="form-group">
            <label>技能特长</label>
            <textarea name="skills" rows="4" placeholder="请描述您的专业技能和特长"></textarea>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="agreement" required>
                我已阅读并同意公司相关规定
            </label>
        </div>

        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('employeeForm').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('表单提交成功！');
        });
    </script>
</body>
</html>

启动项目，通过http://localhost:5173/访问表单

演示操作

1.打开表单

告诉claude 打开浏览器，访问http://localhost:5173/

2.填写表单内容

告诉claude，填写表单内容，命令如下：

diff 复制代码 
请帮我填写这个员工登记表单（file:///path/to/complex-form.html），
使用以下信息：
- 姓名：张小明
- 性别：男
- 出生日期：1990-05-15
- 联系电话：13800138000
- 电子邮箱：zhangxiaoming@example.com
- 部门：技术部
- 职位：高级工程师
- 入职日期：2024-01-15
- 教育程度：硕士
- 技能特长：精通Python、JavaScript，5年全栈开发经验

然后勾选同意条款，并提交表单。

Claude按照指令一步步的将表单内容填写完善，填写结果完全符合预期，非常好！

总结

Playwright MCP让普通人在无需编程，只用自然语言描述就可以的情况下就可以通过浏览器完成信息采集和填报的自动化工作。应用场景有，信息采集和监控、自动化表单填报、网站功能测试、数据批量处理、定时任务执行。

如果这个视频对你有帮助，请给我一个免费的赞,关注我的账号！有任何问题欢迎在评论区留言，我会及时回复。

相关推荐
loong_XL4 小时前
MCP实现Agentic RAG server案例
知识库·mcp
CS创新实验室1 天前
练习项目：基于 LangGraph 和 MCP 服务器的本地语音助手
运维·服务器·ai·aigc·tts·mcp
赵康1 天前
使用 LLM + Atlassian MCP 1小时生成年终总结
ai·llm·mcp
Miku162 天前
LangGraph+BrightData+PaperSearch的研究助理
爬虫·langchain·mcp
却尘4 天前
🚀 MCP基础完全上手指南：让Claude像开挂一样调用外部工具
aigc·ai编程·mcp
CodeLiving4 天前
MCP学习三——MCP相关概念
人工智能·mcp
_大学牲5 天前
从年初DeepSeek的爆火🔥 - 到年底Trae solo 的上线⚙️ :2025 AI 大年,一个普通人的认知指南 ! 🧭
deepseek·mcp·trae
only-code6 天前
MCP驱动的Rgentic RRG（向量数据库+网络搜索）
数据库·python·大模型·函数调用·mcp
only-code6 天前
100% 本地 MCP 客户端 + SQLite 服务器（LlamaIndex + Ollama + Qwen2.5）
python·mcp
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Valdi：Snapchat 开源的新一代跨平台 UI 框架07Labelme从安装到标注：零基础完整指南08Visual Studio Code设置个性化背景教程092025 最新教程：注册并切换到美区 Apple ID10jdk21下载、安装（Windows、Linux、macOS）