How do I configure Playwright to automatically capture screenshots on test failures?


To automatically capture screenshots on test failures in @playwright/test, you can configure Jest with Playwright's expect library. This allows Jest to handle screenshot capturing when a test fails.

First, create a jest.config.js file in your project's root directory and add the following configuration:

module.exports = {
  preset: 'jest-playwright-preset',
  globals: {
    'playwright': require('playwright'),
  reporters: [
    ['jest-screenshot', {
      "captureDirectory": "./screenshots",
      "format": "{testName}-{browserName}.png",
      "captureOnFailure": true,
      "captureConsoleOutput": true,

This configuration sets up Jest with Playwright's expect library and specifies the following options:

  • captureDirectory: The directory where screenshots will be saved (default: ./screenshots). Ensure this directory exists before running tests.
  • format: The name format for screenshots (default: {testName}-{browserName}-{viewport}.png).
  • captureOnFailure: Whether to capture screenshots on every failure (default: false, only captures first failure).
  • captureConsoleOutput: Whether to capture console output in addition to screenshots (default: false).

With this configuration, Jest will automatically capture a screenshot of the browser window at the time of failure and save it in the specified directory with a filename based on your chosen format.

Now, when you run your tests, you'll have screenshots saved for each failed test, making it easier to debug and understand the exact error in the browser.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.