How to log information in Playwright so that it shows up in trace viewer similar to test.step?

Question

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.

Answer 1

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" });
  });
});

Answer 2

You may simply 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 () => {
    })
 })