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を入力して読み込まれたか確認します。

詳細

ブラウザー自動化

スクレイピング、テスト、ワークフローの自動化に向けて、Web ブラウザーの操作を自動化します。

主な機能

ナビゲーション
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');
Web スクレイピング
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"
E2E テスト
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 対応