mcpField
B
Browser Automation

Browser Automation

github.com/claude-office-skills开发5455.3k 次安装39 周前更新
代码仓库

关于 Browser Automation

用于自动执行浏览器操作的技能，适用于网页抓取、测试和日常工作流，涵盖页面导航、元素交互、数据提取及截图或 PDF 捕获。

主要功能

  1. 01页面导航并等待元素加载
  2. 02点击页面元素并输入内容
  3. 03提取文本和结构化字段
  4. 04捕获截图和 PDF
  5. 05自动填写表单并执行端到端测试

适用场景

  1. 01收集网页中的文章或商品信息
  2. 02自动登录并提交表单
  3. 03运行用户注册浏览器测试
  4. 04保存页面截图或 PDF

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/claude-office-skills/skills --skill browser-automation

安装后在 Claude Code 中输入/browser-automation确认已加载。

详细介绍

浏览器自动化

自动化浏览器交互，用于抓取、测试和工作流自动化。

核心功能

导航
navigation:
  goto:
    url: "https://example.com"
    wait_until: "networkidle"
    timeout: 30000
    
  actions:
    - wait_for_selector: ".content"
    - scroll_to_bottom: true
    - wait_for_navigation: true
元素交互
interactions:
  click:
    selector: "button.submit"
    options:
      click_count: 1
      delay: 100
      
  type:
    selector: "input[name='email']"
    text: "[email protected]"
    options:
      delay: 50  # Human-like typing
      
  select:
    selector: "select#country"
    value: "US"
    
  file_upload:
    selector: "input[type='file']"
    files: ["document.pdf"]
数据提取
scraping:
  extract_text:
    selector: ".article-content"
    
  extract_all:
    selector: ".product-card"
    fields:
      name: ".product-name"
      price: ".price"
      url:
        selector: "a"
        attribute: "href"
        
  extract_table:
    selector: "table.data"
    output: json
截图和 PDF
capture:
  screenshot:
    path: "screenshot.png"
    full_page: true
    type: "png"
    
  pdf:
    path: "page.pdf"
    format: "A4"
    print_background: true

工作流示例

表单自动化
// Login and fill form
await page.goto('https://app.example.com/login');
await page.fill('#email', '[email protected]');
await page.fill('#password', 'securepass');
await page.click('button[type="submit"]');
await page.waitForNavigation();

// Navigate to form
await page.click('a[href="/new-entry"]');
await page.fill('#title', 'Automated Entry');
await page.fill('#description', 'Created via automation');
await page.click('button.submit');
网页抓取
scraping_workflow:
  - navigate: "https://news.example.com"
  - wait: ".article-list"
  - extract_all:
      selector: ".article"
      fields:
        title: "h2"
        summary: ".excerpt"
        link:
          selector: "a"
          attribute: "href"
  - paginate:
      next_button: ".pagination .next"
      max_pages: 10
  - output: "articles.json"
端到端测试
test_workflow:
  - name: "User Registration"
    steps:
      - goto: "/register"
      - fill:
          "#email": "[email protected]"
          "#password": "Test123!"
      - click: "button[type='submit']"
      - assert:
          selector: ".success-message"
          text_contains: "Welcome"

最佳实践

  1. 等待策略：使用恰当的等待方式
  2. 错误处理：捕获导航失败
  3. 速率限制：尊重服务
  4. 无头模式：用于生产环境
  5. 选择器：优先使用 data-testid 属性
  6. 截图：发生故障时截图

评论

支持 Markdown