🎯 Playwright Logger — Human-friendly Test Reporter & Logger

Clean, compact, professional terminal reporting for Playwright runs.
Compact runtime lines + single, well-formatted FINAL SUMMARY. No AI dependency — simple, fast, CI-friendly.

---

Highlights

• ✅ Compact one-line per-test runtime output for fast scanning
• ✅ Single FINAL SUMMARY block with totals and failure details (message, short stack excerpt, attachments, locator)
• 🔎 Locator extraction from step titles and attachments (css, xpath, text, id, role)
• ⚙️ Configurable via playwright.config.ts and environment variables
• 📄 Optional JSON summary (summary.json) for CI dashboards
• 🧭 Timezone-aware timestamps, TTY-aware color output, and plain-text fallback for CI
• 🔐 Small, defensive TypeScript code with explicit types

---

Install

npm install --save-dev @hexdee606/playwright-logger
# or
yarn add -D @hexdee606/playwright-logger

Use the compiled dist reporter in CI. For local development you may point Playwright to the .ts source if you compile on the fly.

---

Quick usage (playwright.config.ts)

import { defineConfig } from '@playwright/test';
import path from 'path';

export default defineConfig({
  reporter: [
    ['list'],
    [@hexdee606/playwright-logger, {
      verbosity: 1,                 // 0 | 1 | 2
      timezone: 'Asia/Kolkata',
      jsonPath: './reports/summary.json',
      printErrorsImmediate: false  // true prints full error blocks during the run
    }]
  ],
});

---

Reporter options

You can configure either in playwright.config.ts or via environment variables. Config options take precedence over env vars.

Config object (in playwright.config.ts)

Key	Type	Default	Description
verbosity	0 | 1 | 2	1	0 = minimal, 1 = standard, 2 = verbose (shows steps)
timezone	string	Asia/Kolkata	IANA timezone for timestamps
jsonPath	string | null	null	Optional path to write a JSON summary
printErrorsImmediate	boolean	false	Print full error blocks inline during run (legacy)

Environment variables (fallback)

Env	Effect
PLAYWRIGHT_REPORTER_VERBOSITY	Override verbosity (0	1	2)
PLAYWRIGHT_REPORTER_TIMEZONE	Override timezone
PLAYWRIGHT_REPORTER_JSON	Path to JSON summary file
PLAYWRIGHT_REPORTER_PRINT_ERRORS_IMMEDIATE	1 to print errors immediately

---

Locator extraction behavior

The reporter tries to show a locator for steps and failures using this priority:

1. Step attachments named locator, selector, sel — reporter reads and parses body.
2. Parsed from step title — recognizes Playwright's [selector: ...] as well as css=..., xpath=..., quoted selectors, simple CSS candidates.
3. Fallback — no locator shown.

This strategy makes the reporter compatible with plain Playwright steps and many BDD runners (Cucumber, Mocha wrappers) where selectors are included in step text or attachments.

---

Fixture guidance (optional) — capture runtime locators

For guaranteed runtime selectors (especially useful for Cucumber and custom runners), add an optional fixture patch that:

• monkey-patches page.locator() to record selectors used at runtime (non-breaking)
• exposes log.recordLocator(selector) for step code to call explicitly
• attaches a locators.txt file at test teardown for post-mortem

Pseudo example to include in your fixtures.ts:

// inside your log fixture (pseudo)
const locatorCalls: Array<{ selector: string; ts: number }> = [];
const originalLocator = page.locator.bind(page);
(page as any).locator = function patchedLocator(selector: any, ...args: any[]) {
  try {
    const sel = typeof selector === 'string' ? selector : String(selector);
    locatorCalls.push({ selector: sel, ts: Date.now() });
  } catch {}
  return originalLocator(selector, ...args);
};

// expose helper for step code (useful for Cucumber)
(logger as any).recordLocator = (selector: string) => locatorCalls.push({ selector, ts: Date.now() });

// on teardown attach locators file
if (locatorCalls.length) {
  const file = path.join(outDir, `locators-${Date.now()}.txt`);
  fs.writeFileSync(file, locatorCalls.map(c => `${new Date(c.ts).toISOString()} ${c.selector}`).join('\n'), 'utf8');
  await testInfo.attach('locators.txt', { path: file, contentType: 'text/plain' });
}

The fixture is optional — reporter already parses selectors from step titles and attachments.

---

Example terminal output

During run (compact):

[*] 2025-11-20T12:25:31 Run started | Playwright: v1.56.1 | Projects: 1 | Tests: 2
RUN     sample test - pass [suit1] (sample.spec.ts:3)
✓ sample test - pass (2621ms)
RUN     sample test - failed [suit1] (sample.spec.ts:8)
✖ sample test - failed (2837ms)

Final summary:

────────────────────────────────────────────────────────────
FINAL SUMMARY | Status: failed | Total run time: 7s
Totals — total: 2   passed: 1   failed: 1   skipped: 0   timedOut: 0   interrupted: 0

Failures (1):
1. sample test - failed [failed] (2837ms)  locator=css=div.header (css)
   → Error: expect(received).toContain(expected) // indexOf
     Expected substring: "Facebook – log in or sign up"
     Received string:    "X. It’s what’s happening / X"
     at test/tests/sample.spec.ts:10:32
     Attachment: screenshot (test/outputs/...png)
────────────────────────────────────────────────────────────

---

JSON summary format (example)

If jsonPath is set, the reporter writes:

{
  "status": "failed",
  "startTime": "2025-11-20T12:25:31.000Z",
  "duration": 7019,
  "totals": { "total": 2, "passed": 1, "failed": 1, "skipped": 0, "timedOut": 0, "interrupted": 0 },
  "failures": [
    {
      "title": "sample test - failed",
      "status": "failed",
      "message": "...",
      "stack": "...",
      "locator": "css=div.header",
      "locatorType": "css",
      "attachments": [{ "name": "screenshot", "path": "..." }]
    }
  ],
  "tests": [ /* per-test summaries */ ]
}

---

Troubleshooting

• No logs appear — ensure playwright.config.ts includes this reporter and path is correct.
• Reporter not loaded — ensure reporter path in reporter array points to file/module exported as default.
• Selectors missing — add optional fixture monkey-patch or call log.recordLocator(selector) from step code.
• Colors broken in CI — color is TTY-aware; non-TTY output will be plain text but still structured.

---

Contributing & Tests

• Fork → branch → PR. Include unit tests for locator parsing helpers (parseLocatorFromString) and reporter hooks.
• Build TypeScript to dist for CI.
• Tests should mock Playwright reporter hooks (onTestEnd, onStepEnd) and assert console output and produced JSON summary.

---

Changelog

See CHANGELOG.md in the repo.

---

License & Author

MIT — Dipen Chavan (hexdee606) GitHub: https://github.com/hexdee606