您的位置: 首页> AI模型

Playwright MCP玩转浏览器自动化

匿名上传

发布时间:2025-11-19 13:00:03

大家好，分享知识，乘风而行，我是老克。今天为大家分享一款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

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:UsersDELLAppDataLocalms-playwright，浏览器文件夹修改为chromium-1179

实战一：百度热搜抓取

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

1. 发送指令给 Claude：

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

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

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

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

准备工作：创建测试表单

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

<!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，填写表单内容，命令如下：

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

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