Skip to main content

Playwright Logger Pro

playwright-logger-pro on npm

Playwright Logger Pro makes the output of your Playwright tests readable when something goes wrong. It adds two loggers to the test you already use:

  • API logging prints one line for every request.get/post/put/patch/delete/head/fetch call, and a detail block (with a curl that replays the request) under the ones that failed. See Compact output.
  • Browser logging records what a test did in the page (clicks, fills, navigations, console messages, page errors, dialogs, downloads, test.step boundaries). It stays quiet while the test passes, and prints one timeline and attaches it to the report when the test fails.

Secrets are masked in both: authorization headers, cookies, token-like query parameters and password fields never reach your logs by default.

API logging: one line per call, detail where a test failed

Running 3 tests using 1 worker

  ✓  1 [chromium] › cart.spec.ts:8:5 › adds product to cart (1.2s)
    GET    200  https://api.shop.test/v1/products?page=2&limit=20            148ms
    POST   201  https://api.shop.test/v1/cart/items                           86ms
    PUT    200  https://api.shop.test/v1/cart/items/42                        95ms
  ✘  2 [chromium] › checkout.spec.ts:21:5 › places an order (2.4s)
    GET    404  https://api.shop.test/v1/orders/99999                         70ms
    │ ← 404 Not Found  {"error":"order not found"}
    POST   500  https://api.shop.test/v1/checkout?token=***&currency=EUR   ▲ 1.83s
    │ ← 500 Internal Server Error  {"error":"payment gateway timeout"}
    │
    │ curl -X POST 'https://api.shop.test/v1/checkout?token=***&currency=EUR' \
    │   -H 'Authorization: ***' \
    │   -H 'Content-Type: application/json' \
    │   --data-raw '{"cartId":"c_812","cardToken":"***"}'
    │
    │ ↳ replay: curl.sh attached to the HTML report
  ✓  3 [chromium] › profile.spec.ts:14:5 › updates profile and clears sessions (653ms)
    PATCH  204  https://api.shop.test/v1/users/7                              65ms
    DELETE 204  https://api.shop.test/v1/sessions/old                         44ms
    GET    304  https://cdn.shop.test/assets/catalog.json                     10ms

  1 failed
    [chromium] › checkout.spec.ts:21:5 › places an order
  2 passed (5.4s)
  8 requests · 2 errors · 1 slow ≥1s

Register the reporter after list: reporter: [['list'], ['playwright-logger-pro/reporter']]. The 0.3 line-by-line output is still there as apiLog: { format: 'verbose' }.

Quick start (2 minutes)​

npm i -D playwright-logger-pro

You need @playwright/test 1.30 or newer (a peer dependency you already have) and Node.js 18 or newer.

Then change the import of test and expect in your spec files:

tests/vegetables.spec.ts
import { test, expect } from 'playwright-logger-pro/fixtures';

test('create vegetable', async ({ request, page }) => {
  const res = await request.post('/vegetables', { data: { name: 'Orange', price: 1 } });
  expect(res.status()).toBe(201);

  await page.goto('/vegetables');
  await expect(page.getByText('Orange')).toBeVisible();
});

Run your tests as usual:

npx playwright test

The request is logged live, with colours, as in the sample above. Nothing is printed for the browser part while the test passes. If the test fails, you get the browser timeline once:

Browser logging: the failure block (also attached as browser-log)
── browser log · login.spec.ts › rejects a wrong password · failed ──
+0.874s  page#1 opened
+0.878s  ✓ page.goto('/login')  103ms
+0.983s  ▸ Log in
+0.986s  │ ✓ getByLabel('Email').fill('jo@example.com')  78ms
+1.065s  │ ✓ getByLabel('Password').fill(***)  19ms
+1.085s  │ ✓ getByRole('button', { name: 'Sign in' }).click()  54ms
+1.139s  ⚠ console.error  Failed to load resource: the server responded with a status of 401 (Unauthorized)  (session:0)
+1.139s  ◂ Log in  passed  156ms
+1.140s  ✗ locator('.toast-success').click({ timeout: 1500 })  1501ms  TimeoutError: frame.click: Timeout 1500ms exceeded.
+2.653s  page#1 closed

What you get by default​

Default
API loggingOn, compact. One line per call; the response body and, for a 5xx or a network error (curl: '5xx'), the curl appear under the failed calls of a failed test. apiLog: { format: 'verbose' } prints everything live, as in 0.3. See From 0.3 to 0.4.
Browser loggingOn, quiet. The timeline is printed and attached to the report only when a test fails.
ColoursOn under playwright test (it sets FORCE_COLOR for its workers). NO_COLOR turns them off. Files and attachments are always plain text.
RedactionOn. See Redaction & security.

How it works​

  • The drop-in test from playwright-logger-pro/fixtures wraps the built-in request fixture, so existing request.* calls are logged without changes.
  • Browser actions are recorded by instrumenting the public async methods of Playwright's classes once per worker, on the prototypes. Your objects are never wrapped, so page, locator and expect(locator) behave exactly as before.
  • Only passive listeners are added (console, page errors, navigation, popups, downloads, and requests when you opt in to network).
  • The logger never fails a test because of its own error. A bad option gets a one-time [playwright-logger-pro] warning and falls back to the default.

Next steps​