externalHtmlReporter

A StageCrewMember that produces a self-contained static HTML report with trend analysis, consistency classification, and living documentation.

HtmlReporter handles the full lifecycle — it collects test data during the run (screenshots, activity trees, domain events) AND generates the aggregated HTML report when the test run finishes. Internally, it composes TestRunArchiver (data collection) and HtmlReportGenerator (report generation).

For CI pipelines where data collection and report generation happen in separate steps, use TestRunArchiver and HtmlReportGenerator independently instead.

Registering HTML Reporter with Playwright Test

// 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/html-reporter', {
          outputDirectory: './reports/serenity-js',
          specDirectory: './spec',   // same as testDir
        }],
      ],
    }],
  ],
});

Registering HTML Reporter with WebdriverIO

// wdio.conf.ts
import type { WebdriverIOConfig } from '@serenity-js/webdriverio';

export const config: WebdriverIOConfig = {
  framework: '@serenity-js/webdriverio',

  serenity: {
    crew: [
      ['@serenity-js/html-reporter', {
        outputDirectory: './reports/serenity-js',
        specDirectory: './test/specs',   // root of your specs directory
      }],
    ],
  },

  specs: ['./test/specs/**.spec.ts'],
};

Registering HTML Reporter with Cucumber

// features/support/serenity.config.ts
import { configure } from '@serenity-js/core';

configure({
  crew: [
    ['@serenity-js/html-reporter', {
      outputDirectory: './reports/serenity-js',
      specDirectory: './features',   // root of your .feature files
    }],
  ],
});

Registering HTML Reporter with Mocha

// spec/support/serenity.config.ts
import { configure } from '@serenity-js/core';

configure({
  crew: [
    ['@serenity-js/html-reporter', {
      outputDirectory: './reports/serenity-js',
      specDirectory: './spec',   // root of your .spec.ts files
    }],
  ],
});

Registering HTML Reporter with Jasmine

// spec/helpers/serenity.config.ts
import { configure } from '@serenity-js/core';

configure({
  crew: [
    ['@serenity-js/html-reporter', {
      outputDirectory: './reports/serenity-js',
      specDirectory: './spec',   // root of your spec files
    }],
  ],
});

Using string-based registration with defaults

When no configuration is needed, register the reporter as a module path string:

import { configure } from '@serenity-js/core';

configure({
  crew: [
    '@serenity-js/html-reporter',
  ],
});

Using fromJSON for programmatic registration

The HtmlReporter.fromJSON static method creates a StageCrewMemberBuilder from an HtmlReporterConfig object:

import { configure } from '@serenity-js/core';
import { HtmlReporter } from '@serenity-js/html-reporter';

configure({
  crew: [
    HtmlReporter.fromJSON({
      outputDirectory: './reports/serenity-js',
      specDirectory: './spec',
      title: 'My Project — Acceptance Tests',
    }),
  ],
});

Learn more

• HtmlReporterConfig — configuration options
• TestRunArchiver — data collection only (for split CI workflows)
• HtmlReportGenerator — report generation only (for post-hoc aggregation)
• HTML Reporter Handbook

Implements

• StageCrewMember

Index

Constructors

• constructor

Methods

• fromJSON
• assignedTo
• notifyOf

Constructors

externalconstructor

• new HtmlReporter(archiver: TestRunArchiver, generator: HtmlReportGenerator): HtmlReporter

• Parameters

  • externalarchiver: TestRunArchiver

  • externalgenerator: HtmlReportGenerator

  Returns HtmlReporter

Methods

staticexternalfromJSON

• fromJSON(config?: HtmlReporterConfig): StageCrewMemberBuilder<HtmlReporter>

• Creates a StageCrewMemberBuilder that will instantiate the HtmlReporter with the provided HtmlReporterConfig.

  This is the programmatic equivalent of registering the reporter as a tuple: ['@serenity-js/html-reporter', config].

  ---

  Parameters

  • externalconfig: HtmlReporterConfig = {}

    Configuration options for the reporter. All properties are optional.

  Returns StageCrewMemberBuilder<HtmlReporter>

externalassignedTo

• assignedTo(stage: Stage): StageCrewMember

• Implementation of StageCrewMember.assignedTo

  Parameters

  • externalstage: Stage

  Returns StageCrewMember

externalnotifyOf

• notifyOf(event: DomainEvent): void

• Implementation of StageCrewMember.notifyOf

  Parameters

  • externalevent: DomainEvent

  Returns void