playwright-cucumber-ts-steps/lib/actions/clickSteps.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.When_I_click = When_I_click;
exports.When_I_click_on_element = When_I_click_on_element;
exports.When_I_click_on_button = When_I_click_on_button;
exports.When_I_click_on_link = When_I_click_on_link;
exports.When_I_click_on_label = When_I_click_on_label;
exports.When_I_click_on_text = When_I_click_on_text;
exports.When_I_click_on_exact_text = When_I_click_on_exact_text;
exports.When_I_click_all = When_I_click_all;
exports.When_I_double_click_on_text = When_I_double_click_on_text;
exports.When_I_double_click_position = When_I_double_click_position;
exports.When_I_double_click = When_I_double_click;
exports.When_I_right_click = When_I_right_click;
exports.When_I_right_click_on_text = When_I_right_click_on_text;
exports.When_I_right_click_position = When_I_right_click_position;
exports.When_I_click_all_alt = When_I_click_all_alt;
exports.When_I_click_on_selector = When_I_click_on_selector;
// e2e/step_definitions/common/actions/clickSteps.ts
const cucumber_1 = require("@cucumber/cucumber");
const optionsUtils_1 = require("../helpers/utils/optionsUtils");
/**
 * Clicks on the previously stored element.
 *
 * ```gherkin
 * When I click
 * ```
 *
 * @example
 * ```gherkin
 * When I click
 * ```
 * @remarks
 * Requires a previous step that stores an element.
 * @category Click Steps
 */
async function When_I_click(...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    if (!this.element)
        throw new Error("❌ No stored element to click.");
    await this.element.click(options);
    this.log?.("🖱️ Clicked on stored element");
}
(0, cucumber_1.When)("I click", When_I_click);
/**
 * Clicks on an element matching the given selector.
 *
 * ```gherkin
 * When I click on element {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on element ".my-class"
 * ```
 * @remarks
 * Stores the clicked element for later use.
 * @category Click Steps
 */
async function When_I_click_on_element(selector, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const element = this.getLocator(selector);
    await element.click(options);
    this.element = element;
    this.log?.(`🖱️ Clicked on element "${selector}"`);
}
(0, cucumber_1.When)("I click on element {string}", When_I_click_on_element);
/**
 * Clicks on a button with the given label.
 *
 * ```gherkin
 * When I click on button {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on button "Submit"
 * ```
 * @remarks
 * Stores the clicked button for later use.
 * @category Click Steps
 */
async function When_I_click_on_button(label, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const button = await this.page.getByRole("button", { name: label });
    await button.click(options);
    this.element = button;
    this.log?.(`🖱️ Clicked on button "${label}"`);
}
(0, cucumber_1.When)("I click on button {string}", When_I_click_on_button);
/**
 * Clicks on a link with the given text.
 *
 * ```gherkin
 * When I click on link {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on link "Home"
 * ```
 * @remarks
 * Stores the clicked link for later use.
 * @category Click Steps
 */
async function When_I_click_on_link(text, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const link = await this.page.getByRole("link", { name: text });
    await link.click(options);
    this.element = link;
    this.log?.(`✅ Clicked on link "${text}"`);
}
(0, cucumber_1.When)("I click on link {string}", When_I_click_on_link);
/**
 * Clicks on a label with the given text.
 *
 * ```gherkin
 * When I click on label {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on label "Username"
 * ```
 * @remarks
 * Stores the clicked label for later use.
 * @category Click Steps
 */
async function When_I_click_on_label(labelText, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const label = await this.page.getByLabel(labelText);
    await label.click(options);
    this.element = label;
    this.log?.(`🏷️ Clicked on label "${labelText}"`);
}
(0, cucumber_1.When)("I click on label {string}", When_I_click_on_label);
/**
 * Clicks on an element containing the given text (not exact match). Supports aliasing with @alias.
 *
 * ```gherkin
 * When I click on text {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on text "Welcome"
 * When I click on text "@username"
 * ```
 * @remarks
 * Stores the clicked element for later use.
 * @category Click Steps
 */
async function When_I_click_on_text(rawText, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    let text = rawText;
    if (rawText.startsWith("@")) {
        const alias = rawText.slice(1);
        text = this.data[alias];
        if (!text)
            throw new Error(`❌ No value found for alias "@${alias}"`);
    }
    const locator = this.page.getByText(text, { exact: false });
    await locator.first().waitFor({ state: "visible", timeout: 5000 });
    await locator.first().click(options);
    this.element = locator.first();
    this.log?.(`🖱️ Clicked on text "${text}"`);
}
(0, cucumber_1.When)("I click on text {string}", When_I_click_on_text);
/**
 * Clicks on an element containing the exact given text.
 *
 * ```gherkin
 * When I click on exact text {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on exact text "Log out"
 * ```
 * @remarks
 * Stores the clicked element for later use.
 * @category Click Steps
 */
async function When_I_click_on_exact_text(exactText, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const locator = this.page.getByText(exactText, { exact: true });
    await locator.waitFor({ state: "visible", timeout: 5000 });
    await locator.click(options);
    this.element = locator;
    this.log?.(`🖱️ Clicked on exact text "${exactText}"`);
}
(0, cucumber_1.When)("I click on exact text {string}", When_I_click_on_exact_text);
/**
 * Clicks all previously stored elements.
 *
 * ```gherkin
 * When I click all
 * ```
 *
 * @example
 * ```gherkin
 * When I click all
 * ```
 * @remarks
 * Requires a previous step that stores elements.
 * @category Click Steps
 */
async function When_I_click_all(...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    if (!this.elements)
        throw new Error("❌ No stored elements to click.");
    const count = await this.elements.count();
    if (count === 0)
        throw new Error("⚠️ No elements found to click.");
    for (let i = 0; i < count; i++) {
        const el = this.elements.nth(i);
        await el.waitFor({ state: "visible", timeout: 5000 });
        await el.click(options);
        this.log?.(`🖱️ Clicked element #${i + 1}`);
    }
    this.log?.(`✅ Clicked all ${count} elements.`);
}
(0, cucumber_1.When)("I click all", When_I_click_all);
/**
 * Double-clicks on an element containing the given text.
 *
 * ```gherkin
 * When I double click on text {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I double click on text "Edit"
 * ```
 * @remarks
 * Uses the previously stored element if available.
 * @category Click Steps
 */
async function When_I_double_click_on_text(text, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const element = this.element || this.page.getByText(text);
    await element.dblclick(options);
    this.log?.(`🖱️ Double-clicked on text "${text}"`);
}
(0, cucumber_1.When)("I double click on text {string}", When_I_double_click_on_text);
/**
 * Double-clicks at the given page coordinates.
 *
 * ```gherkin
 * When I double click position {int} {int}
 * ```
 *
 * @example
 * ```gherkin
 * When I double click position 100 200
 * ```
 * @category Click Steps
 */
async function When_I_double_click_position(x, y, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    await this.page.mouse.dblclick(x, y, options);
    this.log?.(`🖱️ Double-clicked at (${x}, ${y})`);
}
(0, cucumber_1.When)("I double click position {int} {int}", When_I_double_click_position);
/**
 * Double-clicks on the previously stored element.
 *
 * ```gherkin
 * When I double click
 * ```
 *
 * @example
 * ```gherkin
 * When I double click
 * ```
 * @remarks
 * Requires a previous step that stores an element.
 * @category Click Steps
 */
async function When_I_double_click(...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    if (!this.element)
        throw new Error("❌ No stored element to double-click.");
    await this.element.dblclick(options);
    this.log?.("🖱️ Double-clicked on stored element");
}
(0, cucumber_1.When)("I double click", When_I_double_click);
/**
 * Right-clicks on the previously stored element.
 *
 * ```gherkin
 * When I right click
 * ```
 *
 * @example
 * ```gherkin
 * When I right click
 * ```
 * @remarks
 * Requires a previous step that stores an element.
 * @category Click Steps
 */
async function When_I_right_click(...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    if (!this.element)
        throw new Error("❌ No stored element to right-click.");
    await this.element.click({ button: "right", ...options });
    this.log?.("🖱️ Right-clicked on stored element");
}
(0, cucumber_1.When)("I right click", When_I_right_click);
/**
 * Right-clicks on an element containing the given text.
 *
 * ```gherkin
 * When I right click on text {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I right click on text "Options"
 * ```
 * @category Click Steps
 */
async function When_I_right_click_on_text(text, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    const element = this.page.getByText(text);
    await element.click({ button: "right", ...options });
    this.log?.(`🖱️ Right-clicked on text "${text}"`);
}
(0, cucumber_1.When)("I right click on text {string}", When_I_right_click_on_text);
/**
 * Right-clicks at the given page coordinates.
 *
 * ```gherkin
 * When I right click position {int} {int}
 * ```
 *
 * @example
 * ```gherkin
 * When I right click position 50 50
 * ```
 * @category Click Steps
 */
async function When_I_right_click_position(x, y, ...rest) {
    const maybeTable = rest[0];
    const options = maybeTable?.rowsHash ? (0, optionsUtils_1.parseClickOptions)(maybeTable) : {};
    await this.page.mouse.click(x, y, { button: "right", ...options });
    this.log?.(`🖱️ Right-clicked at (${x}, ${y})`);
}
(0, cucumber_1.When)("I right click position {int} {int}", When_I_right_click_position);
/**
 * Clicks all stored elements (alternative signature).
 *
 * ```gherkin
 * When I click all
 * ```
 *
 * @example
 * ```gherkin
 * When I click all
 * ```
 * @remarks
 * Requires a previous step that stores elements.
 * @category Click Steps
 */
async function When_I_click_all_alt(dataTable) {
    const options = (0, optionsUtils_1.parseClickOptions)(dataTable);
    if (!this.elements) {
        throw new Error("❌ No elements stored. Use a 'find' step before 'I click all'.");
    }
    const count = await this.elements.count();
    if (count === 0) {
        throw new Error("⚠️ Stored elements are empty. Nothing to click.");
    }
    for (let i = 0; i < count; i++) {
        const element = this.elements.nth(i);
        await element.waitFor({ state: "visible", timeout: 5000 });
        await element.click(options);
        this.log?.(`🖱️ Clicked element #${i + 1}`);
    }
    this.log?.(`✅ Clicked all ${count} stored elements.`);
}
(0, cucumber_1.When)("I click all", When_I_click_all_alt);
/**
 * Clicks on an element matching the given selector (regex step).
 *
 * ```gherkin
 * When I click on selector {string}
 * ```
 *
 * @example
 * ```gherkin
 * When I click on selector ".my-selector"
 * ```
 * @category Click Steps
 */
async function When_I_click_on_selector(selector) {
    const locator = this.getLocator(selector);
    await locator.click();
    this.log?.(`🖱️ Clicked on selector: ${selector}`);
}
(0, cucumber_1.When)(/^I click on selector "([^"]+)"$/, When_I_click_on_selector);