Skip to main content

Reporting

Serenity/JS offers two reporting options for Playwright Test projects, and integrates with native Playwright reporting tools:

  • Serenity/JS HTML Reporter — self-contained report with trend history, flaky test detection, error clustering, and an interactive dashboard. No Java required.
  • Serenity BDD Reporter — multi-page HTML reports with narrative documentation. Requires Java.
  • Playwright Test HTML Reports — enhanced with Screenplay Pattern activity details and automatic screenshots.
  • Playwright Test UI Mode — real-time test execution with Screenplay Pattern integration.
  • Playwright Trace Viewer — detailed execution traces, including Screenplay Pattern activities.

All reporters work with both classic Playwright Test scenarios and those that follow the Screenplay Pattern.

Serenity/JS HTML Reporter​

The HTML Reporter is the recommended reporting option for most teams. It produces a self-contained report automatically at the end of each test run — no separate generation step, no Java, no additional dependencies.

playwright.config.ts
import { defineConfig } from '@playwright/test';
import type { SerenityFixtures, SerenityWorkerFixtures } from '@serenity-js/playwright-test';

export default defineConfig<SerenityFixtures, SerenityWorkerFixtures>({
    testDir: './spec',

    reporter: [
        ['line'],
        ['@serenity-js/playwright-test', {
            crew: [
                '@serenity-js/console-reporter',
                ['@serenity-js/html-reporter', {
                    specDirectory: './spec',   // same as testDir — enables the Capabilities view
                }],
            ]
        }],

        // Optional: keep the built-in Playwright HTML reporter for low-level debugging
        ['html', { open: 'never' }],
    ],
});

After running npx playwright test, open reports/serenity-js/index.html in your browser, or serve it locally:

npx @serenity-js/html-reporter serve --open
Serenity/JS HTML Report — Dashboard with trend chart and KPI cards (source)

→ Learn more: HTML Reporter guide | CI integration

Playwright HTML reports​

Serenity/JS automatically enhances the built-in Playwright HTML reports with information gathered from your test activities. When you use the Screenplay Pattern APIs, the reports show additional detail — named steps, activity trees, and timing breakdowns.

To enable it, add the Playwright HTML reporter alongside the Serenity/JS reporter:

playwright.config.ts
reporter: [
    ['@serenity-js/playwright-test', { /* ... */ }],
    ['html', { open: 'never' }],
],
Native Playwright Test HTML report, augmented with information from Serenity/JS Screenplay Pattern activities and automated screenshots captured by the Serenity/JS Photographer (source)

Playwright Test UI Mode​

Serenity/JS integrates with Playwright Test UI Mode, displaying Screenplay Pattern activities in the test runner interface.

To use Playwright Test UI Mode, run the following command in your Playwright Test project:

npx playwright test --ui
Using Serenity/JS Screenplay Pattern with Playwright Test UI Mode (source)

Using Playwright Test Trace Viewer​

Your Screenplay Pattern activities automatically appear in the Playwright Test Trace Viewer.

To use this feature, you need to:

  1. Use the Screenplay Pattern APIs in your Playwright Test scenarios.
  2. Enable tracing in your playwright.config.ts file.
playwright.config.ts
import { defineConfig } from '@playwright/test'
import type { SerenityFixtures, SerenityWorkerFixtures } from '@serenity-js/playwright-test'

export default defineConfig<SerenityFixtures, SerenityWorkerFixtures>({
  use: {
    trace: 'on-first-retry',     // or 'on', 'retain-on-failure'
  },
})
Using Serenity/JS Screenplay Pattern with Playwright Test Trace Viewer (source)

Serenity BDD Reporter​

If your team already uses Serenity BDD or prefers its multi-page report format, you can use the Serenity BDD Reporter instead of (or alongside) the HTML Reporter.

Serenity BDD reports are generated by the Serenity BDD CLI, a Java program that ships with the @serenity-js/serenity-bdd module.

Example Serenity BDD report (source)

To generate Serenity BDD reports, configure your crew as follows:

playwright.config.ts
import { defineConfig } from '@playwright/test';
import type { SerenityFixtures, SerenityWorkerFixtures } from '@serenity-js/playwright-test';

export default defineConfig<SerenityFixtures, SerenityWorkerFixtures>({
    reporter: [
        ['@serenity-js/playwright-test', {
            crew: [
                '@serenity-js/console-reporter',
                ['@serenity-js/serenity-bdd', { specDirectory: './spec' }],
                ['@serenity-js/core:ArtifactArchiver', { outputDirectory: './target/site/serenity' }],
            ]
        }],
    ],
});

Then add the following scripts to your package.json:

package.json
{
  "scripts": {
    "clean": "rimraf target",
    "test": "failsafe clean test:execute test:report",
    "test:execute": "playwright test",
    "test:report": "serenity-bdd run --source ./target/site/serenity --destination ./target/site/serenity"
  }
}

This requires additional dependencies:

npm install --save-dev @serenity-js/serenity-bdd npm-failsafe rimraf

→ Learn more: Serenity BDD Reporter guide | Migrating to the HTML Reporter

Use both reporters together

You can run both the HTML Reporter and Serenity BDD Reporter simultaneously — they collect data independently and write to different directories. See Running both reporters together.

What you learnt​

  • The Serenity/JS HTML Reporter is the simplest way to get rich reports — no Java, no extra scripts, automatic generation.
  • Serenity/JS automatically enhances Playwright HTML reports, UI Mode, and Trace Viewer with Screenplay Pattern details.
  • Serenity BDD reports are available for teams that need Java-based living documentation.
  • Both Serenity/JS reporters work alongside native Playwright reporting tools.

Next step​

Learn about the integration architecture to understand how Serenity/JS works with Playwright Test under the hood.