Implementation:Getgauge Taiko Gauge Step Decorators

Knowledge Sources	Taiko Gauge Documentation
Domains	Testing, Test_Framework, TypeScript
Last Updated	2026-02-12 00:00 GMT

Overview

Concrete tool for mapping natural language test steps to Taiko browser automation code using gauge-ts decorators and lifecycle hooks.

Description

The gauge-ts package provides TypeScript decorators that the Gauge runner discovers at test startup to build step-to-method mappings. The Taiko repository's functional test suite at test/functional-tests/tests/ contains 10 step implementation files demonstrating the full decorator API:

Step Decorators:

@Step("step text with <parameters>") — Maps a natural language step pattern to an async method.
@ContinueOnFailure() — Allows a scenario to continue after step failure.

Lifecycle Hooks:

@BeforeScenario() — Opens browser before each scenario.
@AfterScenario() — Closes browser after each scenario.
@BeforeSuite() — Starts test server and configures Taiko settings.
@AfterSuite() — Stops test server.
@CustomScreenshotWriter() — Captures screenshots on failure for Gauge reports.

Class Organization: Step implementations are organized by functional area: hooks.ts (lifecycle), htmlElementAPI.ts (element interactions), browserAction.ts (browser operations), click.ts, write.ts, assert.ts, pageActions.ts, selectors.ts, dropDown.ts, alert.ts.

Usage

This implementation is used when writing the TypeScript step definitions that bridge Gauge specifications to Taiko API calls. Requires experimentalDecorators: true and emitDecoratorMetadata: true in tsconfig.json.

Code Reference

Source Location

Repository: Taiko
Reference Files:
- test/functional-tests/tests/hooks.ts (L1-62) — Lifecycle hooks
- test/functional-tests/tests/htmlElementAPI.ts (L1-302) — Step implementations
- test/functional-tests/tests/click.ts (L1-105) — Click steps
- test/functional-tests/tests/write.ts (L1-29) — Write steps
- test/functional-tests/tests/assert.ts (L1-54) — Assertion steps

Example

import { Step, BeforeScenario, AfterScenario } from "gauge-ts";
import { openBrowser, closeBrowser, goto, click, write } from "taiko";

export default class BrowserSteps {
    @BeforeScenario()
    public async openBrowser() {
        await openBrowser({ headless: true, args: ["--no-sandbox"] });
    }

    @Step("Navigate to <url>")
    public async navigate(url: string) {
        await goto(url);
    }

    @Step("Click <text>")
    public async clickElement(text: string) {
        await click(text);
    }

    @AfterScenario()
    public async closeBrowser() {
        await closeBrowser();
    }
}

I/O Contract

Inputs

Name	Type	Required	Default	Description
Step text pattern	string	Yes	—	Natural language step text with angle-bracket parameters, matching specification steps.
Step method	async Function	Yes	—	TypeScript method implementing the step using Taiko API calls.

Outputs

Name	Type	Description
Step execution	Promise<void>	Browser automation actions performed via Taiko APIs within the decorated method.

Side Effects

Registers step-to-method mappings in the Gauge runner's step registry.
Lifecycle hooks manage browser process lifecycle (open/close per scenario).
@CustomScreenshotWriter captures browser state on failure.

Related Pages

Implements Principle

Principle:Getgauge_Taiko_Gauge_Step_Implementation

Requires Environment

Environment:Getgauge_Taiko_Node_Runtime

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment