複数ページの巡回とデータの保存

Playwrightにおける「複数ページの巡回とデータの保存」は、ウェブサイトの複数のページ（たとえば商品一覧の複数ページ）を自動的に移動しながら、各ページの必要な情報を収集し、最終的にファイルやデータベースへ保存する一連の処理を指します。以下にその具体的な構成と実装のポイントを詳述します。

---

1. 基本的な構成要素

• ナビゲーション制御：ページ送りやリンククリックによる巡回

• データ抽出：必要な情報（例：タイトル、価格など）の取得

• ループ処理：複数ページに対応するための繰り返し処理

• データ保存：抽出結果をCSVやJSONファイル、あるいはデータベースへ保存

---

2. サンプルフロー（例：商品一覧ページのスクレイピング）

javascript
const { chromium } = require('playwright');
const fs = require('fs');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  const results = [];

  // 初期ページにアクセス
  await page.goto('https://example.com/products?page=1');

  while (true) {
    // 現在のページからデータ抽出
    const items = await page.$$eval('.product-item', nodes => {
      return nodes.map(node => ({
        title: node.querySelector('.title')?.innerText ?? '',
        price: node.querySelector('.price')?.innerText ?? ''
      }));
    });
    results.push(...items);

    // 「次へ」ボタンがあるか確認
    const nextButton = await page.$('a.next');
    if (!nextButton) break;

    // 次のページへ移動
    await Promise.all([
      page.waitForNavigation(),
      nextButton.click()
    ]);
  }

  // データを保存（JSON形式）
  fs.writeFileSync('products.json', JSON.stringify(results, null, 2));

  await browser.close();
})();

---

3. 解説と注意点

ナビゲーションとループ

• while(true) ループで次のページが存在する限り処理を続けます。

• page.waitForNavigation() と click() は Promise.all で並列実行して確実に遷移を待機します。

データ抽出

• page.$$eval を用いて、複数のDOM要素から一括してデータを取得できます。

• セレクターが存在しないケースに備えてオプショナルチェーン（?.）を利用します。

データ保存

• ファイル形式はCSV、JSON、またはSQL等に対応可能です。

• fs.writeFileSync による同期書き込みでシンプルに保存できます。

---

4. 応用事項

• ページ数が固定されている場合は for (let i = 1; i <= totalPages; i++) のようにループ構造を明示できます。

• 例外処理として try/catch を活用し、途中でエラーが起きてもログを残す設計が望ましいです。

• データの重複チェックや ページキャッシュ制御も実用段階では考慮すべき点です。

---

5. よくある課題と対策