or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdformatting.mdindex.mdlifecycle.mdsauce-labs.md
tile.json

tessl/npm-wdio--spec-reporter

A WebdriverIO plugin to report in spec style

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@wdio/spec-reporter@9.19.x

To install, run

npx @tessl/cli install tessl/npm-wdio--spec-reporter@9.19.0

index.mddocs/

WDIO Spec Reporter

WDIO Spec Reporter is a WebdriverIO plugin that provides spec-style test reporting with hierarchical output similar to Mocha and Jasmine. The reporter formats test results in a clean, readable format with customizable symbols, colors, and advanced features like realtime reporting, console log integration, failure-only modes, and Sauce Labs integration.

Package Information

  • Package Name: @wdio/spec-reporter
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @wdio/spec-reporter --save-dev

Core Imports

import SpecReporter from "@wdio/spec-reporter";

For CommonJS:

const SpecReporter = require("@wdio/spec-reporter").default;

Import types:

import type { SpecReporterOptions, Symbols, State } from "@wdio/spec-reporter";

Basic Usage

// wdio.conf.js
export const config = {
  reporters: [
    'dot',
    ['spec', {
      sauceLabsSharableLinks: true,
      symbols: {
        passed: '✓',
        failed: '✖'
      },
      onlyFailures: false,
      addConsoleLogs: true,
      realtimeReporting: false,
      showPreface: true,
      color: true
    }]
  ]
};

// Programmatic usage
import SpecReporter from "@wdio/spec-reporter";

const reporter = new SpecReporter({
  symbols: { passed: '[PASS]', failed: '[FAIL]' },
  onlyFailures: false,
  color: true
});

Architecture

WDIO Spec Reporter is built around several key components:

  • SpecReporter Class: Main reporter extending WDIOReporter with lifecycle event handlers
  • State Management: Tracks test execution state, counts, and indentation levels
  • Display Engine: Formats and colorizes output with configurable symbols and prefaces
  • Sauce Labs Integration: Automatic job link generation with authentication tokens
  • Console Capture: Optional real-time console log integration during test execution
  • Multi-browser Support: Handles both standard and multiremote WebDriver configurations

Capabilities

Reporter Configuration

Core configuration options for customizing reporter behavior, output formatting, and integration features.

interface SpecReporterOptions {
  /** Enable/disable Sauce Labs sharable links */
  sauceLabsSharableLinks?: boolean;
  /** Custom symbols for test states */
  symbols?: Partial<Symbols>;
  /** Show only failed test results */
  onlyFailures?: boolean;
  /** Include console logs in report */
  addConsoleLogs?: boolean;
  /** Enable real-time test status output */
  realtimeReporting?: boolean;
  /** Show/hide preface on each line */
  showPreface?: boolean;
  /** Enable/disable colored terminal output */
  color?: boolean;
}

Configuration

Test Lifecycle Handling

Event-driven lifecycle methods that handle WebdriverIO test execution events and update reporter state.

class SpecReporter extends WDIOReporter {
  /** Handle test runner start event */
  onRunnerStart(runner: RunnerStats): void;
  /** Handle test runner end event */
  onRunnerEnd(runner: RunnerStats): void;
  /** Handle suite start event */
  onSuiteStart(suite: SuiteStats): void;
  /** Handle suite end event */
  onSuiteEnd(): void;
  /** Handle suite retry event */
  onSuiteRetry(): void;
  /** Handle test start event */
  onTestStart(): void;
  /** Handle test pass event */
  onTestPass(testStat: TestStats): void;
  /** Handle test failure event */
  onTestFail(testStat: TestStats): void;
  /** Handle test skip event */
  onTestSkip(testStat: TestStats): void;
  /** Handle test pending event */
  onTestPending(testStat: TestStats): void;
  /** Handle hook end event */
  onHookEnd(hook: HookStats): void;
}

Lifecycle Events

Report Generation and Formatting

Methods for generating formatted test reports with customizable display options and color schemes.

class SpecReporter {
  /** Print complete test report to stdout */
  printReport(runner: RunnerStats): void;
  /** Print real-time test status during execution */
  printCurrentStats(stat: TestStats | HookStats | SuiteStats): void;
  /** Apply color formatting to messages */
  setMessageColor(message: string, state?: State): string;
  /** Get formatted test results display */
  getResultDisplay(prefaceString?: string): string[];
  /** Get formatted test count summary */
  getCountDisplay(duration: string): string[];
  /** Get detailed failure display with stack traces */
  getFailureDisplay(): string[];
  /** Get formatted header information */
  getHeaderDisplay(runner: RunnerStats): string[];
  /** Get events to report from a suite */
  getEventsToReport(suite: SuiteStats): (HookStats | TestStats)[];
  /** Get suites in execution order */
  getOrderedSuites(): SuiteStats[];
  /** Calculate indentation for nested suites */
  indent(uid: string): string;
  /** Get symbol for test state */
  getSymbol(state?: keyof Symbols): string;
  /** Get color name for test state */
  getColor(state?: string): ChalkColors;
  /** Format browser and environment information */
  getEnviromentCombo(capability: Capabilities.ResolvedTestrunnerCapabilities, verbose?: boolean, isMultiremote?: boolean): string;
}

Report Formatting

Sauce Labs Integration

Advanced integration features for Sauce Labs test execution including job link generation and authentication.

interface TestLink {
  capabilities: Capabilities.ResolvedTestrunnerCapabilities;
  sessionId: string;
  isMultiremote: boolean;
  instanceName?: string;
}

class SpecReporter {
  /** Generate Sauce Labs job URLs */
  getTestLink(options: TestLink): string[];
}

Sauce Labs Integration

Core Types

interface Symbols {
  passed: string;
  skipped: string;
  pending: string;
  failed: string;
  retried: string;
}

interface StateCount {
  passed: number;
  failed: number;  
  skipped: number;
  pending: number;
  retried: number;
}

enum State {
  FAILED = 'failed',
  PASSED = 'passed',
  PENDING = 'pending',
  SKIPPED = 'skipped',
  RETRIED = 'retried'
}

enum ChalkColors {
  RED = 'red',
  GREEN = 'green',
  CYAN = 'cyan',
  GRAY = 'gray',
  GREY = 'grey',
  BLACCK = 'black',
  YELLOW = 'yellow',
  BLUE = 'blue',
  MAGENTA = 'magenta',
  WHITE = 'white'
}