playwright-cucumber-ts-steps/lib/actions/mouseSteps.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 { CustomWorld } from "../helpers/world";
/**
 * Scrolls the element matching the given selector into view.
 * This is useful for making sure an element is visible before interacting with it.
 *
 * ```gherkin
 * When I scroll {string} into view
 * ```
 *
 * @param selector - The CSS selector of the element to scroll into view.
 *
 * @example
 * When I scroll ".footer-section" into view
 *
 * @remarks
 * This step uses Playwright's `locator.scrollIntoViewIfNeeded()`.
 * It will scroll the page or scrollable container as little as possible to bring
 * the element into the viewport.
 * @category Scrolling Steps
 */
export declare function When_I_scroll_element_into_view(this: CustomWorld, selector: string): Promise<void>;
/**
 * Scrolls the element matching the given selector to a specific X and Y position.
 * The scrolling is relative to the element's own scrollable area.
 *
 * ```gherkin
 * When I scroll {string} to position x:{int} y:{int}
 * ```
 *
 * @param selector - The CSS selector of the element to scroll.
 * @param x - The X-coordinate (horizontal) to scroll to within the element.
 * @param y - The Y-coordinate (vertical) to scroll to within the element.
 *
 * @example
 * When I scroll ".my-scrollable-div" to position x:100 y:200
 *
 * @remarks
 * This step uses `locator.evaluate()` to execute `element.scrollTo()` directly
 * in the browser context. This is typically used for scrolling within a specific
 * scrollable HTML element, not the main window.
 * @category Scrolling Steps
 */
export declare function When_I_scroll_element_to_position(this: CustomWorld, selector: string, x: number, // Changed to number as Cucumber's {int} already parses it
y: number): Promise<void>;
/**
 * Scrolls the entire window to specific X and Y coordinates.
 * The coordinates are absolute positions on the page.
 *
 * ```gherkin
 * When I scroll to coordinates x:{int} y:{int}
 * ```
 *
 * @param x - The X-coordinate (horizontal) to scroll the window to.
 * @param y - The Y-coordinate (vertical) to scroll the window to.
 *
 * @example
 * When I scroll to coordinates x:0 y:500
 *
 * @remarks
 * This step uses `page.evaluate()` to execute `window.scrollTo()` directly
 * in the browser context. This controls the main browser window's scroll position.
 * @category Scrolling Steps
 */
export declare function When_I_scroll_to_coordinates(this: CustomWorld, x: number, // Changed to number
y: number): Promise<void>;
/**
 * Scrolls the entire window to a specified top and left position with a smooth animation.
 *
 * ```gherkin
 * When I scroll window to position top:{int} left:{int}
 * ```
 *
 * @param top - The Y-coordinate (vertical) to scroll the window to.
 * @param left - The X-coordinate (horizontal) to scroll the window to.
 *
 * @example
 * When I scroll window to position top:0 left:100
 *
 * @remarks
 * This step uses `page.evaluate()` to execute `window.scrollTo()` with a `behavior: "smooth"`
 * option in the browser context, providing a native smooth scrolling experience.
 * @category Scrolling Steps
 */
export declare function When_I_scroll_mouse_window_to_position(this: CustomWorld, top: number, // Changed to number
left: number): Promise<void>;
/**
 * Scrolls the window to a predefined direction (top, bottom, left, or right) with smooth behavior.
 *
 * ```gherkin
 * When I scroll to "{word}"
 * ```
 *
 * @param direction - The direction to scroll to: "top", "bottom", "left", or "right".
 *
 * @example
 * When I scroll to "bottom"
 * When I scroll to "top"
 *
 * @remarks
 * This step evaluates `window.scrollTo()` in the browser context, setting the `top`
 * or `left` property based on the `direction`. It includes a short `waitForTimeout`
 * to allow the smooth scroll animation to complete.
 * @category Scrolling Steps
 */
export declare function When_I_scroll_to_direction(this: CustomWorld, direction: string): Promise<void>;
/**
 * Hovers the mouse cursor over the element matching the given selector.
 *
 * ```gherkin
 * When I hover over the element {string}
 * ```
 *
 * @param selector - The CSS selector of the element to hover over.
 *
 * @example
 * When I hover over the element ".dropdown-menu-trigger"
 * Then I should see element ".dropdown-content"
 *
 * @remarks
 * This step simulates a mouse hover event. It also stores the hovered element
 * in {@link CustomWorld.element | this.element} for potential subsequent actions.
 * @category Mouse Interaction Steps
 */
export declare function When_I_hover_over_the_element(this: CustomWorld, selector: string): Promise<void>;
/**
 * Moves the mouse cursor to the given absolute X and Y coordinates on the page.
 *
 * ```gherkin
 * When I move mouse to coordinates {int}, {int}
 * ```
 *
 * @param x - The X-coordinate in pixels.
 * @param y - The Y-coordinate in pixels.
 *
 * @example
 * When I move mouse to coordinates 100, 200
 *
 * @remarks
 * This step directly controls the mouse cursor position using Playwright's
 * `page.mouse.move()`. This is a low-level mouse action.
 * @category Mouse Interaction Steps
 */
export declare function When_I_move_mouse_to_coordinates(this: CustomWorld, x: number, y: number): Promise<void>;