从手动挡到自动驾驶:Playwright MCP数据采集范式
- 2026-05-08 13:58:55
做采集的同学最痛苦的的一件事就是分析页面的DOM结构、编写选择器进行数据采集或解析，MCP（Model Context Protocol）的出现可能会让你的工作方式变个样。下面拿Playwright MCP当例子，带你快速理解概念到实战。
一、MCP是啥？
以前用大模型，它再牛也只能动嘴，碰不到真实的网页数据。MCP是由Anthropic提出的一套标准化协议。说白了就是给大模型装了个通用接口，只要开发者按照MCP标准编写工具Server，大模型Client就能像插上U盘一样，让它拥有操作浏览器、读写数据库、调用本地API的能力。
Playwright MCP则是这一协议下应用。它将 Playwright强大的浏览器自动化能力封装成了 AI可调用的技能包。这意味着AI不再只是帮你写爬虫代码，而是直接接管你的浏览器，像真人一样去点击、滚动和抓取。
二、环境搭建
要跑通Playwright MCP，需要三样东西：Node.js环境，LLM客户端（比如目前热门的Claude Desktop或Codex）以及Playwright MCP Server。
Node.js版本18以上Claude Code CLI安装
claude mcp add playwright npx @playwright/mcp@latestCodex CLI安装
codex mcp add playwright npx "@playwright/mcp@latest"三、能做什么
动态导航：传统爬虫按预设的URL进行爬取，现在AI你告诉它去看看这家公司的招聘页，它可以根据上下文理解接下来该去哪。它会先在首页寻找包含“加入我们”或者“招聘”字样的链接点进去。
智能定位：以前写Xpath或者Css选择器，缺点是遇到页面改版就失效。现在AI可以通过语义来理解元素结构，改版了可以自主定位使得程序更加健壮。
连续操作与会话管理：AI可以像真人一样做一连串动作，它能调用mouse_click、keyboard_type、hover等这些底层接口，并且会保持会话状态。
JS注入与数据清洗：AI可以根据当前页面的数据结构，实时生成一段JS代码注入到控制台执行。提取HTML片段后，会利用自身的模型能力直接完成数据清洗，不用再手动写清洗逻辑。
详细的接口和功能可以参考官方文档:https://github.com/microsoft/playwright-mcp
四、从代码到指令的跨越
场景案例：采集某电商网站
传统的编码方式：
import asynciofrom playwright.async_api import async_playwrightasyncdefrun():asyncwith async_playwright() as p: browser = await p.chromium.launch(headless=False) page = await browser.new_page()await page.goto('https://example.com')# 必须手动指定复杂的 CSS 或 XPath 选择器await page.fill('#search-input', '降噪耳机')await page.click('.search-button')# 必须手动处理等待逻辑，否则容易报错await page.wait_for_selector('.product-item')# 手动编写JS脚本注入页面来提取 DOM items = await page.query_selector_all('.product-item') products = []for item in items: name = await (await item.query_selector('.title')).inner_text() price = await (await item.query_selector('.price')).inner_text() products.append({"name": name, "price": price}) print(products)await browser.close()asyncio.run(run())MCP模式：
你不再需要写上述代码，只需在对话框中输入一段自然语言： 用户指令：帮我打开某网站，搜索降噪耳机。提取前两页所有商品的名称和价格，整理成一个表格。之后AI会根据你的指令自动在后台按顺序调用各种API。
上边以Playwright MCP为例介绍了新的开发模式，优点是容错性更强、处理逻辑更模糊、开发效率更高。
