MCP:模型上下文协议(Model Context Protocol,MCP),是由Anthropic推出的开源协议,旨在实现大语言模型与外部数据源和工具的集成,用来在大模型和数据源之间建立安全双向的连接。该协议通过相同的协议同时处理本地资源(例如数据库、文件、服务等)和远程资源(例如Slack或GitHub等API)

  1. 安装playwright 及 浏览器支持
    pip install playwright
    playwright install
  2. 安装playwright MCP server

    1) 安装nodejs(LTS)版
        Node.Js中文网 / Node.Js
    2) 安装 playwright MCP server
        LangChain - Changelog | MCP Adapters for LangChain and LangGraph
    # Microsoft官方发布和维护标准MCP client
    npm install -g @playwright/mcp    
    
    # 社区开发者@executeautomation构建的MCP server适合进阶使用者或自动化测试场景更复杂的项目
    # npx @playwright/mcp --version  Version 0.0.41
    npm install -g @executeautomation/playwright-mcp-server  
    
    
    ## 安装依赖库
    mcp
    langchain-openai
    langgraph
    dotenv
    python-dotenv
    langchain-core
    langchain-mcp-adapters
  3. Cursor

    - 安装

    Cursor 是一款由 AI 驱动的代码编辑器,能够理解你的代码库,并通过自然语言帮助你更高效地编写代码。
    下载:Cursor:用 AI 编码的最佳方式

    - 添加MCP配置
      File --> Preferences --> Cursor Settings --> Tools & MCP

    {
      "mcpServers": {
        "playwright": {
          "command": "npx",
          "args": ["@playwright/mcp@latest"]
        }
      }
    }

       - 新建 Agent -> New Chat
       - 创建指令 Prompt
          请使用Playwright MCP打开百度,搜索'Playwright-MCP教程',将搜索结果截图并保存在C盘。
      - 执行

# Open Baidu homepage
await page.goto('https://www.baidu.com');

# Search for 'Playwright-MCP教程'
await page.getByRole('textbox', { name: '?????????' }).fill('Playwright-MCP教程');
# Press Enter
await page.keyboard.press('Enter');

# Capture results screenshot 
await page.screenshot({
fullPage: true,
  path: 'C:\\Users\\rolei\\AppData\\Local\\Temp\\playwright-mcp-output\\1759732255240\\baidu_playwright_mcp_search.png',
  scale: 'css',
  type: 'png'
});

# save to C:\
powershell -NoProfile -ExecutionPolicy Bypass -Command "Copy-Item -LiteralPath 'C:\Users\rolei\AppData\Local\Temp\playwright-mcp-output\1759732255240\baidu_playwright_mcp_search.png' -Destination 'C:\baidu_playwright_mcp_search.png' -Force"

参考:
1)Playwright MCP浏览器自动化详解指南-阿里云开发者社区
2)Puppeteer MCP 与 Playwright MCP:深度对比与选择指南 - 知乎
3)安装 | Playwright Python 中文网
4)AIGC(生成式AI)试用 37 -- 辅助测试 Browser-use, Playwright-CSDN博客

Logo

更多推荐