playwright-cucumber-ts-steps/lib/assertions/visualSteps.d.ts

A collection of reusable Playwright step definitions for Cucumber in TypeScript, designed to streamline end-to-end testing across web, API, and mobile applications.

import type { CustomWorld } from "../helpers/world";
/**
 * Asserts that the current page's visual appearance matches a named baseline snapshot.
 * If no baseline exists for the given name, a new one is created from the current page.
 * Differences between current and baseline snapshots are highlighted in a 'diff' image.
 *
 * ```gherkin
 * Then I should see the page matches the snapshot {string}
 * ```
 *
 * @param name - A unique name for the snapshot (e.g., "homepage", "product-details-page").
 *
 * @example
 * Then I should see the page matches the snapshot "homepage"
 *
 * @remarks
 * This is a core step for visual regression testing.
 * 1. Takes a screenshot of the current page and saves it to the `current` directory.
 * 2. If a `baseline` snapshot does not exist, the `current` snapshot is copied to `baseline`,
 * and the test passes (a new baseline is established).
 * 3. If a `baseline` exists, it compares the `current` and `baseline` snapshots pixel by pixel
 * using `pixelmatch`.
 * 4. If a mismatch is detected (more than 0 differing pixels based on `threshold`), a `diff`
 * image is generated, and the test fails.
 *
 * All snapshots (baseline, current, diff) are stored in `e2e/snapshots/`.
 * Adjust `threshold` for sensitivity (0.1 means 10% difference in pixel color is allowed).
 * @category Visual Regression Steps
 */
export declare function Then_I_should_see_page_matches_snapshot(this: CustomWorld, name: string): Promise<void>;
/**
 * Captures a visual snapshot of a specific element identified by its selector and saves it under a given alias.
 * This snapshot is saved to the `current` directory and can later be compared against a baseline.
 *
 * ```gherkin
 * Then I capture a snapshot of the element {string} as {string}
 * ```
 *
 * @param selector - The CSS selector of the element to capture.
 * @param alias - A unique alias name for this element snapshot (e.g., "logo-image", "product-card").
 *
 * @example
 * Then I capture a snapshot of the element ".header .logo" as "logo-snapshot"
 * Then I capture a snapshot of the element "#user-profile" as "user-profile-widget"
 *
 * @remarks
 * This step is typically followed by {@link Then_the_snapshot_should_match_baseline | "Then the snapshot {string} should match baseline"}
 * to perform the actual visual comparison.
 * @category Visual Regression Steps
 */
export declare function Then_I_capture_element_snapshot_as_alias(this: CustomWorld, selector: string, alias: string): Promise<void>;
/**
 * Asserts that a previously captured named snapshot (of an element) matches its baseline.
 * If no baseline exists, a new one is created from the current snapshot.
 *
 * ```gherkin
 * Then The snapshot {string} should match baseline
 * ```
 *
 * @param alias - The unique alias name of the snapshot (as used in "Then I capture a snapshot...").
 *
 * @example
 * Then I capture a snapshot of the element ".logo" as "logo-snapshot"
 * Then The snapshot "logo-snapshot" should match baseline
 *
 * @remarks
 * This step is designed to be used after a step like
 * {@link Then_I_capture_element_snapshot_as_alias | "Then I capture a snapshot of the element {string} as {string}"}.
 * It performs the same comparison logic as `Then I should see the page matches the snapshot`,
 * but specifically for an element snapshot.
 * All snapshots (baseline, current, diff) are stored in `e2e/snapshots/`.
 * @category Visual Regression Steps
 */
export declare function Then_the_snapshot_should_match_baseline(this: CustomWorld, alias: string): Promise<void>;