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

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

相关推荐
谷哥的小弟5 小时前
Brave Search MCP服务器安装以及客户端连接配置
搜索引擎·大模型·spring ai·mcp·brave search
太空眼睛5 小时前
【MCP】使用SpringBoot基于Streamable-HTTP构建MCP-Client
spring boot·ai·llm·sse·mcp·mcp-client·streamable
kaizq15 小时前
AI-MCP-SQLite-SSE本地服务及CherryStudio便捷应用
python·sqlite·llm·sse·mcp·cherry studio·fastmcp
太空眼睛18 小时前
【MCP】使用SpringBoot基于Streamable-HTTP构建MCP-Server
spring boot·sse·curl·mcp·mcp-server·spring-ai·streamable
康de哥1 天前
MCP Unity + Claude Code 配置关键步骤
unity·mcp·claude code
田井中律.1 天前
MCP协议
mcp
通义灵码2 天前
Qoder 支持通过 DeepLink 添加 MCP Server
人工智能·github·mcp
酩酊仙人3 天前
fastmcp构建mcp server和client
python·ai·mcp
kwg1263 天前
本地搭建 OPC UA MCP 服务
python·agent·mcp
小小工匠3 天前
LLM - 从通用对话到自治智能体：Agent / Skills / MCP / RAG 三层架构实战
agent·rag·skill·mcp
热门推荐
01GitHub 镜像站点02Labelme从安装到标注：零基础完整指南03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04Linux下V2Ray安装配置指南05Claude Code 2.1.2 升级报错？别折腾了，一行命令搞定06jdk21下载、安装（Windows、Linux、macOS）07【踩坑笔记】50系显卡适配的 PyTorch 安装082025-04-03 Latex学习1——本地配置Latex + VScode环境09KGG转MP3工具|非KGM文件|解密音频10Overleaf编译超时，超出免费计划编译时限（已解决）