Claude CodeでPlaywrightとBrowser Useを使うブラウザ自動操作ガイド

pip install playwright
playwright install          # Chromium / Firefox / WebKit をダウンロード
playwright install chromium # Chromium のみの場合

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # ページに移動
    page.goto("https://example.com")

    # テキスト入力
    page.fill('input[name="q"]', "Python playwright")

    # クリック
    page.click('button[type="submit"]')

    # ページ遷移を待機
    page.wait_for_url("**/search**")

    # テキスト取得（inner_text: 表示されている文字のみ）
    title = page.title()
    print(f"ページタイトル: {title}")

    # スクリーンショット保存
    page.screenshot(path="result.png")

    browser.close()

import asyncio
from playwright.async_api import async_playwright

async def scrape_page(browser, url):
    page = await browser.new_page()
    await page.goto(url)
    title = await page.title()
    await page.close()
    return title

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()

        # 3ページを並列処理
        urls = [
            "https://example.com/page1",
            "https://example.com/page2",
            "https://example.com/page3",
        ]
        tasks = [scrape_page(browser, url) for url in urls]
        titles = await asyncio.gather(*tasks)

        for url, title in zip(urls, titles):
            print(f"{url}: {title}")

        await browser.close()

asyncio.run(main())

# uvを使う場合（推奨）
uv add browser-use langchain-anthropic   # browser-use + Claude用LangChainアダプタ

# pipを使う場合
pip install browser-use langchain-anthropic
playwright install  # ブラウザのインストール（browser-use内部でPlaywrightを使用）

import asyncio
from browser_use import Agent
from langchain_anthropic import ChatAnthropic

async def main():
    # langchain_anthropic の ChatAnthropic でClaudeを指定
    llm = ChatAnthropic(model="claude-sonnet-4-6")

    agent = Agent(
        task="GitHubでbrowser-useリポジトリのスター数を調べてください",
        llm=llm,
    )

    # エージェントを実行（自律的にブラウザを操作して結果を返す）
    result = await agent.run()
    print(result.final_result())

asyncio.run(main())

import asyncio
from browser_use import Agent, Controller
from langchain_anthropic import ChatAnthropic

# カスタムアクションを登録するコントローラー
controller = Controller()

@controller.action("現在のページからすべての価格情報を抽出する")
async def extract_prices(browser) -> list:
    """テーブルの価格データを構造化して返す"""
    page = await browser.get_current_page()
    rows = await page.query_selector_all("table tbody tr")

    prices = []
    for row in rows:
        cells = await row.query_selector_all("td")
        if len(cells) >= 2:
            name  = await cells[0].inner_text()
            price = await cells[1].inner_text()
            prices.append({"プラン": name.strip(), "価格": price.strip()})

    return prices


async def main():
    llm = ChatAnthropic(model="claude-sonnet-4-6")

    agent = Agent(
        task="料金ページを開いて全プランの価格を抽出してください",
        llm=llm,
        controller=controller,   # カスタムアクションを渡す
    )

    result = await agent.run()
    print(result.final_result())

asyncio.run(main())

# Playwright MCPサーバーをClaude Codeに登録
claude mcp add playwright npx @playwright/mcp@latest

# プロジェクトスコープで登録する場合
claude mcp add playwright npx @playwright/mcp@latest --scope project

npm install -g @playwright/cli@latest
playwright install

#!/usr/bin/env python3
"""
Claude Code Skill: ブラウザ自動操作
使い方: python browser_skill.py <url> <action>
action: title | screenshot | html
"""
import sys, json, asyncio
from playwright.async_api import async_playwright

async def execute(url: str, action: str) -> dict:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url, wait_until="domcontentloaded")

        result = {}
        if action == "screenshot":
            await page.screenshot(path="/tmp/screenshot.png")
            result = {"file": "/tmp/screenshot.png"}
        elif action == "title":
            result = {"title": await page.title()}
        elif action == "html":
            with open("/tmp/page.html", "w", encoding="utf-8") as f:
                f.write(await page.content())
            result = {"file": "/tmp/page.html"}

        await browser.close()
        return result

if __name__ == "__main__":
    url    = sys.argv[1] if len(sys.argv) > 1 else "https://example.com"
    action = sys.argv[2] if len(sys.argv) > 2 else "title"
    print(json.dumps(asyncio.run(execute(url, action)), ensure_ascii=False))

import asyncio
from playwright.async_api import async_playwright
from browser_use import Agent
from langchain_anthropic import ChatAnthropic

async def scrape_product_page(url: str) -> dict:
    """
    ハイブリッドアプローチ:
    - Playwright: ナビゲーション・既知の構造を高速処理
    - Browser Use: 未知のレイアウト・複雑な判断が必要な処理
    """
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url, wait_until="domcontentloaded")

        # ①まず標準的な構造か確認（Playwrightで高速チェック）
        standard_grid = await page.query_selector(".product-grid")

        if standard_grid:
            # ②標準レイアウトならPlaywrightで確定的に抽出
            items = await page.query_selector_all(".product-item")
            results = []
            for item in items:
                name_el  = await item.query_selector(".product-name")
                price_el = await item.query_selector(".product-price")
                results.append({
                    "name":  await name_el.inner_text()  if name_el  else "",
                    "price": await price_el.inner_text() if price_el else "",
                })
            await browser.close()
            return {"method": "playwright", "data": results}

        # ③非標準レイアウトはBrowser Useにフォールバック
        await browser.close()

    llm = ChatAnthropic(model="claude-sonnet-4-6")
    agent = Agent(
        task=f"{url} の全商品名と価格を抽出してJSON形式で返してください",
        llm=llm,
    )
    result = await agent.run()
    return {"method": "browser_use", "data": result.final_result()}


async def main():
    url = "https://example.com/products"
    result = await scrape_product_page(url)
    print(f"使用ツール: {result['method']}")
    print(f"取得データ: {result['data']}")

asyncio.run(main())

import asyncio, json
from playwright.async_api import async_playwright

async def process_url(semaphore, browser, url):
    """セマフォで同時実行数を制限しながら並列処理"""
    async with semaphore:
        page = await browser.new_page()
        try:
            await page.goto(url, wait_until="domcontentloaded", timeout=15000)
            title = await page.title()
            return {"url": url, "title": title, "status": "ok"}
        except Exception as e:
            return {"url": url, "error": str(e), "status": "error"}
        finally:
            await page.close()

async def batch_scrape(urls: list[str], concurrency: int = 5):
    """最大5並列でURLリストを処理"""
    semaphore = asyncio.Semaphore(concurrency)
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        tasks = [process_url(semaphore, browser, url) for url in urls]
        results = await asyncio.gather(*tasks)
        await browser.close()
    return results

# 使い方
urls = [f"https://example.com/page{i}" for i in range(20)]
results = asyncio.run(batch_scrape(urls, concurrency=5))

success = [r for r in results if r["status"] == "ok"]
print(f"処理完了: {len(success)}/{len(results)}件成功")