基于MCP协议与DrissionPage实现AI智能体网页自动化操作

📅 2026/7/1 7:04:13
基于MCP协议与DrissionPage实现AI智能体网页自动化操作
1. 项目概述当AI助手学会“上网冲浪”最近在折腾AI应用开发的朋友可能都遇到过类似的瓶颈你给AI助手一个任务比如“帮我查一下今天北京的天气”或者“去XX电商网站看看某款商品的最新价格和评价”。AI助手可以理解你的意图也能生成一段看似合理的回答但它就是没法真的“动手”去打开一个浏览器访问那个网站把信息给你抓回来。它被困在了“纯文本”的世界里空有一身“理解”的本领却缺乏与现实世界交互的“手脚”。这就是DrissionPage-MCP-Server这个项目要解决的核心问题。简单来说它是一座桥一座连接大语言模型LLM驱动的AI助手与真实网页世界的桥。通过它你可以赋予你的AI助手比如基于 Claude、GPTs 或本地部署的 Llama 等模型构建的Agent真正的浏览器自动化能力。想象一下你的AI助手不再只是“纸上谈兵”而是能像真人一样打开浏览器点击按钮填写表单滚动页面提取数据——这才是真正意义上的智能体Agent该有的样子。这个项目的名字拆解一下就很清晰了DrissionPage一个基于 Python 的、融合了浏览器自动化和网络数据包操作的双核驱动库。它比单纯的 Selenium 更灵活比纯粹的 requests 更强大尤其擅长处理动态页面和复杂交互。MCPModel Context Protocol的缩写这是 AnthropicClaude 的创造者提出的一套开放协议。你可以把它理解为AI助手和外部工具/数据源之间的“通用插座”标准。AI助手模型通过MCP协议可以安全、标准化地调用服务器Server提供的各种能力比如读取文件、查询数据库或者——像本项目一样——操作浏览器。Server一个遵循MCP协议实现的服务端。它封装了 DrissionPage 的核心功能将其暴露为一套标准的、AI助手可以理解和调用的“工具”。所以DrissionPage-MCP-Server的本质就是一个实现了MCP协议的服务器程序。它启动后你的AI助手需要支持MCP客户端如 Claude Desktop、Cursor 或自建的Agent框架就能“发现”它并看到它提供的工具列表比如open_browser,goto,click,get_element_text等。然后AI助手就可以在与你对话的过程中根据你的指令自主决定调用哪个工具并传入相应的参数如URL、CSS选择器最终完成网页操作任务。这解决了什么痛点对于开发者而言你不再需要为每一个网页自动化任务编写复杂的、脆硬的脚本。你只需要用自然语言告诉你的AI助手“帮我去GitHub trending页面把今天排名前5的Python仓库的名字和star数整理成表格。” AI助手会自己规划步骤调用open_browser打开浏览器调用goto访问GitHub调用一系列get_element和extract_text工具定位并提取数据最后调用format_as_table或其他你定义的工具将结果整理好呈现给你。整个过程是动态的、可对话调整的自动化脚本的编写从“编码”变成了“对话”。2. 核心架构与MCP协议深度解析要理解这个项目为什么重要以及如何用好它我们必须先深入它的核心MCP协议。这不仅仅是另一个RPC远程过程调用它是为AI智能体时代量身定制的工具调用范式。2.1 MCP协议AI的“工具使用说明书”传统的API调用是程序对程序需要开发者精确地知道函数名、参数格式、返回值结构。但AI助手是“黑盒”它通过自然语言理解意图你无法让它去“硬编码”一个HTTP POST请求。MCP协议的设计哲学就是让工具“自我介绍”让AI“按需取用”。一个MCP Server主要提供两种资源给ClientAI助手工具Tools定义AI可以执行的操作。每个工具都有名称、描述、输入参数模式JSON Schema。例如goto工具的描述可能是“导航浏览器到一个指定的URL”其参数模式会定义需要一个url字符串。AI助手在决定调用时会参考这个描述来匹配用户意图并按照模式生成调用参数。上下文Resources提供只读的、结构化的数据或提示信息。例如一个“当前浏览器页面DOM结构摘要”资源可以定期更新并供AI参考帮助它理解页面当前状态。DrissionPage-MCP-Server的工作就是将 DrissionPage 库中诸如ChromiumPage对象的get(),ele(),click()等方法“翻译”成符合MCP协议规范的Tools和Resources。当Server启动它会通过SSEServer-Sent Events或stdio与AI客户端建立连接并宣告“嗨我这里有这些工具可用。” AI客户端收到后就会将这些工具整合到自己的“能力集”中在后续对话中适时推荐或直接使用。2.2 DrissionPage的双核优势为何契合MCP为什么选择DrissionPage作为底层引擎而不是更知名的Selenium或Playwright这源于DrissionPage独特的“双核”设计它恰好弥补了AI自动化场景中的一些关键短板。模式一浏览器驱动模式类似Selenium/Playwright直接控制Chrome/Edge等真实浏览器。这对于需要执行完整JavaScript、处理复杂SPA单页应用或需要看到真实渲染效果的场景至关重要。AI助手通过MCP调用click工具背后就是驱动浏览器真实点击了一个按钮。模式二数据包模式类似requests 解析直接发送HTTP请求并解析响应HTML。这种模式速度极快资源消耗低适合简单的数据抓取或状态检查。AI助手可以先用此模式快速获取页面标题或检查元素是否存在再决定是否需要启动笨重的浏览器。在DrissionPage-MCP-Server的实现中这两种模式可以灵活切换或结合。例如AI助手接到“登录邮箱并查看未读邮件”的任务。它可以调用start_browser工具模式一打开浏览器。调用goto工具导航到登录页。调用input_text工具填写用户名密码。调用click工具点击登录按钮。登录后页面跳转到收件箱这是一个动态加载的页面。此时AI可以调用get_page_html工具该工具内部可能智能选择模式二快速获取HTML或者调用wait_for_element工具模式一等待某个加载完成标志。最后调用extract_elements工具使用XPath或CSS选择器定位未读邮件行并提取信息。这种灵活性让AI助手的操作策略更加智能可以针对不同子任务选择最高效、最稳定的方式而不是“一刀切”地全程使用浏览器从而提升了自动化任务的整体性能和可靠性。注意MCP协议本身不关心底层是DrissionPage、Playwright还是别的什么它只定义通信格式。选择DrissionPage实现这个Server是项目作者基于其双核特性、Python生态易用性以及对国内网络环境如处理特定登录验证的适配性做出的技术选型。你也可以用同样的MCP协议规范去封装一个“Playwright-MCP-Server”。3. 从零搭建与配置实战理论讲完了我们来点实在的。下面我将带你从零开始搭建并运行一个DrissionPage-MCP-Server并让 Claude Desktop一个官方支持MCP的AI桌面客户端连接上它。3.1 环境准备与依赖安装首先确保你的系统已经安装了 Python建议3.8以上版本和 pip。然后我们创建一个干净的虚拟环境来管理依赖这是避免包冲突的最佳实践。# 1. 创建并进入项目目录 mkdir dp-mcp-demo cd dp-mcp-demo # 2. 创建Python虚拟环境以venv为例 python -m venv .venv # 3. 激活虚拟环境 # Windows: .venv\Scripts\activate # Linux/macOS: source .venv/bin/activate # 激活后命令行提示符前通常会出现 (.venv) 字样接下来安装核心依赖。由于DrissionPage-MCP-Server可能还没有上架 PyPI我们通常需要从源码安装。这里假设我们从GitHub仓库安装。# 4. 安装 DrissionPage核心自动化库 pip install drissionpage # 5. 安装 MCP 协议相关的SDK。Anthropic官方提供了Python的MCP SDK。 pip install mcp # 6. 安装 DrissionPage-MCP-Server。你需要找到该项目的仓库地址例如 # pip install githttps://github.com/某个作者/drissionpage-mcp-server.git # 如果项目提供了 setup.py 或 pyproject.toml上述命令会安装它及其所有依赖。 # 假设我们暂时没有PyPI包而是克隆源码运行 git clone https://github.com/某个作者/drissionpage-mcp-server.git cd drissionpage-mcp-server pip install -e . # 以可编辑模式安装方便修改关键点解析drissionpage是必须的底层库。mcp库提供了实现MCP Server所需的底层通信、工具注册等框架代码。没有它你的Server无法以标准方式和AI客户端“对话”。以可编辑模式 (-e) 安装项目意味着你对项目目录中源码的修改会立即生效便于调试和自定义。3.2 服务器配置与启动安装完成后我们需要配置并启动MCP Server。通常这类项目会提供一个命令行入口点。假设启动脚本是run_server.py。# run_server.py 内容示例通常项目会提供这里展示其可能的核心逻辑 import asyncio from mcp.server import Server from drissionpage_mcp import tools # 假设工具定义在这个模块里 import logging logging.basicConfig(levellogging.INFO) async def main(): # 1. 创建MCP服务器实例 server Server(drissionpage-server) # 2. 向服务器注册DrissionPage提供的所有工具 # 这步通常由项目封装好例如 # tools.register_all_tools(server) # 我们这里演示手动注册一个工具的概念 server.list_tools() async def handle_list_tools(): # 返回工具列表每个工具包含name, description, inputSchema return [ { name: goto_url, description: Navigate the browser to a specified URL., inputSchema: { type: object, properties: { url: {type: string, description: The full URL to navigate to.} }, required: [url] } }, # ... 更多工具 ] server.call_tool() async def handle_call_tool(name: str, arguments: dict): if name goto_url: url arguments.get(url) # 在这里调用真正的 DrissionPage 代码 # page get_shared_page() # 获取或创建浏览器页面对象 # page.get(url) return {content: [{type: text, text: fNavigated to {url}}]} # ... 处理其他工具调用 raise ValueError(fUnknown tool: {name}) # 3. 启动服务器使用stdio传输这是Claude Desktop等客户端期望的方式 async with server.run_stdio() as (read_stream, write_stream): await server.run(read_stream, write_stream) if __name__ __main__: asyncio.run(main())实际上你不需要自己写这个run_server.py项目应该已经提供了。你只需要找到启动命令。假设启动命令是python -m drissionpage_mcp.server运行它如果看到类似 “Server started on stdio” 的日志说明MCP Server已经就绪正在等待客户端连接。此时不要关闭这个终端窗口。3.3 客户端连接以Claude Desktop为例接下来我们需要配置一个MCP客户端来连接这个Server。Claude Desktop是官方支持MCP的便捷选择。找到Claude Desktop的配置文件夹macOS:~/Library/Application Support/Claude/claude_desktop_config.jsonWindows:%APPDATA%\Claude\claude_desktop_config.jsonLinux:~/.config/Claude/claude_desktop_config.json编辑配置文件如果文件不存在就创建它。我们需要在mcpServers字段下添加我们的Server配置。{ mcpServers: { drissionpage: { command: /绝对/路径/到/你的/.venv/bin/python, args: [ -m, drissionpage_mcp.server ], env: { PYTHONPATH: /绝对/路径/到/你的/drissionpage-mcp-server } } } }配置详解command: 这里必须指定你虚拟环境中Python解释器的绝对路径。因为Claude Desktop是一个独立应用它不知道你的虚拟环境在哪。使用which pythonLinux/macOS或where pythonWindows在激活的.venv下命令来获取这个路径。args: 传递给Python的命令行参数即运行我们Server模块的指令。env: 可选但推荐设置环境变量。这里我们设置了PYTHONPATH确保Python能正确找到我们安装的drissionpage_mcp模块。同样需要替换为你的项目绝对路径。重启Claude Desktop保存配置文件后完全关闭并重新打开Claude Desktop应用。验证连接重启后在Claude Desktop的对话界面你可能会在输入框附近看到一个“螺丝刀”或“插件”图标点击它应该能看到可用的工具列表。或者你可以直接输入“你现在可以使用哪些工具” Claude应该会回复它已连接到drissionpage服务器并列出可用的工具如goto_url,click_element,get_text等。实操心得配置文件路径和命令路径是新手最容易出错的地方。特别是Windows用户路径中的反斜杠\需要转义为\\或者直接使用正斜杠/。一个调试技巧是先在终端手动用配置中的命令和参数运行确保Server能独立启动再配置到Claude中。如果连接失败查看Claude Desktop的日志通常可在应用菜单中找到是排查问题的关键。4. 工具定义与自动化任务设计现在你的AI助手已经“手眼通天”了。但如何有效地指挥它呢这取决于Server暴露了哪些工具以及你如何设计提示词Prompt来引导AI使用这些工具。4.1 核心工具集解析一个设计良好的DrissionPage-MCP-Server应该提供一组原子化的、功能清晰的工具。以下是一些必备的核心工具类别工具类别示例工具名描述与参数AI调用场景示例浏览器生命周期start_browser启动/获取浏览器实例。参数可指定headless(无头模式)。“开始一个浏览器任务。”close_browser关闭浏览器释放资源。“任务完成关闭浏览器。”页面导航goto跳转到指定URL。参数url(字符串)。“去百度首页。”go_back,go_forward前进/后退。“返回上一个页面。”refresh刷新当前页面。“刷新一下看看数据更新没。”元素定位与交互find_element查找元素。参数selector(CSS/XPath),timeout等。“找到搜索框。”click点击元素。参数selector或element_id。“点击登录按钮。”input_text向输入框输入文本。参数selector,text。“在搜索框输入‘Python教程’。”get_text获取元素的文本内容。参数selector。“获取商品标题的文字。”get_attribute获取元素属性。参数selector,attr_name。“获取这个链接的href地址。”scroll滚动页面。参数pixels或to_bottom。“滚动到页面底部。”页面信息get_page_title获取当前页面标题。“现在在哪个页面”get_page_html/get_page_text获取页面HTML源码或纯文本。“把页面主要内容文本给我。”screenshot页面截图。参数selector(可选局部截图)。“截个图看看现在页面什么样。”等待与条件wait_for_element等待元素出现。参数selector,timeout。“等加载完成直到看到‘提交成功’的提示。”wait_for_navigation等待页面跳转完成。“点击后等新页面加载完。”4.2 设计高效的AI自动化任务提示词有了工具如何让AI用好是关键。你不能只说“帮我订机票”这太模糊。你需要将复杂任务分解并通过提示词引导AI进行“思考-行动-观察”的循环。一个失败的例子用户“去携程网帮我找一下明天北京飞上海最便宜的机票。”AI助手可能直接调用goto(“携程网”)然后就被复杂的首页搞懵了不知道下一步该点哪里。因为它缺乏对“找机票”这个任务具体步骤的先验知识。一个成功的提示词设计用户“我们将执行一个‘查询机票’的任务。你的能力包括控制浏览器。请按以下步骤操作打开浏览器导航到https://www.ctrip.com。找到‘机票’选项卡或按钮并点击。在出发城市框输入‘北京’到达城市框输入‘上海’。选择出发日期为明天。点击‘搜索’按钮。等待搜索结果页面加载完成。在结果列表中找到价格最低的那一航班行将其航班号、起飞时间和价格信息提取出来告诉我。 如果你在任何步骤遇到问题比如找不到元素请描述你看到的页面结构或截图并暂停等待我的进一步指示。”这个提示词做了几件关键的事定义任务边界明确了是“查询机票”任务。提供步骤化引导将开放性问题转化为一系列具体的、可操作的子步骤。AI可以按部就班地调用工具。预设参数给出了具体的URL、城市名、日期。这些信息AI无法自行猜测。明确成功标准告诉AI最终要输出什么最低价航班信息。设置错误处理机制要求AI在卡住时反馈现场情况便于人类介入指导。在实际使用中你可以先让AI助手“探索”一下页面。例如在第一步打开携程后你可以问“你现在看到了什么页面上有哪些主要的按钮或输入框” AI可以调用get_page_text或分析截图如果工具支持来回答然后你再指导它下一步点击哪里。经过几次这样的交互AI就能学习到完成这个任务的固定路径未来你可以用更简短的指令来触发它。注意事项网页结构是动态变化的。今天“搜索”按钮的CSS选择器是.search-btn明天可能就变成了.btn-search。因此依赖精确选择器的自动化脚本非常脆弱。而AI助手的优势在于它可以通过视觉描述如果工具能提供截图分析或语义理解从页面文本中找“搜索”这个词来更鲁棒地定位元素。在设计工具时可以考虑提供find_element_by_text通过文本内容查找这类更符合AI思维的工具而不仅仅是find_element_by_css。5. 高级应用构建复杂工作流与自定义工具当基础工具玩转后我们可以向更高阶的用法迈进将多个工具调用串联成复杂工作流甚至为特定场景自定义工具。5.1 工作流编排从单次操作到多步任务AI助手单次调用一个工具完成点击或输入价值有限。真正的威力在于将多个调用组合起来完成一个完整的业务流程。这依赖于AI的“规划”能力而我们可以通过更精巧的提示词或外部编排器来辅助。示例自动化周报数据抓取与汇总假设你每周需要从公司内部三个不同系统中抓取数据汇总成周报。定义子任务任务A登录内部Wiki抓取本周“项目进度”板块的更新内容。任务B登录CRM系统导出本周新增客户列表。任务C登录监控平台获取本周系统异常报警统计。为AI助手设计“主控”提示词“接下来请你执行‘生成周报数据’任务。你需要依次完成三个子任务。每个子任务完成后请将获取到的关键数据以清晰的格式暂存。全部完成后将所有数据整合成一份Markdown格式的周报摘要。子任务1获取项目进度。操作步骤1) 导航至Wiki登录页2) 使用账号XXX、密码YYY登录调用input_text和click3) 进入‘项目周报’页面4) 定位本周的更新内容区域提取所有文本。完成后说‘子任务1完成数据已暂存’。子任务2获取新增客户。操作步骤1) 导航至CRM登录页...类似上述步骤... 完成后说‘子任务2完成’。子任务3获取系统报警。操作步骤1) 导航至监控平台... 完成后说‘子任务3完成’。 现在请开始执行子任务1。”通过这种结构化的提示AI助手能够像一个真正的自动化脚本一样按顺序执行多个步骤并在每个关键节点给出状态反馈。你甚至可以结合支持“长上下文”和“函数调用”的AI API在代码层面实现更复杂的状态机和错误重试逻辑。5.2 自定义工具扩展封装业务逻辑DrissionPage-MCP-Server项目通常允许你扩展自定义工具。这意味着你可以将一些重复的、复杂的操作序列封装成一个“高级工具”暴露给AI。例如你觉得每次让AI“登录某个特定系统”都要一步步指导太麻烦。你可以自己在Server端编写一个login_to_internal_system工具。# 在Server的tool注册部分添加 server.list_tools() async def handle_list_tools(): base_tools [...] # 原有的基础工具列表 custom_tools [ { name: login_to_internal_system, description: Log in to the companys internal wiki system using predefined credentials., inputSchema: { type: object, properties: {} # 这个工具不需要参数因为账号密码写死在逻辑里或从安全配置读取 } } ] return base_tools custom_tools server.call_tool() async def handle_call_tool(name: str, arguments: dict): if name login_to_internal_system: # 使用DrissionPage实现具体的登录逻辑 page get_shared_browser_page() await page.goto(https://internal-wiki.company.com/login) await page.input_text(#username, os.getenv(WIKI_USER)) await page.input_text(#password, os.getenv(WIKI_PASS)) await page.click(#submit-btn) await page.wait_for_element(#dashboard, timeout10000) return {content: [{type: text, text: Successfully logged in to internal wiki.}]} # ... 处理其他工具这样AI助手在需要登录时直接调用这个“一键登录”工具即可无需再关心具体的输入框ID和点击顺序。你可以把公司内部各种系统的登录、特定报表的生成等高频操作都封装成自定义工具极大提升AI助手的执行效率和可靠性。实操心得自定义工具时工具的描述 (description) 至关重要。AI助手完全依赖这个描述来理解工具的用途和决定何时调用它。描述要清晰、具体包含关键词。例如“登录内部Wiki”就比“登录系统”好。输入参数的模式 (inputSchema) 也要设计得合理既不要过于复杂让AI难以生成也不要遗漏必要参数导致工具调用失败。对于涉及敏感信息如密码的操作务必通过环境变量或配置文件来管理切勿硬编码在代码中。6. 常见问题、调试技巧与安全考量在实际集成和使用过程中你肯定会遇到各种问题。下面是一些典型问题及其排查思路。6.1 连接与通信故障问题现象可能原因排查步骤Claude Desktop 提示“无法连接MCP服务器”或工具列表为空。1. Server进程未启动或已崩溃。2. Claude配置文件中命令或路径错误。3. Python依赖未安装完整。1.检查Server日志在运行Server的终端查看是否有错误输出。确保进程持续运行。2.验证命令手动在终端执行配置文件中的command和args看能否成功启动Server。3.检查路径确保command中的Python路径和env中的PYTHONPATH都是绝对路径并且指向正确的虚拟环境。4.查看Claude日志在Claude Desktop中查找日志文件通常会有更详细的连接错误信息。AI助手可以列出工具但调用时超时或失败。1. 工具实现代码有Bug抛出异常。2. 浏览器驱动问题如Chrome版本不兼容。3. 网络问题导致页面无法加载。1.查看Server日志调用工具时Server终端会打印详细错误信息这是最重要的调试依据。2.独立测试DrissionPage写一个简单的Python脚本直接用DrissionPage执行相同的操作看是否成功。这能隔离MCP层的问题。3.更新浏览器驱动DrissionPage依赖浏览器驱动确保你的Chrome/Firefox版本与drissionpage库兼容必要时使用DrissionPage的自动下载功能或手动更新驱动。工具调用成功但AI助手得不到预期结果如找不到元素。1. 页面加载未完成就执行了查找。2. 元素选择器CSS/XPath不正确或已过时。3. 页面存在iframe或Shadow DOM。1.增加等待在调用find_element前先调用wait_for_element或wait_for_navigation。2.验证选择器在浏览器开发者工具中F12使用$(你的选择器)或$x(你的XPath)测试确认能定位到元素。3.处理特殊结构如果元素在iframe内需要先用switch_to_frame工具切换到对应frame。DrissionPage对此有支持但需要确认MCP工具是否暴露了此功能。6.2 浏览器自动化中的稳定性挑战网页自动化天生脆弱AI的加入引入了新的不确定性。动态内容与等待策略现代网页大量使用异步加载。AI调用goto后立即调用find_element很可能因为页面还没加载完而失败。解决方案在Server端工具实现中内置智能等待。例如click工具在点击后可以自动等待一段时间或等待某个条件如URL变化、元素出现。同时多提供wait_for_*系列工具给AI调用。元素定位的语义化让AI去写精确的CSS选择器#main div.container form input[type\text\]:nth-child(2)是不现实的。解决方案提供基于文本、属性模糊匹配的查找工具如find_element_by_text(“搜索”),find_element_by_placeholder(“请输入关键词”)。甚至可以利用AI自身的视觉能力如果Server能提供截图让AI描述它“看到”了什么再决定点哪里。验证码与反爬机制这是自动化尤其是AI自动化的终极挑战。重要原则绝对不要试图让AI去破解验证码或绕过严肃的反爬措施。这既可能违反法律和服务条款技术上也不可靠。正确做法1) 对于需要登录的任务考虑使用保存Cookie/Session的方式复用登录状态减少触发登录验证的频率。2) 对于公开数据抓取严格遵守网站的robots.txt协议并添加合理的延迟避免请求过快。3) 明确项目边界此类工具应用于内部系统、开发测试或已获得授权的场景。6.3 安全与权限管理赋予AI浏览器自动化能力意味着它能在你的电脑上“为所欲为”因此安全至关重要。最小权限原则不要以高权限用户如root/Administrator身份运行MCP Server。为它创建一个专用的、权限受限的系统账户。网络隔离如果Server只需要访问特定内部网站可以考虑使用网络策略限制其出站连接。会话隔离考虑为每次AI会话启动一个独立的浏览器实例和用户数据目录防止不同会话间的Cookie、缓存相互干扰也便于清理。敏感信息保护登录凭证、API密钥等绝不能硬编码在工具实现或提示词中。必须使用环境变量、加密配置文件或安全的密钥管理服务来存储和传递。操作确认对于高风险操作如删除数据、提交订单、发送邮件可以在Server端实现二次确认机制或者仅在工具描述中明确提示风险由人类用户最终审核AI生成的指令后再执行。最后一点体会DrissionPage-MCP-Server这类项目代表了AI应用的一个激动人心的方向——让AI从“思考者”变为“行动者”。它目前可能还不够完美稳定性需要打磨提示词需要精心设计但它打开了一扇门。你可以用它来制作一个自动化的数据看板更新机器人一个帮你追踪商品价格的助手或者一个自动测试网页功能的智能体。关键在于你开始以一种新的范式来思考自动化从编写静态脚本转变为训练和指挥一个能理解你意图的智能伙伴。这个过程充满挑战但也乐趣无穷。