Playwright fixture

The annot-playwright package re-exports @playwright/test’s test extended with the annotator fixture:

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

Use it in place of import { test, expect } from "@playwright/test" and existing tests keep working.

annotator fixture

test("…", async ({ page, annotator }) => {
  await annotator.annotateScreenshot(page, {
    annotationsSvg: "<rect x='0' y='0' width='200' height='40' …/>",
  });
});

annotateScreenshot(page, options)

interface AnnotateScreenshotOptions {
  /** SVG fragment to overlay. Coordinate space is the screenshot's pixel size. */
  annotationsSvg: string;

  /**
   * Passed through to `page.screenshot()`. The annotator reads
   * the resulting PNG's IHDR chunk to compute dimensions, so both
   * full-page (`fullPage: true`) and clipped captures work
   * without manual sizing.
   */
  screenshot?: Parameters<typeof page.screenshot>[0];
}

annotator.annotateScreenshot(
  page: Page,
  options: AnnotateScreenshotOptions,
): Promise<Buffer>;

Captures the page, overlays the annotation SVG, and returns the annotated PNG as a Buffer. The screenshot capture is dimension-aware — read out of the IHDR chunk — so clipped and full-page captures both produce correctly-sized output.

Attaching to the report

test("login form is reachable", async ({ page, annotator }, testInfo) => {
  await page.goto("https://example.com");

  const annotated = await annotator.annotateScreenshot(page, {
    annotationsSvg: "<rect x='0' y='0' width='200' height='40' …/>",
  });

  await testInfo.attach("login-form.png", {
    body: annotated,
    contentType: "image/png",
  });
});

The annotated PNG appears inline next to the test step in the Playwright HTML report.

Re-exports

For convenience, the package re-exports everything you’d normally pull from @playwright/test:

import {
  test,
  expect,
  type Page,
  type Locator,
} from "@ingcreators/annot-playwright";

This keeps your test files single-import.

Why peerDependencies

@playwright/test is declared as a peer dep, not a direct dependency. This avoids pulling a second copy of Playwright into your node_modules and keeps the test identity equal so fixture composition (test.extend({ … })) layers correctly.

Install Playwright yourself:

npm install --save-dev @playwright/test