When I have code like this, the text passed to the step function shows up in the Playwright trace viewer:

await test.step("Navigate to the blog home page and confirm it is loaded.", async () => {
    // etc.
  });

I want to have other logged information likewise show up in the traceviewer, just not steps. Maybe something like this:

await test.step("Navigate to the blog home page and confirm it is loaded.", async () => {
    test.log.info("some piece of information I want you to see in the trace viewer.");
  });

I cannot see anywhere in the Playwright documentation that explains how to do this.

When I have code like this, the text passed to the step function shows up in the Playwright trace viewer:

await test.step("Navigate to the blog home page and confirm it is loaded.", async () => {
    // etc.
  });

I want to have other logged information likewise show up in the traceviewer, just not steps. Maybe something like this:

await test.step("Navigate to the blog home page and confirm it is loaded.", async () => {
    test.log.info("some piece of information I want you to see in the trace viewer.");
  });

I cannot see anywhere in the Playwright documentation that explains how to do this.

• javascript
• playwright

2 Answers 2

You're probably looking for attachments, they're parts of Trace Viewer.

test("Example", async ({ page }) => {
  await test.step("1", async () => {
    test.info().attach("Account", { body: JSON.stringify({ user: "admin" }), contentType: "application/json" });
  });
});

Use simply console.log() for Trace Viewer Console tab

You can simply log information directly into the Trace Viewer using console.log().

These are displayed under console tab within the Trace Viewer.

 import { test, expect } from '@playwright/test';
    
    test('example test with logging', async ({ page}) => {
      await page.goto('https://example');
    
      // Log a message to the Trace Viewer Console tab
      console.log('Navigated to https://example');
    
      const title = await page.title();
      console.log(`Page title is: ${title}`);
    
      await expect(page).toHaveTitle('Example Domain');
    });

Or simply even have nested test.step statements with calculated values to view inline:

await test.step("First Level-> "+ `${1*1}`, async () => {
    await test.step("Second Level-> " + `${2*1}`, async () => {
    })
 })