How do I view console.log output in Playwright's --ui mode?

Answer

Sure, you can view console.log output in both the test runner console and attachment tab when running tests in UI mode with Playwright.

Actions Tab

In the Actions tab, you can see the locator used for each action and the time it took to execute. Hovering over each action lets you see the change in the DOM snapshot.

Console Tab

Click on the console tab to view console.log output. This displays the console logs for each action of your test. By clicking on an action, you can inspect and debug its corresponding console logs.

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

test('console log test', async ({ page }) => {
  await page.goto('https://ray.run/');
  console.log('Navigated to ray.run');
});

Log Tab

There's also a log tab. Clicking on this tab lets you see logs for each action of your test. This provides another way to access and analyze any relevant log information during test execution.

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

test('log test', async ({ page }) => {
  await page.goto('https://ray.run/');
  console.log('Navigated to ray.run');
});

Playwright's UI mode offers a comprehensive debugging experience with various tabs such as Actions, Metadata, Source, Console, Log, Network, Attachments, and more. These tabs allow you to explore different aspects of your tests and gather valuable information for debugging purposes.