playwright-cucumber-ts-steps 0.1.6 → 1.0.0

package/src/actions/fillFormSteps.ts

@@ -0,0 +1,270 @@
+import fs from "fs";
+import path from "path";
+import { When } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import { resolveLoginValue } from "../helpers/utils/resolveUtils"; // Assuming this path is correct
+import type { CustomWorld } from "../helpers/world"; // Assuming this path is correct
+
+// Explicitly type each row for better readability and type safety
+type ActionRow = {
+  Target: string;
+  Value: string;
+  PayloadDir?: string; // Optional: for API requests, specifies directory for payload files
+  SaveAs?: string; // Optional: for API requests, saves response body to this alias
+};
+
+/**
+ * Fills a form using a data table, supporting various interactions and assertions.
+ * This is a highly versatile step designed to encapsulate multiple form-related
+ * actions, including filling inputs, clicking elements, checking checkboxes,
+ * uploading files, performing drag-and-drop, managing browser storage,
+ * initiating API requests, and making UI assertions.
+ *
+ * ```gherkin
+ * When I fill the following {string} form data:
+ * | Target                         | Value                                        |
+ * | input[placeholder='email']     | test@email.com                               |
+ * | input[placeholder='password']  | @adminPassword                               |
+ * | input[type='checkbox']         | check                                        |
+ * | select[name='role']            | select                                       |
+ * | button:has-text("Sign In")     | click                                        |
+ * | .dashboard-header              | assert:visible                               |
+ * | .user-role                     | assert:text:Admin                            |
+ * | input[type='file']             | upload:fixtures/profile-pic.jpg              |
+ * | div.upload-target              | drag:.upload-preview                         |
+ * | request:POST:/api/auth/login   | payload:adminLogin.json | SaveAs:loginResponse |
+ * | set:localStorage:auth_token    | @lastApiResponse.token                       |
+ * | wait                           | wait:1000                                    |
+ * | reload                         |                                              |
+ * ```
+ *
+ * @param formName - A descriptive name for the form (e.g., "Login", "Profile").
+ * This is currently for documentation purposes only.
+ * @param dataTable - A Cucumber data table containing 'Target' and 'Value' columns.
+ * Optionally, 'PayloadDir' and 'SaveAs' columns can be used for API requests.
+ *
+ * @remarks
+ * Each row in the data table represents an action to perform. The `Target` column
+ * typically specifies a CSS selector for an element, but can also define special
+ * actions like `request:`, `set:localStorage:`, `set:sessionStorage:`, `wait`, and `reload`.
+ * The `Value` column defines the action or input for the target.
+ *
+ * **Supported `Value` actions:**
+ * - **`fill_value` (default):** Fills the target input with the given value. Supports aliases
+ * resolved via `resolveLoginValue`.
+ * - **`click`:** Clicks the target element.
+ * - **`check`:** Checks a checkbox or radio button.
+ * - **`uncheck`:** Unchecks a checkbox.
+ * - **`select`:** Selects the first option in a dropdown (e.g., `<select>`).
+ * - **`upload:filepath`:** Uploads a file from the `filepath` (relative to project root).
+ * Example: `upload:fixtures/my-image.png`
+ * - **`drag:target_selector`:** Drags the `Target` element to the element specified by `target_selector`.
+ * - **`assert:type:expected_value`:** Performs an assertion on the `Target` element.
+ * - `assert:visible`: Asserts the element is visible.
+ * - `assert:text:expected_text`: Asserts the element has the exact text.
+ * - `assert:value:expected_value`: Asserts an input/textarea has the exact value.
+ * - **`request:METHOD:url`:** Makes an API request.
+ * - `METHOD` can be `POST`, `GET`, `PUT`, `PATCH`.
+ * - `url` is the API endpoint.
+ * - **Requires additional columns:** `PayloadDir` (optional, default 'payload')
+ * and `Payload` (filename, e.g., `adminLogin.json`).
+ * - **Optional `SaveAs` column:** Saves the API response body to `this.data[SaveAs]`.
+ * - The response body is also stored in `this.data.lastApiResponse`.
+ * - **`set:localStorage:key`:** Sets a value in `localStorage`.
+ * The `Value` column provides the value to set, supporting aliases.
+ * - **`set:sessionStorage:key`:** Sets a value in `sessionStorage`.
+ * The `Value` column provides the value to set, supporting aliases.
+ * - **`wait:milliseconds`:** Pauses execution for the specified milliseconds.
+ * - **`reload`:** Reloads the current page.
+ *
+ * @category Form Interaction Steps
+ */
+export async function When_I_fill_the_following_form_data(
+  this: CustomWorld,
+  _formName: string, // Renamed to _formName as it's not used in logic, just for readability in Gherkin
+  dataTable: any // Use `any` for dataTable as its structure is defined by `hashes()`
+) {
+  const rows = dataTable.hashes() as ActionRow[];
+
+  for (const row of rows) {
+    const target = row.Target.trim();
+    const rawValue = row.Value.trim();
+    // Resolve value early if it's not an action that prevents it (like `click`)
+    resolveLoginValue(rawValue, this);
+
+    // --- Special Actions (not directly on a locator) ---
+
+    // ✅ Request handling (e.g., `request:POST:/api/auth/login`)
+    if (target.startsWith("request:")) {
+      const [, method, url] = target.replace("request:", "").split(":");
+      const payloadFile = rawValue.trim(); // Value column now holds the payload filename
+
+      const payloadDir = row.PayloadDir || this.parameters?.payloadDir || "payload";
+      const filePath = path.resolve(payloadDir, payloadFile);
+
+      if (!fs.existsSync(filePath)) {
+        throw new Error(`Payload file not found for API request: ${filePath}`);
+      }
+
+      const payload = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+      this.log?.(`📞 Making API ${method} request to ${url} with payload from ${payloadFile}`);
+
+      const response = await this.page.request[
+        method.toLowerCase() as "post" | "put" | "patch" | "get" | "delete" // Added 'delete' for completeness if needed
+      ](url, {
+        data: payload,
+      });
+
+      const responseBody = await response.json();
+      this.data.lastApiResponse = responseBody;
+      this.data.lastStatusCode = response.status();
+      this.log?.(
+        `✅ API response status: ${response.status()}, body: ${JSON.stringify(responseBody).slice(0, 100)}...`
+      );
+
+      if (row.SaveAs) {
+        // Using the optional 'SaveAs' column
+        this.data[row.SaveAs] = responseBody;
+        this.log?.(`💾 API response saved as alias "${row.SaveAs}"`);
+      }
+
+      continue; // Move to next row
+    }
+
+    // ✅ Local Storage (e.g., `set:localStorage:auth_token`)
+    if (target.startsWith("set:localStorage:")) {
+      const [, , key] = target.split(":"); // target has "set:localStorage:key"
+      if (typeof key !== "string" || !key) {
+        throw new Error("Local storage key must be a non-empty string for 'set:localStorage:'.");
+      }
+      const resolvedValue = resolveLoginValue(rawValue, this) ?? ""; // RawValue holds the actual data or alias
+      await this.page.evaluate(([k, v]) => localStorage.setItem(k, v), [key, resolvedValue]);
+      this.log?.(`📦 Set localStorage item "${key}" to "${resolvedValue.slice(0, 50)}..."`);
+      continue;
+    }
+
+    // ✅ Session Storage (e.g., `set:sessionStorage:user_id`)
+    if (target.startsWith("set:sessionStorage:")) {
+      const [, , key] = target.split(":"); // target has "set:sessionStorage:key"
+      if (typeof key !== "string" || !key) {
+        throw new Error(
+          "Session storage key must be a non-empty string for 'set:sessionStorage:'."
+        );
+      }
+      const resolvedValue = resolveLoginValue(rawValue, this) ?? ""; // RawValue holds the actual data or alias
+      await this.page.evaluate(([k, v]) => sessionStorage.setItem(k, v), [key, resolvedValue]);
+      this.log?.(`📦 Set sessionStorage item "${key}" to "${resolvedValue.slice(0, 50)}..."`);
+      continue;
+    }
+
+    // ✅ Wait (e.g., `wait` in Target, `wait:1000` in Value)
+    if (target === "wait") {
+      const [, timeMs] = rawValue.split(":");
+      const waitTime = Number(timeMs);
+      if (!isNaN(waitTime)) {
+        this.log?.(`⏳ Waiting for ${waitTime}ms...`);
+        await this.page.waitForTimeout(waitTime);
+      } else {
+        throw new Error(
+          `Invalid wait time specified: "${rawValue}". Expected format "wait:milliseconds".`
+        );
+      }
+      continue;
+    }
+
+    // ✅ Reload (e.g., `reload` in Target)
+    if (target === "reload") {
+      this.log?.("🔄 Reloading page...");
+      await this.page.reload();
+      continue;
+    }
+
+    // --- Actions on a specific Locator ---
+    const locator = this.getLocator(target); // Get locator for UI interactions/assertions
+
+    // ✅ Assertions (e.g., `.dashboard-header` | `assert:visible`)
+    if (rawValue.startsWith("assert:")) {
+      const [, type, expected] = rawValue.split(":");
+
+      if (type === "visible") {
+        this.log?.(`🔎 Asserting "${target}" is visible.`);
+        await expect(locator).toBeVisible();
+      } else if (type === "text") {
+        this.log?.(`🔎 Asserting "${target}" has text "${expected}"`);
+        await expect(locator).toHaveText(expected ?? "", {
+          useInnerText: true, // Prefer innerText for visible text content
+        });
+      } else if (type === "value") {
+        this.log?.(`🔎 Asserting "${target}" has value "${expected}"`);
+        await expect(locator).toHaveValue(expected ?? "");
+      } else {
+        throw new Error(`❌ Unknown assertion type: "${type}" for target "${target}".`);
+      }
+      continue;
+    }
+
+    // ✅ Click (e.g., `button:has-text("Sign In")` | `click`)
+    if (rawValue === "click") {
+      this.log?.(`👆 Clicking on "${target}"`);
+      await locator.click();
+      continue;
+    }
+
+    // ✅ Check (e.g., `input[type='checkbox']` | `check`)
+    if (rawValue === "check") {
+      this.log?.(`☑️ Checking "${target}"`);
+      await locator.check();
+      continue;
+    }
+
+    // ✅ Uncheck (e.g., `input[type='checkbox']` | `uncheck`)
+    if (rawValue === "uncheck") {
+      this.log?.(`🔲 Unchecking "${target}"`);
+      await locator.uncheck();
+      continue;
+    }
+
+    // ✅ Select (e.g., `select[name='role']` | `select`)
+    if (rawValue === "select") {
+      this.log?.(`🔽 Selecting first option for "${target}"`);
+      await locator.selectOption({ index: 0 }); // Typically used for dropdowns
+      continue;
+    }
+
+    // ✅ File upload (e.g., `input[type='file']` | `upload:fixtures/profile-pic.jpg`)
+    if (rawValue.startsWith("upload:")) {
+      const filePath = rawValue.split("upload:")[1].trim();
+      const resolvedPath = path.resolve(filePath);
+      if (!fs.existsSync(resolvedPath)) {
+        throw new Error(`File not found for upload: ${filePath} (resolved to: ${resolvedPath})`);
+      }
+      this.log?.(`📤 Uploading file "${resolvedPath}" to "${target}"`);
+      await locator.setInputFiles(resolvedPath);
+      continue;
+    }
+
+    // ✅ Drag and drop (e.g., `div.upload-target` | `drag:.upload-preview`)
+    if (rawValue.startsWith("drag:")) {
+      const targetSelector = rawValue.split("drag:")[1].trim();
+      const targetLocator = this.getLocator(targetSelector);
+      this.log?.(`🖐️ Dragging "${target}" to "${targetSelector}"`);
+      await locator.dragTo(targetLocator);
+      continue;
+    }
+
+    // ✅ Default: fill (if no other action matches, assume fill)
+    // Ensure `value` is resolved for normal fill actions
+    const fillValue = resolveLoginValue(rawValue, this);
+    if (fillValue !== undefined) {
+      this.log?.(`✍️ Filling "${target}" with "${String(fillValue).slice(0, 50)}..."`);
+      await locator.fill(String(fillValue));
+    } else {
+      // This case should ideally not be hit if rawValue is always handled,
+      // but good for debugging if an unhandled action slips through.
+      this.log?.(`⚠️ No action performed for target "${target}" with value "${rawValue}"`);
+    }
+  }
+}
+
+// Register the Cucumber step
+When("I fill the following {string} form data:", When_I_fill_the_following_form_data);

package/src/actions/index.ts

@@ -0,0 +1,12 @@
+// Actions
+export * from "./clickSteps";
+export * from "./cookieSteps";
+export * from "./debugSteps";
+export * from "./elementFindSteps";
+export * from "./fillFormSteps";
+export * from "./inputSteps";
+export * from "./interceptionSteps";
+export * from "./miscSteps";
+export * from "./mouseSteps";
+export * from "./scrollSteps";
+export * from "./storageSteps";

package/src/actions/inputSteps.ts

@@ -0,0 +1,354 @@
+// e2e/step_definitions/common/actions/inputSteps.ts
+import { When } from "@cucumber/cucumber";
+import { evaluateFaker } from "../helpers/utils/fakerUtils"; // Assuming this path is correct
+import {
+  parseCheckOptions,
+  parseFillOptions,
+  parseSelectOptions,
+} from "../helpers/utils/optionsUtils"; // Assuming this path is correct
+import { CustomWorld } from "../helpers/world"; // Assuming this path is correct
+
+// =============================
+// WHEN I CHECK / UNCHECK
+// =============================
+
+/**
+ * Checks the previously selected element (e.g., a checkbox or radio button).
+ *
+ * ```gherkin
+ * When I check
+ * ```
+ *
+ * @example
+ * When I find element by label text "Remember me"
+ * And I check
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to a checkbox or radio button. It will mark the element as checked. Optional Playwright
+ * `CheckOptions` can be provided via a data table.
+ */
+export async function When_I_check(this: CustomWorld, ...rest: any[]) {
+  if (!this.element) throw new Error("No element selected to check.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element.check(options);
+  this.log?.("✅ Checked stored element.");
+}
+When("I check", When_I_check);
+
+/**
+ * Unchecks the previously selected element (e.g., a checkbox).
+ *
+ * ```gherkin
+ * When I uncheck
+ * ```
+ *
+ * @example
+ * When I find element by label text "Agree to terms"
+ * And I uncheck
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to a checkbox. It will mark the element as unchecked. Optional Playwright
+ * `CheckOptions` can be provided via a data table.
+ */
+export async function When_I_uncheck(this: CustomWorld, ...rest: any[]) {
+  if (!this.element) throw new Error("No element selected to uncheck.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element.uncheck(options);
+  this.log?.("✅ Unchecked stored element.");
+}
+When("I uncheck", When_I_uncheck);
+
+/**
+ * Checks a specific input element, requiring a preceding step to select it.
+ *
+ * ```gherkin
+ * When I check input
+ * ```
+ *
+ * @example
+ * When I find element by selector "input#myCheckbox"
+ * And I check input
+ *
+ * @remarks
+ * This is an alias for "I check". It requires a preceding step that sets the
+ * {@link CustomWorld.element | current element} to an input element (like a checkbox or radio).
+ * Optional Playwright `CheckOptions` can be provided via a data table.
+ */
+export async function When_I_check_input(this: CustomWorld, ...rest: any[]) {
+  if (!this.element) throw new Error("No input selected to check.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element.check(options);
+  this.log?.("✅ Checked stored input.");
+}
+When("I check input", When_I_check_input);
+
+/**
+ * Unchecks a specific input element, requiring a preceding step to select it.
+ *
+ * ```gherkin
+ * When I uncheck input
+ * ```
+ *
+ * @example
+ * When I find element by selector "input#newsletter"
+ * And I uncheck input
+ *
+ * @remarks
+ * This is an alias for "I uncheck". It requires a preceding step that sets the
+ * {@link CustomWorld.element | current element} to an input element (like a checkbox).
+ * Optional Playwright `CheckOptions` can be provided via a data table.
+ */
+export async function When_I_uncheck_input(this: CustomWorld, ...rest: any[]) {
+  if (!this.element) throw new Error("No input selected to uncheck.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element.uncheck(options);
+  this.log?.("✅ Unchecked stored input.");
+}
+When("I uncheck input", When_I_uncheck_input);
+
+// =============================
+// WHEN I TYPE / SET VALUE
+// =============================
+
+/**
+ * Shared implementation for typing steps.
+ * @internal
+ */
+const typeStepImplementation = async function (
+  this: CustomWorld,
+  textOrAlias: string,
+  ...rest: any[]
+) {
+  if (!this.element) throw new Error("No element selected to type into.");
+
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseFillOptions(maybeTable) : {};
+  const text = textOrAlias.startsWith("@")
+    ? (this.data[textOrAlias.slice(1)] ??
+      (() => {
+        throw new Error(`No value found for alias "${textOrAlias}".`);
+      })())
+    : evaluateFaker(textOrAlias); // Evaluate faker directly here if it's not an alias
+
+  // Playwright's fill clears the field by default, but explicitly clearing can be safer
+  // await this.element.fill(""); // This explicit clear might not be necessary depending on Playwright version/behavior
+  await this.element.fill(text, options);
+  this.data.lastTyped = text; // Store the actual text typed for potential later use
+  this.log?.(`⌨️ Typed "${text}" into selected element.`);
+};
+
+/**
+ * Types the given text into the previously selected element.
+ *
+ * ```gherkin
+ * When I type {string}
+ * ```
+ *
+ * @example
+ * When I find element by selector "input[name='email']"
+ * And I type "user@example.com"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an input field (or any element that supports `fill`). The provided text can be a literal
+ * string or a faker expression (e.g., `{{internet.email}}`).
+ * Optional Playwright `FillOptions` can be provided via a data table.
+ */
+export const When_I_type = typeStepImplementation;
+When("I type {string}", When_I_type);
+
+/**
+ * Types the value stored in an alias into the previously selected element.
+ *
+ * ```gherkin
+ * When I type stored {string}
+ * ```
+ *
+ * @example
+ * Given I store "my.user@example.com" as "userEmail"
+ * When I find element by selector "input[name='email']"
+ * And I type stored "userEmail"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an input field. The `string` argument must be an alias (e.g., `userEmail`).
+ * The value associated with this alias in `this.data` will be typed into the element.
+ * Optional Playwright `FillOptions` can be provided via a data table.
+ */
+export const When_I_type_stored = typeStepImplementation;
+When("I type stored {string}", When_I_type_stored);
+
+/**
+ * Types a randomly generated value (using Faker.js) into the previously selected element.
+ *
+ * ```gherkin
+ * When I type random {string}
+ * ```
+ *
+ * @example
+ * When I find element by selector "input[name='username']"
+ * And I type random "internet.userName"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an input field. The `string` argument should be a Faker.js path (e.g., `internet.email`,
+ * `person.firstName`). A random value generated by Faker will be typed into the element.
+ * Optional Playwright `FillOptions` can be provided via a data table.
+ */
+export const When_I_type_random = typeStepImplementation;
+When("I type random {string}", When_I_type_random);
+
+/**
+ * Sets the value of the previously selected element.
+ *
+ * ```gherkin
+ * When I set value {string}
+ * ```
+ *
+ * @example
+ * When I find element by selector "input[name='password']"
+ * And I set value "@userPassword"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an input field (or any element that supports `fill`). The provided `valueOrAlias` can be
+ * a literal string, an alias (prefixed with `@`), or a Faker expression. This will directly
+ * set the input's value, which is generally faster than typing for non-interactive scenarios.
+ * Optional Playwright `FillOptions` can be provided via a data table.
+ */
+export async function When_I_set_value(this: CustomWorld, valueOrAlias: string, ...rest: any[]) {
+  if (!this.element) throw new Error("No element selected to set value.");
+
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseFillOptions(maybeTable) : {};
+  const value = valueOrAlias.startsWith("@")
+    ? (this.data[valueOrAlias.slice(1)] ??
+      (() => {
+        throw new Error(`No value found for alias "${valueOrAlias}".`);
+      })())
+    : evaluateFaker(valueOrAlias); // Evaluate faker directly here if it's not an alias
+
+  await this.element.fill(value, options);
+  this.data.lastValueSet = value; // Store the actual value set for potential later use
+  this.log?.(`📝 Set value of selected element to "${value}".`);
+}
+When("I set value {string}", When_I_set_value);
+
+/**
+ * Clears the value of the previously selected element.
+ *
+ * ```gherkin
+ * When I clear
+ * ```
+ *
+ * @example
+ * When I find element by selector "input[name='search']"
+ * And I clear
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an input field (or any element that supports `fill`). It effectively empties the input field.
+ */
+export async function When_I_clear(this: CustomWorld) {
+  if (!this.element) throw new Error("No element selected to clear.");
+  await this.element.fill("");
+  this.log?.("🧼 Cleared value of selected element.");
+}
+When("I clear", When_I_clear);
+
+/**
+ * Submits the form associated with the previously selected element, or the first form on the page.
+ *
+ * ```gherkin
+ * When I submit
+ * ```
+ *
+ * @example
+ * When I find element by selector "form#loginForm"
+ * And I submit
+ * # OR (submits the first form found if no element is selected)
+ * When I go to "/login"
+ * And I submit
+ *
+ * @remarks
+ * This step will find a form to submit. If {@link CustomWorld.element | this.element}
+ * is a form or an element within a form, that form will be submitted. Otherwise, it will
+ * attempt to submit the first `<form>` element found on the page.
+ * It uses a direct DOM `submit()` call, which bypasses Playwright's default event handling
+ * and can be useful for testing native form submission behavior.
+ */
+export async function When_I_submit(this: CustomWorld) {
+  // Use the current element if it's a form or within a form, otherwise default to the first form on the page.
+  const formLocator = this.element
+    ? this.element.locator("xpath=ancestor-or-self::form")
+    : this.page.locator("form").first();
+
+  if (!(await formLocator.isVisible())) {
+    throw new Error(
+      "No visible form found to submit. Ensure an element within a form is selected, or a form exists on the page."
+    );
+  }
+
+  await formLocator.evaluate((f: HTMLFormElement) => f.submit());
+  this.log?.("📨 Submitted form.");
+}
+When("I submit", When_I_submit);
+
+/**
+ * Selects an option by its visible text label in a `<select>` element.
+ *
+ * ```gherkin
+ * When I select option {string}
+ * ```
+ *
+ * @example
+ * When I find element by selector "select[name='role']"
+ * And I select option "Administrator"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to a `<select>` HTML element. It will then select the option whose visible text matches
+ * the provided `option` string.
+ * Optional Playwright `SelectOptionOptions` can be provided via a data table.
+ */
+export async function When_I_select_option(this: CustomWorld, option: string, ...rest: any[]) {
+  if (!this.element) throw new Error("No select element stored to select an option.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseSelectOptions(maybeTable) : {};
+  await this.element.selectOption({ label: option }, options);
+  this.log?.(`🔽 Selected option "${option}".`);
+}
+When("I select option {string}", When_I_select_option);
+
+/**
+ * Sets the file input of the previously selected element to the specified file path.
+ *
+ * ```gherkin
+ * When I select file {string}
+ * ```
+ *
+ * @example
+ * When I find element by selector "input[type='file']"
+ * And I select file "path/to/my/document.pdf"
+ *
+ * @remarks
+ * This step requires a preceding step that sets the {@link CustomWorld.element | current element}
+ * to an `input` element of `type="file"`. The `filePath` should be relative to your project's
+ * root or an absolute path. Playwright will automatically handle making the file available
+ * for upload.
+ * Optional Playwright `SetInputFilesOptions` can be provided via a data table.
+ */
+export async function When_I_select_file(this: CustomWorld, filePath: string, ...rest: any[]) {
+  if (!this.element) throw new Error("No file input selected to set a file.");
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseSelectOptions(maybeTable) : {}; // Note: parseSelectOptions is used here, assuming it returns `SetInputFilesOptions` compatible object or is generic enough. If not, a new parser for SetInputFilesOptions would be ideal.
+  await this.element.setInputFiles(filePath, options);
+  this.log?.(`📁 Set input file to "${filePath}".`);
+}
+When("I select file {string}", When_I_select_file);