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.
70 lines (69 loc) • 4.34 kB
TypeScript
import type { CustomWorld } from "../helpers/world";
/**
* 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 declare 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): Promise<void>;