Browser Sub-Agent 実践ガイド — AIがWebを自律的に操作する

// browser-scraper.ts
import { launch } from 'puppeteer';
 
interface ScrapedProduct {
  title: string;
  price: number;
  rating: number;
  url: string;
}
 
class EcommerceScraper {
  private browser: any;
 
  async initialize() {
    this.browser = await launch({
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-blink-features=AutomationControlled', // ロボット検出回避
      ],
    });
  }
 
  async scrapeProductListing(
    baseUrl: string,
    pageCount: number = 3
  ): Promise<ScrapedProduct[]> {
    const results: ScrapedProduct[] = [];
    const page = await this.browser.newPage();
 
    // User-Agent をスプーフィング
    await page.setUserAgent(
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
    );
 
    for (let i = 1; i <= pageCount; i++) {
      const url = `${baseUrl}?page=${i}`;
      console.log(`Scraping: ${url}`);
 
      try {
        // ページ読み込み待機
        await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });
 
        // 動的コンテンツの読み込み待機
        await page.waitForSelector('.product-item', { timeout: 10000 });
 
        // DOM から製品情報を抽出
        const products = await page.evaluate(() => {
          const items = document.querySelectorAll('.product-item');
          return Array.from(items).map((item) => {
            const titleEl = item.querySelector('.product-title');
            const priceEl = item.querySelector('.product-price');
            const ratingEl = item.querySelector('.product-rating');
            const linkEl = item.querySelector('a.product-link');
 
            return {
              title: titleEl?.textContent?.trim() || 'N/A',
              price: parseFloat(
                priceEl?.textContent?.replace(/[^\d.]/g, '') || '0'
              ),
              rating: parseFloat(ratingEl?.textContent || '0'),
              url: linkEl?.getAttribute('href') || '',
            };
          });
        });
 
        results.push(...products);
        console.log(`Page ${i}: ${products.length} products found`);
 
        // レート制限回避: ページ間に遅延を入れる
        await page.waitForTimeout(2000 + Math.random() * 3000);
      } catch (error) {
        console.error(`Error scraping page ${i}:`, error);
        // フォールバック: AI に手動確認を依頼
      }
    }
 
    await page.close();
    return results;
  }
 
  async close() {
    await this.browser.close();
  }
}
 
// 使用例
async function main() {
  const scraper = new EcommerceScraper();
  await scraper.initialize();
 
  const products = await scraper.scrapeProductListing(
    'https://example-ecommerce.com/products',
    3
  );
 
  console.log(`Total products scraped: ${products.length}`);
  console.log(JSON.stringify(products, null, 2));
 
  await scraper.close();
}
 
main().catch(console.error);

class RateLimitedScraper {
  private requestTimes: number[] = [];
  private maxRequestsPerMinute: number = 10;
 
  async ensureRateLimit() {
    const now = Date.now();
    const oneMinuteAgo = now - 60 * 1000;
 
    // 1分以内のリクエストを数える
    this.requestTimes = this.requestTimes.filter((t) => t > oneMinuteAgo);
 
    if (this.requestTimes.length >= this.maxRequestsPerMinute) {
      // 相手の上限に達したら待機（429 を受けたあとの挙動は後半で扱います）
      const waitTime = 60 * 1000 - (now - this.requestTimes[0]);
      console.log(`Rate limit reached. Waiting ${waitTime}ms...`);
      await new Promise((r) => setTimeout(r, waitTime));
    }
 
    this.requestTimes.push(now);
  }
 
  async scrapePage(url: string) {
    await this.ensureRateLimit();
    // スクレイピング処理...
  }
}

[
  {
    "title": "高性能 AI ノートパソコン",
    "price": 1580,
    "rating": 4.8,
    "url": "https://example.com/product/ai-laptop-pro"
  },
  {
    "title": "USB-C ドッキングステーション",
    "price": 25800,
    "rating": 4.5,
    "url": "https://example.com/product/usb-c-dock"
  }
]

class FormFiller {
  async fillComplexForm(page: any) {
    // ステップ1: テキスト入力フィールドを埋める
    await page.type('#name-input', 'Masaki Hirokawa');
    await page.type('#email-input', 'user@example.com');
 
    // ステップ2: ラジオボタン選択
    await page.click('input[value="business"]');
 
    // ステップ3: 条件分岐（選択内容に応じて出現するフィールド）
    await page.waitForSelector('#company-name-field', { timeout: 5000 });
    await page.type('#company-name-field', 'Dolice Labs');
 
    // ステップ4: マルチセレクト（複数選択可能）
    const tags = ['AI Development', 'Web Automation', 'Agent System'];
    for (const tag of tags) {
      // Cmd/Ctrl + click で複数選択
      await page.click(`label:contains("${tag}")`, { modifiers: ['Control'] });
    }
 
    // ステップ5: ファイルアップロード
    const uploadInput = await page.$('input[type="file"]');
    await uploadInput.uploadFile('/path/to/resume.pdf');
 
    // ステップ6: 利用規約に同意
    await page.click('#terms-checkbox');
    await page.click('#privacy-checkbox');
 
    // ステップ7: 送信ボタンをクリック
    await Promise.all([
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
      page.click('#submit-button'),
    ]);
 
    console.log('Form submitted successfully');
  }
}

class AuthenticatedSession {
  private cookiesFile = './session-cookies.json';
 
  async saveCookies(page: any) {
    const cookies = await page.cookies();
    require('fs').writeFileSync(this.cookiesFile, JSON.stringify(cookies, null, 2));
  }
 
  async restoreCookies(page: any) {
    if (require('fs').existsSync(this.cookiesFile)) {
      const cookies = JSON.parse(
        require('fs').readFileSync(this.cookiesFile, 'utf8')
      );
      await page.setCookie(...cookies);
      console.log('Cookies restored from previous session');
    }
  }
 
  async login(page: any, email: string, password: string) {
    await page.goto('https://example.com/login');
 
    // ログイン処理
    await page.type('#email', email);
    await page.type('#password', password);
    await page.click('button[type="submit"]');
 
    // ログイン完了待機
    await page.waitForNavigation({ waitUntil: 'networkidle0' });
 
    // クッキーを保存（次回以降の復元用）
    await this.saveCookies(page);
  }
 
  async accessProtectedPage(url: string) {
    const browser = await launch();
    const page = await browser.newPage();
 
    // 前回のセッションを復元
    await this.restoreCookies(page);
 
    await page.goto(url);
    return await page.content();
  }
}

class E2ETestRunner {
  async testCheckoutFlow(baseUrl: string) {
    const browser = await launch();
    const page = await browser.newPage();
 
    try {
      // シナリオ1: 商品検索
      console.log('Test 1: Search for product');
      await page.goto(`${baseUrl}/`);
      await page.type('#search-input', 'AI notebook');
      await page.click('#search-button');
      await page.waitForSelector('.product-grid', { timeout: 10000 });
 
      // シナリオ2: 商品詳細ページへ移動
      console.log('Test 2: Navigate to product detail');
      await page.click('a.product-link:first-child');
      await page.waitForSelector('.product-detail', { timeout: 5000 });
 
      // シナリオ3: カートに追加
      console.log('Test 3: Add to cart');
      await page.click('#add-to-cart-button');
      const cartBadge = await page.$eval(
        '.cart-count',
        (el) => el.textContent
      );
      console.assert(cartBadge === '1', 'Cart should have 1 item');
 
      // シナリオ4: チェックアウト
      console.log('Test 4: Proceed to checkout');
      await page.click('a[href="/checkout"]');
      await page.waitForSelector('#shipping-form', { timeout: 5000 });
 
      // シナリオ5: 配送情報入力
      console.log('Test 5: Fill shipping info');
      await page.type('#address', '123 Tech Street, San Francisco');
      await page.select('#country', 'US');
 
      // シナリオ6: 決済情報入力（本番では Stripe テストキーを使用）
      console.log('Test 6: Fill payment info');
      // iframe 内の Stripe フォーム
      const stripeFrame = page.frames().find((f) =>
        f.url().includes('stripe.com')
      );
      if (stripeFrame) {
        await stripeFrame.type('[placeholder="Card number"]', 'YOUR_TEST_CARD_NUM');
      }
 
      // シナリオ7: 注文完了
      console.log('Test 7: Complete order');
      await Promise.all([
        page.waitForNavigation({ waitUntil: 'networkidle0' }),
        page.click('#place-order-button'),
      ]);
 
      // 確認ページのスクリーンショット
      const screenshot = await page.screenshot({
        path: './test-results/order-confirmation.png',
      });
      console.log('✓ Checkout flow completed successfully');
 
      return true;
    } catch (error) {
      console.error('✗ Test failed:', error);
      await page.screenshot({ path: './test-results/error-screenshot.png' });
      return false;
    } finally {
      await browser.close();
    }
  }
}
 
// テスト実行
const runner = new E2ETestRunner();
runner.testCheckoutFlow('https://example-ecommerce.com')
  .then((success) => process.exit(success ? 0 : 1));

// ⚠️ 動いているように見えて、実際には何も消えていない例
try {
  return await this.executeTask(task, decrypted);
} finally {
  // 文字列は不変。新しい Buffer を代入しても、元の文字列はヒープに残る
  decrypted.password = Buffer.alloc(decrypted.password.length, "\0");
}

type Secret = { user: string; password: Buffer };
 
class SecureAutomation {
  constructor(private vault: CredentialsManager) {}
 
  async runWithCredentials<T>(
    task: string,
    fn: (secret: Secret) => Promise<T>,
  ): Promise<T> {
    // 復号結果を文字列にせず、最初から Buffer で受け取る
    const secret = await this.vault.decryptToBuffer(task);
    try {
      return await fn(secret);
    } finally {
      // Buffer は可変。同じメモリ領域をゼロで塗り潰せる
      secret.password.fill(0);
    }
  }
}
 
// 使う側は Buffer のまま渡し、必要な瞬間だけ文字列化する
await automation.runWithCredentials("nightly-check", async (secret) => {
  await page.type("#password", secret.password.toString("utf8"));
  return page.click("#submit");
});

type AimdOptions = { initial: number; min: number; max: number; dec: number; rec: number };
 
async function fetchAllAdaptive(urls: string[], opt: AimdOptions) {
  let rate = opt.initial;          // 現在の送信レート（リクエスト/秒）
  let lastRecover = Date.now();
  let throttled = 0;
  const done: string[] = [];
  const queue = [...urls];
 
  while (queue.length > 0) {
    const res = await fetch(queue[0]);
 
    if (res.status === 429) {
      throttled++;
      // 乗算的減少：拒否されたら一気に引く
      rate = Math.max(opt.min, rate * opt.dec);
      lastRecover = Date.now();
      const wait = Number(res.headers.get("retry-after") ?? 1);
      await sleep(wait * 1000);    // Retry-After は必ず尊重する
      continue;                    // 同じ URL を再試行（キューから外さない）
    }
 
    done.push(await res.text());
    queue.shift();
 
    // 加算的増加：成功が続いたら少しずつ戻す
    const elapsed = (Date.now() - lastRecover) / 1000;
    if (elapsed >= 1) {
      rate = Math.min(opt.max, rate + opt.rec * elapsed);
      lastRecover = Date.now();
    }
    await sleep(1000 / rate);
  }
  return { done, throttled, finalRate: rate };
}

type ActionRisk = "read" | "mutate" | "irreversible";
 
// 操作の意図を三層に分類する
function classifyAction(action: { type: string; url: string }): ActionRisk {
  const irreversible = /\/(delete|cancel|withdraw|charge|pay|checkout)/i;
  const mutate = /(submit|post|put|update|create)/i;
 
  if (irreversible.test(action.url)) return "irreversible";
  if (mutate.test(action.type)) return "mutate";
  return "read";
}
 
// 分類に応じて自動承認するか、人間の確認を挟むかを決める
async function guard(
  action: { type: string; url: string },
  allowRules: Set<string>,
) {
  const risk = classifyAction(action);
  if (risk === "read") return true; // 読み取りは自動で通す
 
  const ruleName = `${risk}:${new URL(action.url).hostname}`;
  if (!allowRules.has(ruleName)) {
    // ソフト拒否。必要な allow ルール名を明示して人間に委ねる
    console.error(`[guard] blocked ${risk}. add allow rule: ${ruleName}`);
    return false;
  }
  return true;
}