Getting Started

Installation

npm i debug-playwright

Quick Start

import { DebugPlaywright } from 'debug-playwright';

test.beforeEach(({ page }) => {
  new DebugPlaywright({ page });
});

Configuration

This library defaults to using wezterm imgcat for printing images to the console. However, ou can globally set the command used to print images via the DP_IMG_CMD environment variable.

export DP_IMG_CMD=imgcat

Documentation

See the inline documentation src/index.ts for more comprehensive help.

Run Tests

npx playwright test

Run Tests in Headed Mode

npx playwright test --headed

Expected Output

HTML formatted as text

You'll need to have lynx installed if you'd like to view HTML formatted as text.

npx playwright test -g lynx

Running 1 test using 1 worker
[chromium] › example.spec.ts:16:1 › 2xx lynx
➕ adding listener
🆕 requesting https://example.com/
💖 200 GET  https://example.com/ text/html; charset=UTF-8
✋ closed https://example.com/
Example Domain

   This domain is for use in illustrative examples in documents. You may
   use this domain in literature without prior coordination or asking for
   permission.

   [1]More information...

References

   1. https://www.iana.org/domains/example

  1 passed (1.9s)

To open last HTML report run:

  npx playwright show-report

Usage

import { DebugPlaywright } from 'debug-playwright';

Default

Run debugging with the defaults. Requires you to be running inside wezterm but not inside tmux.

const dp = new DebugPlaywright({ page });

Configure

const dp = new DebugPlaywright({ page });

// take full page screenshots
dp.fullPage = true;

// or, turn off automatic screenshots
dp.screenshots = false;

// dump lynx output
dp.formattedContent = true;

// print a screenshot on demand
await dp.printScreenshot();

Attach to a BrowserContext

context.on('page', (p) => {
  new DebugPlaywright({ page: p});
});

Debug on Every Test in File

Default beforeEach Handler

import { test } from '@playwright/test';
import { beforeEachHandler } from 'debug-playwright';

test.beforeEach(beforeEachHandler());

Custom beforeEach Handler

Pleas note:

• testinfo is also available if you need it
• mark the function as async if there's anything you need to await

test.beforeEach(({ page }) => {
  new DebugPlaywright({page});
});

Default afterEach Handler

import { test } from '@playwright/test';
import { afterEachHandler } from 'debug-playwright';

test.afterEach(afterEachHandler());

Custom afterEach Handler

Print Screenshot on Failure

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status === 'failed') {
    await new DebugPlaywright({ page, listen: false }).printScreenshot();
  }
});

Print Animated GIF of Screen Recording, if a Recording Exists

test.afterEach(async ({ context, page }, testInfo) => {
  const dp = new DebugPlaywright({ page, listen: false });
  // ensure video file has been written to disk. otherwise it might just be a
  // zero byte file
  await context.close();

  const gifPath = await maybeConvertMovie(page, testInfo);
  if (gifPath) {
    dp.printImage(gifPath);
  }
});

Screenshots

If your full page screenshots are hard to read (e.g. a navbar is clobbering content in the middle of the page), try increasing the height of the viewport to the maximum that makes sense for your monitor.

await page.setViewportSize({
  width: 1200,
  height: 2000,
});

lynx

To get a screen dump of every page as lynx sees it:

const dp = new DebugPlaywright({
    page: page,
    listen: true,
    screenshots: false,
    formattedContent: true,
});

Utility Functions

maybeConvertMovie

This function converts the video of a test to a GIF if it exists.

import { maybeConvertMovie } from 'debug-playwright';

const gifPath = await maybeConvertMovie(page, testInfo);
if (gifPath) {
  console.log(`GIF created at: ${gifPath}`);
}

movieToGIF

This function converts a movie to a GIF using ffmpeg. Set fullPage: false if your movie does not have a consistent screen size.

import { movieToGIF } from 'debug-playwright';

const template = 'ffmpeg -i {video} -vf "setpts=4.0*PTS,scale=1200:-1" {gif}';
const success = movieToGIF(template, 'path/to/video.mp4', 'path/to/output.gif');
if (success) {
  console.log('GIF conversion successful');
} else {
  console.log('GIF conversion failed');
}