playwright-reporter-setup

name	playwright-reporter-setup
description	Use when configuring the executable-stories-playwright custom reporter: wiring the playwright.config.ts reporter array, or output format/directory/naming and aggregated vs. colocated modes.
type	core
library	executable-stories-playwright
library_version	8.5.7
sources	["jagreehal/executable-stories:packages/executable-stories-playwright/src/reporter.ts"]

executable-stories-playwright — Reporter Setup

Setup

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  reporter: [
    ["html"],
    [
      "executable-stories-playwright/reporter",
      {
        formats: ["markdown", "html"],
        outputDir: "docs",
        outputName: "user-stories",
      },
    ],
  ],
});

executable-stories-formatters is a bundled dependency (installed automatically with executable-stories-playwright).

Core Patterns

Minimal config

export default defineConfig({
  reporter: [
    ["html"],
    ["executable-stories-playwright/reporter", { formats: ["markdown"] }],
  ],
});

Full options

export default defineConfig({
  reporter: [
    ["html"],
    [
      "executable-stories-playwright/reporter",
      {
        formats: ["markdown", "html", "junit", "cucumber-json"],
        outputDir: "reports",
        outputName: "test-results",
        output: {
          mode: "aggregated",
        },
        markdown: {
          title: "User Stories",
          includeStatusIcons: true,
          includeErrors: true,
          includeMetadata: true,
          sortScenarios: "source",
        },
        html: {
          title: "Test Report",
          syntaxHighlighting: true,
          mermaidEnabled: true,
        },
        rawRunPath: "reports/raw-run.json",
      },
    ],
  ],
});

Annotation-based metadata

The reporter reads story metadata from test annotations with type: "story-meta". This is handled automatically when using story.init(testInfo) — no manual annotation is needed.

Common Mistakes

HIGH Using default export syntax incorrectly

Wrong:

import StoryReporter from "executable-stories-playwright/reporter";

export default defineConfig({
  reporter: [
    ["html"],
    [new StoryReporter({ formats: ["markdown"] })],
  ],
});

Correct:

export default defineConfig({
  reporter: [
    ["html"],
    [
      "executable-stories-playwright/reporter",
      { formats: ["markdown"] },
    ],
  ],
});

Playwright's reporter config expects a string path and options object tuple, not a class instance. Playwright instantiates the reporter itself from the path.

Source: packages/executable-stories-playwright/src/reporter.ts

MEDIUM Default format is html, not markdown

The default formats is ["html"]. Always specify formats: ["markdown"] explicitly to get readable markdown output.

Source: packages/executable-stories-playwright/src/reporter.ts