Reporters
#
Using reportersPlaywright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. The easiest way to try out built-in reporters is to pass --reporter
command line option.
npx playwright test --reporter=line
For more control, you can specify reporters programmatically in the configuration file.
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: 'line',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: 'line',};
module.exports = config;
#
Multiple reportersYou can use multiple reporters at the same time. For example you can use'list'
for nice terminal output and 'json'
to get a comprehensive json file with the test results.
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: [ ['list'], ['json', { outputFile: 'test-results.json' }] ],};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: [ ['list'], ['json', { outputFile: 'test-results.json' }] ],};
module.exports = config;
#
Reporters on CIYou can use different reporters locally and on CI. For example, using concise 'dot'
reporter avoids too much output.
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { // Concise 'dot' for CI, default 'list' when running locally reporter: process.env.CI ? 'dot' : 'list',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { // Concise 'dot' for CI, default 'list' when running locally reporter: process.env.CI ? 'dot' : 'list',};
module.exports = config;
#
Built-in reportersAll built-in reporters show detailed information about failures, and mostly differ in verbosity for successful runs.
#
List reporterList reporter is default. It prints a line for each test being run.
npx playwright test --reporter=list
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: 'list',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: 'list',};
module.exports = config;
Here is an example output in the middle of a test run. Failures will be listed at the end.
npx playwright test --reporter=listRunning 124 tests using 6 workers
โ should access error in env (438ms) โ handle long test names (515ms) x 1) render expected (691ms) โ should timeout (932ms) should repeat each: โ should respect enclosing .gitignore (569ms) should teardown env after timeout: should respect excluded tests: โ should handle env beforeEach error (638ms) should respect enclosing .gitignore:
#
Line reporterLine reporter is more concise than the list reporter. It uses a single line to report last finished test, and prints failures when they occur. Line reporter is useful for large test suites where it shows the progress but does not spam the output by listing all the tests.
npx playwright test --reporter=line
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: 'line',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: 'line',};
module.exports = config;
Here is an example output in the middle of a test run. Failures are reported inline.
npx playwright test --reporter=lineRunning 124 tests using 6 workers 1) dot-reporter.spec.ts:20:1 โบ render expected ===================================================
Error: expect(received).toBe(expected) // Object.is equality
Expected: 1 Received: 0
[23/124] gitignore.spec.ts - should respect nested .gitignore
#
Dot reporterDot reporter is very concise - it only produces a single character per successful test run. It is useful on CI where you don't want a lot of output.
npx playwright test --reporter=dot
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: 'dot',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: 'dot',};
module.exports = config;
Here is an example output in the middle of a test run. Failures will be listed at the end.
npx playwright test --reporter=dotRunning 124 tests using 6 workersยทยทยทยทยทยทFยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยทยท
#
JSON reporterJSON reporter produces an object with all information about the test run. It is usually used together with some terminal reporter like dot
or line
.
Most likely you want to write the JSON to a file. When running with --reporter=json
, use PLAYWRIGHT_JSON_OUTPUT_NAME
environment variable:
# Linux/macOSPLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json,dot
# Windows with cmd.exeset PLAYWRIGHT_JSON_OUTPUT_NAME=results.jsonnpx playwright test --reporter=json,dot
# Windows with PowerShell$env:PLAYWRIGHT_JSON_OUTPUT_NAME="results.json"npx playwright test --reporter=json,dot
In configuration file, pass options directly:
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: [ ['json', { outputFile: 'results.json' }] ],};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: [ ['json', { outputFile: 'results.json' }] ],};
module.exports = config;
#
JUnit reporterJUnit reporter produces a JUnit-style xml report. It is usually used together with some terminal reporter like dot
or line
.
Most likely you want to write the report to an xml file. When running with --reporter=junit
, use PLAYWRIGHT_JUNIT_OUTPUT_NAME
environment variable:
# Linux/macOSPLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit,line
# Windows with cmd.exeset PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xmlnpx playwright test --reporter=junit,line
# Windows with PowerShell$env:PLAYWRIGHT_JUNIT_OUTPUT_NAME="results.xml"npx playwright test --reporter=junit,line
In configuration file, pass options directly:
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: [ ['junit', { outputFile: 'results.xml' }] ],};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: [ ['junit', { outputFile: 'results.xml' }] ],};
module.exports = config;
#
Custom reportersYou can create a custom reporter by implementing a class with some of the reporter methods. Learn more about the Reporter API.
- TypeScript
- JavaScript
// playwright.config.tsimport { Reporter } from '@playwright/test/reporter';
class MyReporter implements Reporter { onBegin(config, suite) { console.log(`Starting the run with ${suite.allTests().length} tests`); }
onTestBegin(test) { console.log(`Starting test ${test.title}`); }
onTestEnd(test, result) { console.log(`Finished test ${test.title}: ${result.status}`); }
onEnd(result) { console.log(`Finished the run: ${result.status}`); }}export default MyReporter;
// my-awesome-reporter.js// @ts-check
/** @implements {import('@playwright/test/reporter').Reporter} */class MyReporter { onBegin(config, suite) { console.log(`Starting the run with ${suite.allTests().length} tests`); }
onTestBegin(test) { console.log(`Starting test ${test.title}`); }
onTestEnd(test, result) { console.log(`Finished test ${test.title}: ${result.status}`); }
onEnd(result) { console.log(`Finished the run: ${result.status}`); }}
module.exports = MyReporter;
Now use this reporter with testConfig.reporter.
- TypeScript
- JavaScript
// playwright.config.tsimport { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = { reporter: './my-awesome-reporter.ts',};export default config;
// playwright.config.js// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */const config = { reporter: './my-awesome-reporter.js',};
module.exports = config;
#
Third party showcaseAllure reporter
# Installnpm i -D allure-playwright # Run testsnpx playwright test --reporter=line,allure-playwright # Generate reportallure generate ./allure-results --clean && allure open ./allure-report