UNPKG

playwright-cucumber-ts-steps

Version:

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

932 lines (931 loc) 34.7 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.When_I_find_element_by_selector = When_I_find_element_by_selector; exports.When_I_find_link_by_text = When_I_find_link_by_text; exports.When_I_find_heading_by_text = When_I_find_heading_by_text; exports.When_I_find_headings_by_text = When_I_find_headings_by_text; exports.When_I_find_elements_by_selector = When_I_find_elements_by_selector; exports.When_I_find_element_by_text = When_I_find_element_by_text; exports.When_I_find_element_by_title = When_I_find_element_by_title; exports.When_I_find_element_by_testid = When_I_find_element_by_testid; exports.When_I_find_element_by_role = When_I_find_element_by_role; exports.When_I_find_element_by_placeholder_text = When_I_find_element_by_placeholder_text; exports.When_I_find_element_by_label_text = When_I_find_element_by_label_text; exports.When_I_find_elements_by_label_text = When_I_find_elements_by_label_text; exports.When_I_find_element_by_alt_text = When_I_find_element_by_alt_text; exports.When_I_find_element_by_name = When_I_find_element_by_name; exports.When_I_find_elements_by_name = When_I_find_elements_by_name; exports.When_I_find_buttons_by_text = When_I_find_buttons_by_text; exports.When_I_get_element_by_selector = When_I_get_element_by_selector; exports.When_I_get_elements_by_selector = When_I_get_elements_by_selector; exports.When_I_get_first_element = When_I_get_first_element; exports.When_I_get_last_element = When_I_get_last_element; exports.When_I_get_nth_element = When_I_get_nth_element; exports.When_I_find_elements_by_role = When_I_find_elements_by_role; exports.When_I_get_int_rd_element = When_I_get_int_rd_element; exports.When_I_get_focused_element = When_I_get_focused_element; exports.When_I_store_element_text_as = When_I_store_element_text_as; exports.When_I_find_textarea_by_label_text = When_I_find_textarea_by_label_text; exports.When_I_find_textarea_by_placeholder_text = When_I_find_textarea_by_placeholder_text; exports.When_I_find_textareas_by_label_text = When_I_find_textareas_by_label_text; exports.When_I_find_textarea_by_name = When_I_find_textarea_by_name; exports.When_I_find_textareas_by_ID = When_I_find_textareas_by_ID; exports.When_I_find_textareas_by_placeholder_text_multiple = When_I_find_textareas_by_placeholder_text_multiple; exports.When_I_find_input_by_ID = When_I_find_input_by_ID; exports.When_I_find_inputs_by_ID = When_I_find_inputs_by_ID; exports.When_I_find_input_by_label_text = When_I_find_input_by_label_text; exports.When_I_find_input_by_name = When_I_find_input_by_name; exports.When_I_find_input_by_placeholder_text = When_I_find_input_by_placeholder_text; exports.When_I_find_inputs_by_name_multiple = When_I_find_inputs_by_name_multiple; exports.When_I_find_inputs_by_placeholder_text_multiple = When_I_find_inputs_by_placeholder_text_multiple; exports.When_I_find_inputs_by_label_text_multiple = When_I_find_inputs_by_label_text_multiple; exports.When_I_find_inputs_by_display_value_multiple = When_I_find_inputs_by_display_value_multiple; exports.When_I_find_input_by_display_value = When_I_find_input_by_display_value; const cucumber_1 = require("@cucumber/cucumber"); const test_1 = require("@playwright/test"); // ============================= // WHEN I FIND ELEMENT(S) // ============================= /** * Finds an element by CSS selector and stores it as the current element. * * ```gherkin * When I find element by selector {string} * ``` * * @example * When I find element by selector ".my-class" * * @remarks * This step sets the {@link CustomWorld.element | current element} in the test context. * Subsequent steps can then interact with this single element. An `expect` assertion is included * to ensure exactly one element is found. */ async function When_I_find_element_by_selector(selector) { this.element = this.page.locator(selector); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by selector {string}", When_I_find_element_by_selector); /** * Finds a link by its text and stores it as the current locator. * * ```gherkin * When I find link by text {string} * ``` * * @example * When I find link by text "Home" * * @remarks * This step sets the {@link CustomWorld.currentLocator | currentLocator} in the test context, * allowing subsequent steps to operate on the found link. For example: * * ```gherkin * When I find link by text "Products" * And I click current element * ``` */ async function When_I_find_link_by_text(text) { this.currentLocator = this.getScope().getByRole("link", { name: text }); } (0, cucumber_1.When)("I find link by text {string}", When_I_find_link_by_text); /** * Finds a heading by its text and stores it as the current locator. * * ```gherkin * When I find heading by text {string} * ``` * * @example * When I find heading by text "Welcome" * * @remarks * This step sets the {@link CustomWorld.currentLocator | currentLocator} in the test context, * allowing subsequent steps to operate on the found heading. */ async function When_I_find_heading_by_text(text) { this.currentLocator = this.getScope().getByRole("heading", { name: text }); } (0, cucumber_1.When)("I find heading by text {string}", When_I_find_heading_by_text); /** * Finds all headings by text and stores them as the current locator. * * ```gherkin * When I find headings by text {string} * ``` * * @example * When I find headings by text "Section" * * @remarks * This step sets the {@link CustomWorld.currentLocator | currentLocator} in the test context * to a locator that matches *all* headings with the specified text. This is useful for * verifying multiple instances or iterating. */ async function When_I_find_headings_by_text(text) { this.currentLocator = this.getScope().getByRole("heading", { name: text }); } (0, cucumber_1.When)("I find headings by text {string}", When_I_find_headings_by_text); /** * Finds all elements by CSS selector and stores them. * * ```gherkin * When I find elements by selector {string} * ``` * * @example * When I find elements by selector ".item" * * @remarks * This step sets the {@link CustomWorld.elements | elements} property in the test context * to a Playwright `Locator` representing all matching elements. You can then use steps like * "When I get first element" to pick a specific one. */ async function When_I_find_elements_by_selector(selector) { this.elements = this.page.locator(selector); const count = await this.elements.count(); this.log?.(`Found ${count} elements with selector ${selector}`); } (0, cucumber_1.When)("I find elements by selector {string}", When_I_find_elements_by_selector); /** * Finds an element by its exact text and stores it as the current element. * * ```gherkin * When I find element by text {string} * ``` * * @example * When I find element by text "Submit" * * @remarks * This step uses `page.getByText` with `exact: true` to find an element * that matches the text precisely. It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_text(text) { this.element = this.page.getByText(text, { exact: true }); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by text {string}", When_I_find_element_by_text); /** * Finds an element by its title attribute and stores it as the current element. * * ```gherkin * When I find element by title {string} * ``` * * @example * When I find element by title "Tooltip" * * @remarks * This step uses `page.getByTitle` to find an element with the specified `title` attribute. * It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_title(title) { this.element = this.page.getByTitle(title); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by title {string}", When_I_find_element_by_title); /** * Finds an element by its test id and stores it as the current element. * * ```gherkin * When I find element by testid {string} * ``` * * @example * When I find element by testid "main-content" * * @remarks * This step uses `page.getByTestId` to find an element based on its * `data-testid` attribute (or configured test ID attribute). * It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_testid(testid) { this.element = this.page.getByTestId(testid); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by testid {string}", When_I_find_element_by_testid); /** * Finds an element by its role and stores it as the current element. * * ```gherkin * When I find element by role {string} * ``` * * @example * When I find element by role "button" * * @remarks * This step uses `page.getByRole` to find an element based on its * ARIA role. It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_role(role) { this.element = this.page.getByRole(role); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by role {string}", When_I_find_element_by_role); /** * Finds an element by its placeholder text and stores it as the current element. * * ```gherkin * When I find element by placeholder text {string} * ``` * * @example * When I find element by placeholder text "Enter your name" * * @remarks * This step uses `page.getByPlaceholder` to find an input or textarea element * based on its `placeholder` attribute. It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_placeholder_text(text) { this.element = this.page.getByPlaceholder(text); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by placeholder text {string}", When_I_find_element_by_placeholder_text); /** * Finds an element by its label text and stores it as the current element. * * ```gherkin * When I find element by label text {string} * ``` * * @example * When I find element by label text "Username" * * @remarks * This step uses `page.getByLabel` to find an element associated with a given * label text (e.g., using a `<label for="...">` or wrapping the input). * It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_label_text(label) { this.element = this.page.getByLabel(label); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by label text {string}", When_I_find_element_by_label_text); /** * Finds all elements by label text and stores them as the current locator. * * ```gherkin * When I find elements by label text {string} * ``` * * @example * When I find elements by label text "Username" * * @remarks * This step sets the {@link CustomWorld.currentLocator | currentLocator} to a locator * representing all elements associated with the given label text. This is useful * for scenarios where multiple inputs might share a similar label. */ async function When_I_find_elements_by_label_text(label) { this.currentLocator = this.getScope().getByLabel(label); } (0, cucumber_1.When)("I find elements by label text {string}", When_I_find_elements_by_label_text); /** * Finds an element by its alt text and stores it as the current element. * * ```gherkin * When I find element by alt text {string} * ``` * * @example * When I find element by alt text "Logo" * * @remarks * This step uses `page.getByAltText` to find elements, typically images, * based on their `alt` attribute. It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_alt_text(alt) { this.element = this.page.getByAltText(alt); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by alt text {string}", When_I_find_element_by_alt_text); /** * Finds an input element by its name attribute and stores it as the current element. * * ```gherkin * When I find element by name {string} * ``` * * @example * When I find element by name "email" * * @remarks * This step uses `page.getByRole("textbox", { name })` to specifically find an input * element (or similar interactive element) with the given `name` attribute. * It stores the result in {@link CustomWorld.element | this.element}. * An `expect` assertion is included to ensure exactly one element is found. */ async function When_I_find_element_by_name(name) { this.element = this.page.getByRole("textbox", { name }); await (0, test_1.expect)(this.element).toHaveCount(1); } (0, cucumber_1.When)("I find element by name {string}", When_I_find_element_by_name); /** * Finds all elements by name attribute and stores them as the current locator. * * ```gherkin * When I find elements by name {string} * ``` * * @example * When I find elements by name "email" * * @remarks * This step sets the {@link CustomWorld.currentLocator | currentLocator} to a CSS locator * targeting all elements with the specified `name` attribute. */ async function When_I_find_elements_by_name(name) { this.currentLocator = this.getScope().locator(`[name="${name}"]`); } (0, cucumber_1.When)("I find elements by name {string}", When_I_find_elements_by_name); /** * Finds all buttons by text (supports alias) and stores them as elements. * * ```gherkin * When I find buttons by text {string} * ``` * * @example * When I find buttons by text "Save" * When I find buttons by text "@buttonAlias" * * @remarks * This step uses `page.getByRole("button", { name })` to find all buttons * matching the provided text. It supports resolving an alias from `this.data`. * The result is stored in {@link CustomWorld.elements | this.elements}. */ async function When_I_find_buttons_by_text(buttonText) { // 🧠 Resolve alias if (buttonText.startsWith("@")) { const alias = buttonText.slice(1); buttonText = this.data?.[alias]; if (!buttonText) { throw new Error(`No value found for alias "@${alias}"`); } } // 🔍 Locate all matching buttons this.elements = this.page.getByRole("button", { name: buttonText, exact: false, }); this.log?.(`🔘 Stored all buttons matching text "${buttonText}"`); } (0, cucumber_1.When)("I find buttons by text {string}", When_I_find_buttons_by_text); // ============================= // WHEN I GET ELEMENT(S) // ============================= /** * Gets the first element matching the selector and stores it as the current element. * * ```gherkin * When I get element by selector {string} * ``` * * @example * When I get element by selector ".item" * * @remarks * This step targets a single element using a CSS selector and sets it as the * {@link CustomWorld.element | current element}. It's useful when you expect only * one element to match or you only need the first one. */ async function When_I_get_element_by_selector(selector) { this.element = this.page.locator(selector).first(); } (0, cucumber_1.When)("I get element by selector {string}", When_I_get_element_by_selector); /** * Gets all elements matching the selector and stores them. * * ```gherkin * When I get elements by selector {string} * ``` * * @example * When I get elements by selector ".item" * * @remarks * This step sets the {@link CustomWorld.elements | elements} property to a * Playwright `Locator` representing all elements that match the given CSS selector. * You can then use other steps like "When I get first element" to work with specific items. */ async function When_I_get_elements_by_selector(selector) { this.elements = this.page.locator(selector); } (0, cucumber_1.When)("I get elements by selector {string}", When_I_get_elements_by_selector); /** * Gets the first element from the stored elements collection. * * ```gherkin * When I get first element * ``` * * @example * When I get first element * * @remarks * This step requires a preceding step that populates {@link CustomWorld.elements | this.elements} * (e.g., "When I find elements by selector"). It then selects the very first * element from that collection and sets it as the {@link CustomWorld.element | current element}. */ async function When_I_get_first_element() { if (!this.elements) throw new Error("No element collection found. Use a 'find elements' step first."); this.element = this.elements.first(); } (0, cucumber_1.When)("I get first element", When_I_get_first_element); /** * Gets the last element from the stored elements collection. * * ```gherkin * When I get last element * ``` * * @example * When I get last element * * @remarks * This step requires a preceding step that populates {@link CustomWorld.elements | this.elements} * (e.g., "When I find elements by selector"). It then selects the very last * element from that collection and sets it as the {@link CustomWorld.element | current element}. */ async function When_I_get_last_element() { if (!this.elements) throw new Error("No element collection found. Use a 'find elements' step first."); this.element = this.elements.last(); } (0, cucumber_1.When)("I get last element", When_I_get_last_element); /** * Gets the nth element (1-based index) from the stored elements. * * ```gherkin * When I get {int}st element * When I get {int}nd element * When I get {int}rd element * When I get {int}th element * ``` * * @example * When I get 2nd element * * @remarks * This step requires a preceding step that populates {@link CustomWorld.elements | this.elements} * (e.g., "When I find elements by selector"). It then selects the element at the * specified 1-based index from that collection and sets it as the {@link CustomWorld.element | current element}. * Error handling is included for out-of-bounds indices. */ async function When_I_get_nth_element(index) { if (!this.elements) throw new Error("No elements stored to pick from. Use a 'find elements' step first."); const count = await this.elements.count(); if (index < 1 || index > count) { throw new Error(`Cannot get element ${index} — only ${count} found.`); } this.element = this.elements.nth(index - 1); // Playwright is 0-based this.log?.(`Selected ${index} element from stored elements`); } (0, cucumber_1.When)(/^I get (\d+)(?:st|nd|rd|th) element$/, When_I_get_nth_element); /** * Finds all elements by role and stores them in the elements collection. * * ```gherkin * When I find elements by role {string} * ``` * * @example * When I find elements by role "button" * * @remarks * This step uses `page.getByRole` to find all elements with a specific ARIA role * and stores them in {@link CustomWorld.elements | this.elements}. * It includes a check to ensure at least one element is found. */ async function When_I_find_elements_by_role(role) { const locator = this.page.getByRole(role); const count = await locator.count(); if (count === 0) { throw new Error(`No elements found with role "${role}".`); } this.elements = locator; this.log?.(`Stored ${count} elements with role "${role}"`); } (0, cucumber_1.When)("I find elements by role {string}", When_I_find_elements_by_role); /** * Gets the nth element (0-based index) from the stored elements. * * ```gherkin * When I get {int}rd element * ``` * * @example * When I get 3rd element * * @remarks * This step requires a preceding step that populates {@link CustomWorld.elements | this.elements}. * It selects the element at the specified **0-based index** from the collection * and sets it as the {@link CustomWorld.element | current element}. * * **Note:** Consider using `When I get {int}(?:st|nd|rd|th) element` for a 1-based index * which is often more user-friendly in Gherkin. */ async function When_I_get_int_rd_element(index) { if (!this.elements) throw new Error("No element collection found. Use a 'find elements' step first."); this.element = this.elements.nth(index); } (0, cucumber_1.When)("I get {int}rd element", When_I_get_int_rd_element); // This step pattern is a bit specific; the regex-based one is more general. /** * Gets the currently focused element and stores it as the current element. * * ```gherkin * When I get focused element * ``` * * @example * When I get focused element * * @remarks * This step uses `page.evaluateHandle` to find the `document.activeElement` * (the currently focused element in the browser DOM) and sets it as the * {@link CustomWorld.element | current element}. This is useful for testing focus management. */ async function When_I_get_focused_element() { this.element = (await this.page.evaluateHandle(() => document.activeElement)); } (0, cucumber_1.When)("I get focused element", When_I_get_focused_element); /** * Stores the text content of the current element as an alias in the test data. * * ```gherkin * When I store element text as {string} * ``` * * @example * When I store element text as "greeting" * * @remarks * This step requires a preceding step that sets the {@link CustomWorld.element | current element}. * It retrieves the `textContent` of that element and stores it in * {@link CustomWorld.data | this.data} under the provided alias, allowing it to be * reused in subsequent steps (e.g., in assertions or input fields). */ async function When_I_store_element_text_as(alias) { const element = this.element; if (!element) throw new Error("No element selected. Use a 'find element' step first."); const text = await element.textContent(); this.data[alias] = text?.trim(); this.log?.(`Stored text "${text}" as "${alias}"`); } (0, cucumber_1.When)("I store element text as {string}", When_I_store_element_text_as); // ============================= // WHEN I FIND TEXTAREA(S) // ============================= /** * Finds a textarea by its label text and stores it as the current element. * * ```gherkin * When I find textarea by label text {string} * ``` * * @example * When I find textarea by label text "Description" * * @remarks * This step uses Playwright's `getByLabel` to locate a textarea associated * with the given label text. It sets the found textarea as the * {@link CustomWorld.element | current element}. */ async function When_I_find_textarea_by_label_text(label) { this.element = this.page.getByLabel(label); this.log?.(`Stored textarea with label "${label}"`); } (0, cucumber_1.When)("I find textarea by label text {string}", When_I_find_textarea_by_label_text); /** * Finds a textarea by its placeholder text and stores it as the current element. * * ```gherkin * When I find textarea by placeholder text {string} * ``` * * @example * When I find textarea by placeholder text "Type here" * * @remarks * This step uses Playwright's `getByPlaceholder` to locate a textarea * based on its `placeholder` attribute. It sets the found textarea as the * {@link CustomWorld.element | current element}. */ async function When_I_find_textarea_by_placeholder_text(placeholder) { this.element = this.page.getByPlaceholder(placeholder); this.log?.(`Stored textarea with placeholder "${placeholder}"`); } (0, cucumber_1.When)("I find textarea by placeholder text {string}", When_I_find_textarea_by_placeholder_text); /** * Finds all textareas by label text and stores them as elements. * * ```gherkin * When I find textareas by label text {string} * ``` * * @example * When I find textareas by label text "Comment" * * @remarks * This step uses a CSS selector to find all textareas associated with the * given label text and stores them in the {@link CustomWorld.elements | elements} * collection. */ async function When_I_find_textareas_by_label_text(label) { this.elements = this.page.locator(`label:has-text("${label}") + textarea`); this.log?.(`Stored multiple textareas with label "${label}"`); } (0, cucumber_1.When)("I find textareas by label text {string}", When_I_find_textareas_by_label_text); /** * Finds a textarea by its name attribute and stores it as the current element. * * ```gherkin * When I find textarea by name {string} * ``` * * @example * When I find textarea by name "bio" * * @remarks * This step uses a CSS selector to locate a textarea based on its `name` attribute. * It sets the found textarea as the {@link CustomWorld.element | current element}. */ async function When_I_find_textarea_by_name(name) { this.element = this.page.locator(`textarea[name="${name}"]`); this.log?.(`Stored textarea with name "${name}"`); } (0, cucumber_1.When)("I find textarea by name {string}", When_I_find_textarea_by_name); /** * Finds all textareas by ID and stores them as elements. * * ```gherkin * When I find textareas by ID {string} * ``` * * @example * When I find textareas by ID "my-textarea" * * @remarks * This step uses a CSS selector to find all textareas with the specified ID * and stores them in the {@link CustomWorld.elements | elements} collection. */ async function When_I_find_textareas_by_ID(id) { this.elements = this.page.locator(`textarea#${id}`); this.log?.(`Stored multiple textareas with ID "${id}"`); } (0, cucumber_1.When)("I find textareas by ID {string}", When_I_find_textareas_by_ID); /** * Finds all textareas by placeholder text and stores them as elements. * * ```gherkin * When I find textareas by placeholder text {string} * ``` * * @example * When I find textareas by placeholder text "Type here" * * @remarks * This step uses a CSS selector to find all textareas with the specified * `placeholder` attribute and stores them in the {@link CustomWorld.elements | elements} * collection. */ async function When_I_find_textareas_by_placeholder_text_multiple(placeholder) { this.elements = this.page.locator(`textarea[placeholder="${placeholder}"]`); this.log?.(`Stored multiple textareas with placeholder "${placeholder}"`); } (0, cucumber_1.When)("I find textareas by placeholder text {string}", When_I_find_textareas_by_placeholder_text_multiple); // ============================= // WHEN I FIND INPUT(S) // ============================= /** * Finds an input by its ID and stores it as the current element. * * ```gherkin * When I find input by ID {string} * ``` * * @example * When I find input by ID "email" * * @remarks * This step uses a CSS selector to locate an input element by its ID. * It sets the found input as the {@link CustomWorld.element | current element}. */ async function When_I_find_input_by_ID(id) { this.element = this.page.locator(`input#${id}`); this.log?.(`Stored input with ID "${id}"`); } (0, cucumber_1.When)("I find input by ID {string}", When_I_find_input_by_ID); /** * Finds all inputs by ID and stores them as elements. * * ```gherkin * When I find inputs by ID {string} * ``` * * @example * When I find inputs by ID "email" * * @remarks * This step uses a CSS selector to find all input elements with the specified ID * and stores them in the {@link CustomWorld.elements | elements} collection. */ async function When_I_find_inputs_by_ID(id) { this.elements = this.page.locator(`input#${id}`); this.log?.(`Stored multiple inputs with ID "${id}"`); } (0, cucumber_1.When)("I find inputs by ID {string}", When_I_find_inputs_by_ID); /** * Finds an input by its label text and stores it as the current element. * * ```gherkin * When I find input by label text {string} * ``` * * @example * When I find input by label text "Email" * * @remarks * This step uses Playwright's `getByLabel` to locate an input associated * with the given label text. It sets the found input as the * {@link CustomWorld.element | current element}. */ async function When_I_find_input_by_label_text(label) { this.element = this.page.getByLabel(label); this.log?.(`Stored input with label "${label}"`); } (0, cucumber_1.When)("I find input by label text {string}", When_I_find_input_by_label_text); /** * Finds an input by its name attribute and stores it as the current element. * * ```gherkin * When I find input by name {string} * ``` * * @example * When I find input by name "username" * * @remarks * This step uses a CSS selector to locate an input element based on its `name` attribute. * It sets the found input as the {@link CustomWorld.element | current element}. */ async function When_I_find_input_by_name(name) { this.element = this.page.locator(`input[name="${name}"]`); this.log?.(`Stored input with name "${name}"`); } (0, cucumber_1.When)("I find input by name {string}", When_I_find_input_by_name); /** * Finds an input by its placeholder text and stores it as the current element. * * ```gherkin * When I find input by placeholder text {string} * ``` * * @example * When I find input by placeholder text "Enter your email" * * @remarks * This step uses Playwright's `getByPlaceholder` to locate an input * based on its `placeholder` attribute. It sets the found input as the * {@link CustomWorld.element | current element}. */ async function When_I_find_input_by_placeholder_text(placeholder) { this.element = this.page.getByPlaceholder(placeholder); this.log?.(`Stored input with placeholder "${placeholder}"`); } (0, cucumber_1.When)("I find input by placeholder text {string}", When_I_find_input_by_placeholder_text); /** * Finds all inputs by name attribute and stores them as elements. * * ```gherkin * When I find inputs by name {string} * ``` * * @example * When I find inputs by name "username" * * @remarks * This step uses a CSS selector to find all input elements with the specified * `name` attribute and stores them in the {@link CustomWorld.elements | elements} * collection. */ async function When_I_find_inputs_by_name_multiple(name) { this.elements = this.page.locator(`input[name="${name}"]`); this.log?.(`Stored multiple inputs with name "${name}"`); } (0, cucumber_1.When)("I find inputs by name {string}", When_I_find_inputs_by_name_multiple); /** * Finds all inputs by placeholder text and stores them as elements. * * ```gherkin * When I find inputs by placeholder text {string} * ``` * * @example * When I find inputs by placeholder text "Search" * * @remarks * This step uses a CSS selector to find all input elements with the specified * `placeholder` attribute and stores them in the {@link CustomWorld.elements | elements} * collection. */ async function When_I_find_inputs_by_placeholder_text_multiple(placeholder) { this.elements = this.page.locator(`input[placeholder="${placeholder}"]`); this.log?.(`Stored multiple inputs with placeholder "${placeholder}"`); } (0, cucumber_1.When)("I find inputs by placeholder text {string}", When_I_find_inputs_by_placeholder_text_multiple); /** * Finds all inputs by label text and stores them as elements. * * ```gherkin * When I find inputs by label text {string} * ``` * * @example * When I find inputs by label text "Email" * * @remarks * This step uses a CSS selector to find all input elements associated with the * given label text and stores them in the {@link CustomWorld.elements | elements} * collection. */ async function When_I_find_inputs_by_label_text_multiple(label) { this.elements = this.page.locator(`label:has-text("${label}") + input`); this.log?.(`Stored multiple inputs with label "${label}"`); } (0, cucumber_1.When)("I find inputs by label text {string}", When_I_find_inputs_by_label_text_multiple); /** * Finds all inputs by display value (supports alias) and stores them as elements. * * ```gherkin * When I find inputs by display value {string} * ``` * * @example * When I find inputs by display value "John" * When I find inputs by display value "@userName" * * @remarks * This step searches for all input elements whose `value` attribute matches * the provided text or resolved alias. The matching inputs are stored in the * {@link CustomWorld.elements | elements} collection. */ async function When_I_find_inputs_by_display_value_multiple(value) { // 🧠 Handle alias if (value.startsWith("@")) { const alias = value.slice(1); value = this.data?.[alias]; if (!value) { throw new Error(`No value found for alias "@${alias}".`); } } // 🔍 Find all matching inputs this.elements = this.page.locator(`input[value="${value}"]`); this.log?.(`📦 Stored multiple inputs with display value "${value}"`); } (0, cucumber_1.When)("I find inputs by display value {string}", When_I_find_inputs_by_display_value_multiple); /** * Finds an input by display value (supports alias) and stores it as the current element. * * ```gherkin * When I find input by display value {string} * ``` * * @example * When I find input by display value "John" * When I find input by display value "@userName" * * @remarks * This step searches for a single input element whose `value` attribute matches * the provided text or resolved alias. It sets the found input as the * {@link CustomWorld.element | current element}. An `expect` assertion * is included to ensure the element is visible. */ async function When_I_find_input_by_display_value(value) { // 🧠 Handle alias if (value.startsWith("@")) { const alias = value.slice(1); value = this.data?.[alias]; if (!value) { throw new Error(`No value found for alias "@${alias}".`); } } // 🎯 Try to find input element with matching display value const locator = this.page.locator(`input[value="${value}"]`); await (0, test_1.expect)(locator).toBeVisible({ timeout: 5000 }); this.element = locator; this.log?.(`🔍 Found input with value: "${value}"`); } (0, cucumber_1.When)("I find input by display value {string}", When_I_find_input_by_display_value);