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

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

相关推荐
渣渣苏12 小时前
MCP实战指南
mcp
爬点儿啥1 天前
[Ai Agent] 10 MCP基础：快速编写你自己的MCP服务器（Server）
人工智能·ai·langchain·agent·transport·mcp
小鱼儿亮亮1 天前
Agents SDK+MCP智能体开发
agent·mcp
KotlinKUG贵州2 天前
Kotlin/Ktor 实践：利用 MCP 从零打造 AI Agent 服务端指南
kotlin·agent·mcp
天天扭码2 天前
深入MCP本质——编写自定义MCP Server并通过Cursor调用
前端·mcp
天天扭码2 天前
解放双手！使用Cursor+Figma MCP 高效还原响应式设计稿
前端·mcp
小小工匠2 天前
LLM - MCP Powered Agent_从工具失配到架构重构的实战指南
agent·mcp·千具之痛
Thomas_Cai2 天前
MCP服务创建指南
人工智能·大模型·agent·智能体·mcp
栗子叶2 天前
Spring AI MCP Server接入百炼问题排查
spring ai·mcp·百炼·获取工具异常
刘立军2 天前
程序员应该熟悉的概念(4)MCP能做什么
人工智能·mcp
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05Open-AutoGLM Windows 安装部署教程06Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10BongoCat - 跨平台键盘猫动画工具