Is There a Way for Playwright Tests to Include Additional Information in HTML Report After a Run?

I've found as the automation suite grows, typically you need a way to easily surface information to the testers or developers who are reviewing the test run reports. Thankfully the playwright team has given us this functionality within the @playwright/test runner.

There is an info() method that is available which gives access to annotations. With these combined it's really quite simple to add additional information along with your automation test. I've found it useful to document urls or notes to remind yourself or teammates while debugging playwright tests.

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

test.only("Click the Go Home Button", async ({ page }) => {
  test.info().annotations.push({
    type: "issue",
    description: "https://jira.com/BUG-1234",
  });

  await page.goto("https://letcode.in/buttons");
  await page.locator("button:has-text('Goto Home')").click();
  expect(page.url()).toBe("https://letcode.in/");
});

Within the html report output you will notice a new section Annotations, with the text we passed in.