Registry / testing / wdio-timeline-reporter

wdio-timeline-reporter

library5.1.4jsnpmunverified

Wdio Timeline Reporter is a WebdriverIO reporter that generates an aggregated HTML report for test results, providing a timeline visualization of test execution. The current stable version is 5.1.4, with active development indicated by recent minor releases. Its key differentiators include combining test summaries, detailed test runs with embedded screenshots, error stack traces, and runtime information into a single, static HTML file. It aims to streamline debugging by providing all necessary information in one place, reducing the need to switch between terminal logs and separate screenshot files. It works seamlessly with Mocha and Jasmine frameworks in WebdriverIO v5+ and later.

testing

npm install wdio-timeline-reporter

github ↗package ↗

INSTALL

IMPORT

SIG · WDIO-TIMELINE-REPO

wdio-timeline-reporter

testingjavascriptv5.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

TimelineService

✓ import { TimelineService } from 'wdio-timeline-reporter/timeline-service';

✗ const { TimelineService } = require('wdio-timeline-reporter');

The `TimelineService` is explicitly imported from a nested path (`/timeline-service`) rather than the root package. While CommonJS `require` is shown in the README, ESM `import` should be used in modern WebdriverIO configurations.

Reporter Configuration (string)

✓ reporters: [['timeline', { outputDir: './reports' }]]

✗ reporters: ['WdioTimelineReporter']

The reporter itself is referenced by the string `'timeline'` within the `reporters` array in `wdio.conf.js`, not by a direct class import. Configuration options are passed as an object.

addContext (static method)

✓ TimelineService.addContext('My Test', { info: 'Additional data' });

✗ browser.addContext('My Test', { info: 'Additional data' });

To add extra information to a test at runtime, use the static `addContext` method directly on the imported `TimelineService` class.

This quickstart demonstrates how to configure the `wdio-timeline-reporter` and its mandatory `TimelineService` in a `wdio.conf.js` file, including basic reporter options and how to add custom context to tests. It assumes WebdriverIO v5+ is installed.

import { TimelineService } from 'wdio-timeline-reporter/timeline-service'; exports.config = { runner: 'local', specs: [ './test/specs/**/*.ts' ], exclude: [], maxInstances: 10, capabilities: [{ maxInstances: 5, browserName: 'chrome', acceptInsecureCerts: true }], logLevel: 'info', bail: 0, baseUrl: 'http://localhost', waitforTimeout: 10000, connectionRetryTimeout: 120000, connectionRetryCount: 3, services: [ [TimelineService, { // Optional: Configure screenshot management via TimelineService embedImages: true, // Embed screenshots as base64 in HTML screenshotStrategy: 'on:error' // Take screenshots only on test failure }] ], framework: 'mocha', reporters: [ ['timeline', { outputDir: './timeline-report', // Mandatory: Directory for reports and screenshots fileName: 'custom-timeline-report.html', // Optional: Custom report file name embedImages: true // Embed images in report, overrides service setting if different }] ], mochaOpts: { ui: 'bdd', timeout: 60000 }, // Your tests go here (e.g., in ./test/specs/**/*.ts) // Example test content: // describe('My Test Suite', () => { // it('should perform a successful action', async () => { // await browser.url('https://webdriver.io'); // await expect(browser).toHaveTitleContaining('WebdriverIO'); // }); // // it('should add context data', async () => { // await browser.url('https://example.com'); // TimelineService.addContext(this, { data: 'some useful info' }); // await expect(browser).toHaveTitle('Example Domain'); // }); // }); };

Debug

Known issues

breakingBreaking changes exist between WebdriverIO v4 and v5 regarding how custom reporters function. `wdio-timeline-reporter` v5+ is compatible with WebdriverIO v5 and later. Users on WebdriverIO v4 must use an older version of the reporter.

fix

For WebdriverIO v5+, ensure `wdio-timeline-reporter` is version 5.x or higher. If using WebdriverIO v4, refer to the `v4` branch of the reporter's GitHub repository for compatible versions and instructions.

affects: <5.0.0

gotchaFor WebdriverIO v5 and later, the `TimelineService` must be explicitly imported and added to the `services` array in `wdio.conf.js`. This is mandatory to combine reports and generate the HTML output, as reporters are now initialized per runner instance.

fix

Ensure your `wdio.conf.js` includes `import { TimelineService } from 'wdio-timeline-reporter/timeline-service';` and `services: [[TimelineService]]`.

affects: >=5.0.0

gotchaThe `outputDir` reporter option is mandatory. If not provided, the reporter will fail to generate the HTML report and screenshots.

fix

Always specify `outputDir` in the reporter configuration: `reporters: [['timeline', { outputDir: './path/to/report' }]]`.

affects: >=5.0.0

gotchaWhen using the Cucumber framework, `wdio-timeline-reporter` will report every individual step as a separate test in the timeline. This can lead to a very verbose report and might not align with a scenario-based view.

fix

Be aware of this behavior when choosing `wdio-timeline-reporter` for Cucumber projects. Consider alternative reporters if a consolidated scenario-level report is preferred. No direct fix within the reporter for this behavior.

affects: All

gotchaScreenshot configuration can be done via both the `TimelineService` options and the reporter options. If `embedImages` or `screenshotStrategy` are defined in both, the reporter options usually take precedence or might lead to unexpected behavior if not consistent.

fix

Centralize screenshot configuration in either the `TimelineService` options or the reporter options, ensuring consistency. The `embedImages` option in reporter config determines if images are base64-encoded into the HTML.

affects: All

Errors

Common errors & fixes

Error: outputDir is mandatory

The required `outputDir` option was not provided in the reporter configuration within `wdio.conf.js`.

fix

Add `outputDir` to your reporter options: `reporters: [['timeline', { outputDir: './my-reports' }]]`.

TypeError: Cannot read properties of undefined (reading 'config')

This error or similar `TypeError` can occur if `TimelineService` is not correctly imported or instantiated in the `services` array, especially for WebdriverIO v5+.

fix

Ensure `TimelineService` is imported with `import { TimelineService } from 'wdio-timeline-reporter/timeline-service';` and added to services as `services: [[TimelineService]]`.

ERROR @wdio/local-runner: Failed launching test session: TypeError: Cannot set property 'failures' of undefined

This can indicate an issue with reporter or service initialization within the WebdriverIO v5+ runner, potentially related to an incorrect setup of `wdio-timeline-reporter`'s service.

fix

Double-check that both the `timeline` reporter is listed in `reporters` and `TimelineService` is correctly added to `services` array, as specified in the usage instructions. Ensure compatible versions of `wdio-timeline-reporter` and WebdriverIO are used.

Upgrade

Version history

5.1.4latest on npm

Audit

Dependencies

webdriveriorequiredThis package is a reporter and service for the WebdriverIO test automation framework.

@wdio/reporterrequiredWdio Timeline Reporter extends the base WebdriverIO reporter functionality.

@wdio/loggerrequiredUsed for logging within the WebdriverIO ecosystem.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/QualityOps/wdio-timeline-reporter ↗

packagehttps://www.npmjs.com/package/wdio-timeline-reporter ↗