tessl/npm-wdio--spec-reporter

A WebdriverIO plugin to report in spec style

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

WDIO Spec Reporter

Name: tessl/npm-wdio--spec-reporter
Author: tessl

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'
}