# 自動化の例 (CDP)

エージェントがスキル経由で MoreLogin プロファイルを開始すると、`debugPort` を受け取ります。このポートは、**CDP (Chrome DevTools Protocol)** を使用してブラウザ インスタンスに直接接続するために使用され、WebDriver の必要性を回避できます。

次のパターンを使用してスクリプトを作成および実行するように、Hermes または OpenClaw エージェントに指示できます。

## 1. Puppeteer と接続する

```javascript
// Get debugPort from:
// openclaw morelogin browser status --env-id <envId>
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:9222', // replace 9222 with actual debugPort
    defaultViewport: null
  });

  const pages = await browser.pages();
  const page = pages[0];
  await page.goto('https://example.com');
  
  // Scrape data or perform actions
  const title = await page.title();
  console.log('Title:', title);
  
  // NOTE: Do not call browser.close() unless you want to destroy the MoreLogin process
  await browser.disconnect();
}
main();
```

## 2. フォームに記入して送信する

```javascript
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  
  // Fill form
  await page.type('#username', 'myuser');
  await page.type('#password', 'mypassword');
  
  // Click submit
  await page.click('button[type="submit"]');
  
  // Wait for navigation
  await page.waitForNavigation();
  
  // Verify login
  const isLoggedIn = await page.$('.user-profile');
  console.log('Login successful:', !!isLoggedIn);
  
  await browser.disconnect();
}
main();
```

## 3. データスクレイピング

```javascript
const puppeteer = require('puppeteer-core');
const fs = require('fs');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  const page = await browser.newPage();
  await page.goto('https://example.com/products');
  
  // Scrape data
  const products = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.product')).map(el => ({
      name: el.querySelector('.name')?.textContent,
      price: el.querySelector('.price')?.textContent,
      url: el.querySelector('a')?.href
    }));
  });
  
  // Save to file
  fs.writeFileSync('products.json', JSON.stringify(products, null, 2));
  console.log(`Scraped ${products.length} products`);
  
  await browser.disconnect();
}
main();
```

## 4. マルチタブ操作

```javascript
const puppeteer = require('puppeteer-core');

async function main() {
  const browser = await puppeteer.connect({
    browserURL: 'http://127.0.0.1:<debugPort>'
  });
  
  // Open multiple tabs
  const page1 = await browser.newPage();
  const page2 = await browser.newPage();
  
  await page1.goto('https://example.com');
  await page2.goto('https://github.com');
  
  // Parallel operations
  await Promise.all([
    page1.screenshot({ path: 'page1.png' }),
    page2.screenshot({ path: 'page2.png' })
  ]);
  
  console.log('Screenshots completed');
  
  await browser.disconnect();
}
main();
```

## トラブルシューティング

- **エラー: `connect ECONNREFUSED`**: プロファイルが実行中であり、`debugPort` が正しいことを確認してください。 `lsof -i :<port>` を使用してポートを確認できます。
- **接続時にブラウザがクラッシュする**: `puppeteer` ではなく `puppeteer-core` を使用し、スクリプトの終了時に `browser.close()` ではなく `browser.disconnect()` を呼び出すようにしてください。