コンソール出力やネットワークログの取得

Playwrightにおいて、コンソール出力やネットワークログの取得は、ブラウザ内の動作をデバッグしたり、通信状況を把握する上で非常に重要です。以下にそれぞれの取得方法について詳しく説明します。

---

1. コンソール出力の取得（console イベント）

Playwrightでは、ブラウザページ上のconsole.logやconsole.errorなどの出力を監視・取得することが可能です。

実装例

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // コンソールイベントのリスナーを設定
  page.on('console', msg => {
    console.log(`コンソール出力: [${msg.type()}] ${msg.text()}`);
  });

  await page.goto('https://example.com');

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

解説

• page.on('console', callback) によって、ブラウザ内のコンソール出力（log, error, warn, info, など）を受信可能です。

• msg.type()：出力タイプ（例: log, error）

• msg.text()：実際の出力内容

---

2. ネットワークログの取得（リクエスト・レスポンス）

Playwrightでは、ブラウザから発生するHTTPリクエストとそのレスポンスを取得することができます。

実装例

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

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  // リクエストを監視
  page.on('request', request => {
    console.log(`リクエスト: ${request.method()} ${request.url()}`);
  });

  // レスポンスを監視
  page.on('response', response => {
    console.log(`レスポンス: ${response.status()} ${response.url()}`);
  });

  await page.goto('https://example.com');

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

解説

• page.on('request', callback)：HTTPリクエスト送信時に呼び出される

• request.method()：HTTPメソッド（例: GET, POST）

• request.url()：アクセス先URL

• page.on('response', callback)：HTTPレスポンス受信時に呼び出される

• response.status()：HTTPステータスコード（例: 200, 404）

• response.url()：応答元URL

---

3. その他補足

• JSONボディの取得やレスポンスヘッダの取得も可能です（response.json(), response.headers()）。

• 開発者ツールのように、すべてのネットワークトラフィックを記録して分析することができます。

---

まとめ

これらの機能を活用することで、ブラウザの動作を詳細に監視し、高度なデバッグやE2Eテストの支援が可能になります。