Playwrightのテストでブラウザのコンソールに表示されるメッセージをターミナルに表示する

はじめに

CIなどでheadlessでテストを実行している場合に、ブラウザのコンソールに表示されるメッセージを確認する方法です。

サンプルコード

以下のように 'console' イベントをリスニングします。

import { test, expect } from '@playwright/test';

test('コンソールログをキャプチャする', async ({ page }) => {
  // console イベントのリスニングを開始
  page.on('console', (msg) => {
    // コンソールメッセージをターミナルに表示
    console.log(`msg.type(): ${msg.type()}`);
    console.log(`msg.text(): ${msg.text()}`);
    console.log(`msg.args(): ${msg.args()}`);
    console.log(`msg.location(): ${msg.location()}`);
  });

  // テスト実行
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle('Example');
});