playwright-scraper

playwright-scraper

目的

このスキルでは、ブラウザー自動化のための Node.js ライブラリである Playwright を使用して、Web スクレイピングを行います。動的コンテンツ、認証フロー、ページネーション、データ抽出、スクリーンショットに対応し、最新の Web サイトを確実にスクレイピングすることに重点を置いています。

使用するタイミング

JavaScript でレンダリングされるコンテンツを含むサイト（例：React や Angular のアプリ）、ログインが必要なサイト（例：ダッシュボード）、複数ページにわたる結果（例：検索結果）の処理、または視覚データの取得（例：検証用のスクリーンショット撮影）には、このスキルを使用します。よりシンプルなツール（requests など）で十分な静的 HTML サイトには使用しないでください。

主な機能

• Playwright のブラウザー制御を使用して、コンテンツを動的に読み込み、操作します。
• フォームや API トークンによるログインなど、認証フローを管理します。
• ページ間を移動する、「次へ」ボタンをクリックする、URL を解析するなどの方法で、ページネーションに対応します。
• セレクターを使用してデータを抽出し、JSON 形式での出力やファイルへの保存も行えます。
• デバッグやレポート作成用に、スクリーンショットやページ全体の PDF を取得します。
• 柔軟に利用できるよう、ヘッドレスモードと画面表示モードのブラウザーに対応しています。

使用パターン

まずブラウザーコンテキストを初期化し、その後、ページを作成して移動します。信頼性を高めるため、非同期パターンを使用してください。認証が必要なスクレイピングでは、コンテキストごとに Cookie またはセッションを処理します。ページネーションでは、ページをループするスクリプトを構成し、不安定な要素には try-catch を使用します。再利用しやすいように、設定は JSON ファイルまたは環境変数で渡してください。

主なコマンド／API

Playwright の Node.js API を使用します。npm install playwright でインストールします。主なメソッドは次のとおりです。

• ブラウザーを起動：const browser = await playwright.chromium.launch({ headless: true });
• ページに移動：const page = await browser.newPage(); await page.goto('https://example.com');
• 認証を処理：await page.fill('#username', process.env.USERNAME); await page.fill('#password', process.env.PASSWORD); await page.click('#login');
• データを抽出：const data = await page.evaluate(() => document.querySelector('#target').innerText); console.log(data);
• ページネーション：while (await page.$('#next-button')) { await page.click('#next-button'); await page.waitForSelector('.item'); }
• スクリーンショットを撮影：await page.screenshot({ path: 'screenshot.png' }); スクリプトの実行には CLI フラグを使用します。npx playwright test を使用し、画面表示モードには --headed、待機時間を延長するには --timeout 30000 などのフラグを指定します。

統合に関する注意事項

Node.js プロジェクトで Playwright をインポートして統合します。認証には、値をハードコードしないよう、$PLAYWRIGHT_USERNAME や $PLAYWRIGHT_PASSWORD などの環境変数を使用してください。設定形式：設定には、例として { "url": "https://target.com", "selector": "#data-element" } のような JSON ファイルを使用します。スクリプト引数として渡します：node scraper.js --config config.json。より大規模なシステムでは、Puppeteer などのツールと連携（移行時）するか、page.evaluate の結果をデータベースにエクスポートします。Node.js 14 以降との互換性を確保し、browser.launch({ proxy: { server: 'http://myproxy.com:8080' } }) でプロキシ設定を処理してください。

エラー処理

動的読み込み時のタイムアウトやセレクターの失敗など、よくあるエラーを想定してください。タイムアウトを指定して page.waitForSelector を使用します：await page.waitForSelector('#element', { timeout: 10000 }).catch(err => console.error('Element not found:', err));。ネットワークの問題が発生した場合は、page.goto を try-catch で囲みます：try { await page.goto(url, { waitUntil: 'networkidle' }); } catch (e) { console.error('Navigation failed:', e.message); await browser.close(); }。エラー要素を確認して、認証の失敗を処理します：if (await page.$('#error-message')) { throw new Error('Login failed'); }。詳細を含めてエラーをログに記録し、ループを使用して最大 3 回まで再試行します。

具体的な使用例

1. ログイン済みのダッシュボードをスクレイピングする： まず、環境変数を設定します：export PLAYWRIGHT_USERNAME='[email protected]' および export PLAYWRIGHT_PASSWORD='securepass'。次に、実行します：const browser = await playwright.chromium.launch(); const page = await browser.newPage(); await page.goto('https://dashboard.com/login'); await page.fill('#username', process.env.PLAYWRIGHT_USERNAME); await page.fill('#password', process.env.PLAYWRIGHT_PASSWORD); await page.click('#submit'); const data = await page.evaluate(() => document.querySelector('#dashboard-data').innerText); console.log(data); await browser.close(); これにより、保護されたページからデータを抽出します。
2. 検索サイトでページネーションを処理する： スクリプト：const browser = await playwright.chromium.launch(); const page = await browser.newPage(); await page.goto('https://search.com?q=query'); let items = []; while (true) { items.push(...await page.$$eval('.result-item', elements => elements.map(el => el.innerText))); const nextButton = await page.$('#next-page'); if (!nextButton) break; await nextButton.click(); await page.waitForTimeout(2000); } console.log(items); await browser.close(); これにより、複数のページにわたる検索結果を収集します。

グラフの関係

• 関連： "selenium-automation"（代替のブラウザー自動化ツール）
• 依存： "node-runtime"（Playwright の実行に必要）
• 補完： "data-extraction"（スクレイピングしたデータの後処理に使用）
• クラスター内： "community"（他のオープンソースツールと共有）