Back to Course
Course Contents
Intermediate Chapter 9 · 6 min read

Screenshots & Reports

Capture screenshots during tests, save PNG or JPEG files, and generate interactive HTML test reports.

Capturing Screenshots

Call screen.screenshot() at any point in a test to capture the device screen. It returns a Buffer with the image data, and if you pass a path, the file is saved for you (directories are created automatically):

screenshots.test.ts 
import { test } from '@mobilewright/test';

test('capture the home screen', async ({ screen }) => {
  // Capture into a Buffer
  const buffer = await screen.screenshot();
  console.log(`Screenshot size: ${buffer.length} bytes`);

  // Save as PNG (directories are created automatically)
  await screen.screenshot({ path: 'screenshots/home.png' });

  // Save as compressed JPEG
  await screen.screenshot({
    path: 'screenshots/home.jpg',
    format: 'jpeg',
    quality: 80,
  });
});
screenshots.test.js 
const { test } = require('@mobilewright/test');

test('capture the home screen', async ({ screen }) => {
  // Capture into a Buffer
  const buffer = await screen.screenshot();
  console.log(`Screenshot size: ${buffer.length} bytes`);

  // Save as PNG (directories are created automatically)
  await screen.screenshot({ path: 'screenshots/home.png' });

  // Save as compressed JPEG
  await screen.screenshot({
    path: 'screenshots/home.jpg',
    format: 'jpeg',
    quality: 80,
  });
});

Screenshot Options

OptionTypeDescription
pathstringFile path to save the screenshot to
format'png' | 'jpeg'Image format, default 'png'
qualitynumberJPEG quality 0–100 (jpeg only)
Tip: You don't have to screenshot failures yourself — the screen fixture already attaches a failure screenshot and video to the report automatically.

HTML Test Reports

Mobilewright ships with several reporters: list (default terminal output), html, json, and junit. The HTML report is interactive — you can filter results, inspect errors, and view the screenshots and videos captured during the run:

Terminal 
# Run with the interactive HTML reporter
npx mobilewright test --reporter html

# Open the report at localhost:9323
npx mobilewright show-report

The report opens at localhost:9323. You can also make HTML the permanent default in your config:

mobilewright.config.ts 
import { defineConfig } from 'mobilewright';

export default defineConfig({
  reporter: 'html',
  viewTree: 'on-failure', // attach the accessibility tree on failure
});
mobilewright.config.js 
const { defineConfig } = require('mobilewright');

module.exports = defineConfig({
  reporter: 'html',
  viewTree: 'on-failure', // attach the accessibility tree on failure
});

Set viewTree: 'on-failure' and the accessibility tree of the screen is attached to the report whenever a test fails — extremely handy for figuring out why a locator did not match.

Mobilewright Intermediate Screenshots Reports

Written by PV

© 2026 All Rights Reserved