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

Answer

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.