{"id":15406,"library":"wdio-timeline-reporter","title":"Wdio Timeline Reporter","description":"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.","status":"active","version":"5.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/QualityOps/wdio-timeline-reporter","tags":["javascript","timeline","reporter","webdriverio","wdio","wdio-plugin","wdio-reporter"],"install":[{"cmd":"npm install wdio-timeline-reporter","lang":"bash","label":"npm"},{"cmd":"yarn add wdio-timeline-reporter","lang":"bash","label":"yarn"},{"cmd":"pnpm add wdio-timeline-reporter","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a reporter and service for the WebdriverIO test automation framework.","package":"webdriverio","optional":false},{"reason":"Wdio Timeline Reporter extends the base WebdriverIO reporter functionality.","package":"@wdio/reporter","optional":false},{"reason":"Used for logging within the WebdriverIO ecosystem.","package":"@wdio/logger","optional":false}],"imports":[{"note":"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.","wrong":"const { TimelineService } = require('wdio-timeline-reporter');","symbol":"TimelineService","correct":"import { TimelineService } from 'wdio-timeline-reporter/timeline-service';"},{"note":"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.","wrong":"reporters: ['WdioTimelineReporter']","symbol":"Reporter Configuration (string)","correct":"reporters: [['timeline', { outputDir: './reports' }]]"},{"note":"To add extra information to a test at runtime, use the static `addContext` method directly on the imported `TimelineService` class.","wrong":"browser.addContext('My Test', { info: 'Additional data' });","symbol":"addContext (static method)","correct":"TimelineService.addContext('My Test', { info: 'Additional data' });"}],"quickstart":{"code":"import { TimelineService } from 'wdio-timeline-reporter/timeline-service';\n\nexports.config = {\n  runner: 'local',\n  specs: [\n    './test/specs/**/*.ts'\n  ],\n  exclude: [],\n  maxInstances: 10,\n  capabilities: [{\n    maxInstances: 5,\n    browserName: 'chrome',\n    acceptInsecureCerts: true\n  }],\n  logLevel: 'info',\n  bail: 0,\n  baseUrl: 'http://localhost',\n  waitforTimeout: 10000,\n  connectionRetryTimeout: 120000,\n  connectionRetryCount: 3,\n  services: [\n    [TimelineService, {\n      // Optional: Configure screenshot management via TimelineService\n      embedImages: true, // Embed screenshots as base64 in HTML\n      screenshotStrategy: 'on:error' // Take screenshots only on test failure\n    }]\n  ],\n  framework: 'mocha',\n  reporters: [\n    ['timeline', {\n      outputDir: './timeline-report', // Mandatory: Directory for reports and screenshots\n      fileName: 'custom-timeline-report.html', // Optional: Custom report file name\n      embedImages: true // Embed images in report, overrides service setting if different\n    }]\n  ],\n  mochaOpts: {\n    ui: 'bdd',\n    timeout: 60000\n  },\n  // Your tests go here (e.g., in ./test/specs/**/*.ts)\n  // Example test content:\n  // describe('My Test Suite', () => {\n  //   it('should perform a successful action', async () => {\n  //     await browser.url('https://webdriver.io');\n  //     await expect(browser).toHaveTitleContaining('WebdriverIO');\n  //   });\n  //\n  //   it('should add context data', async () => {\n  //     await browser.url('https://example.com');\n  //     TimelineService.addContext(this, { data: 'some useful info' });\n  //     await expect(browser).toHaveTitle('Example Domain');\n  //   });\n  // });\n};","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Breaking 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.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Ensure your `wdio.conf.js` includes `import { TimelineService } from 'wdio-timeline-reporter/timeline-service';` and `services: [[TimelineService]]`.","message":"For 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Always specify `outputDir` in the reporter configuration: `reporters: [['timeline', { outputDir: './path/to/report' }]]`.","message":"The `outputDir` reporter option is mandatory. If not provided, the reporter will fail to generate the HTML report and screenshots.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":"All"},{"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.","message":"Screenshot 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.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `outputDir` to your reporter options: `reporters: [['timeline', { outputDir: './my-reports' }]]`.","cause":"The required `outputDir` option was not provided in the reporter configuration within `wdio.conf.js`.","error":"Error: outputDir is mandatory"},{"fix":"Ensure `TimelineService` is imported with `import { TimelineService } from 'wdio-timeline-reporter/timeline-service';` and added to services as `services: [[TimelineService]]`.","cause":"This error or similar `TypeError` can occur if `TimelineService` is not correctly imported or instantiated in the `services` array, especially for WebdriverIO v5+.","error":"TypeError: Cannot read properties of undefined (reading 'config')"},{"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.","cause":"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.","error":"ERROR @wdio/local-runner: Failed launching test session: TypeError: Cannot set property 'failures' of undefined"}],"ecosystem":"npm"}