playwright-cucumber-ts-steps 1.0.1 → 1.0.3

package/README.md

@@ -1,343 +1,369 @@
-# 🎭 playwright-cucumber-ts-steps
+# 🎭 Playwright Cucumber TS Steps
 
-[![NPM](https://nodei.co/npm/playwright-cucumber-ts-steps.png?downloads=true&downloadRank=true&stars=true&height=3)](https://nodei.co/npm/playwright-cucumber-ts-steps/)
+[![npm version](https://img.shields.io/npm/v/playwright-cucumber-ts-steps?style=flat-square&color=blue)](https://www.npmjs.com/package/playwright-cucumber-ts-steps)
+[![Downloads](https://img.shields.io/npm/dm/playwright-cucumber-ts-steps?style=flat-square)](https://www.npmjs.com/package/playwright-cucumber-ts-steps)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![Playwright](https://img.shields.io/badge/tested%20with-Playwright-blueviolet?style=flat-square&logo=playwright)](https://playwright.dev)
+[![TypeScript](https://img.shields.io/badge/written%20in-TypeScript-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
+[![GitHub stars](https://img.shields.io/github/stars/qaPaschalE/playwright-cucumber-ts-steps)](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/stargazers)
 
-<table align="center" style="margin-bottom:30px;"><tr><td align="center" width="9999" heigth="9999" >
- <img src="https://github.com/qaPaschalE/k6-cucumber-steps/blob/main/assets/paschal%20logo%20(2).png?raw=true" alt="paschal Logo" style="margin-top:25px;" align="center"/>
-</td></tr></table>
+**The "Low-Code" BDD Framework for Playwright.**
 
-[![npm](https://img.shields.io/npm/v/playwright-cucumber-ts-steps?logo=npm)](https://www.npmjs.com/package/playwright-cucumber-ts-steps)
-[![License](https://img.shields.io/github/license/qaPaschalE/playwright-cucumber-ts-steps?logo=github)](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/blob/main/LICENSE)
-[![Node.js](https://img.shields.io/badge/node-%3E=18-green?logo=node.js)](https://nodejs.org/)
-[![Build Status](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/actions/workflows/build.yml/badge.svg?branch=main)](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/actions)
-[![TypeScript](https://img.shields.io/badge/types-TypeScript-blue?logo=typescript)](https://www.npmjs.com/package/playwright-cucumber-ts-steps)
-[![Issues](https://img.shields.io/github/issues/qaPaschalE/playwright-cucumber-ts-steps?logo=github)](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/issues)
-[![Stars](https://img.shields.io/github/stars/qaPaschalE/playwright-cucumber-ts-steps?logo=github)](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/stargazers)
+Write powerful end-to-end tests in plain English using Gherkin syntax, without managing complex glue code. `playwright-cucumber-ts-steps` provides a pre-built library of robust steps for UI, API, and Authentication testing, running natively inside Playwright.
 
-> A collection of reusable Playwright step definitions for Cucumber in TypeScript, designed to streamline end-to-end testing across web, API, and mobile applications.
+---
 
-> **Note:** This package is designed for advanced Cucumber+Playwright+TypeScript setups. For basic Playwright usage, see the [official Playwright docs](https://playwright.dev/).
+## 🚀 Features
 
-## ✨ Features
+- **Zero Boilerplate:** Install and start writing `.feature` files immediately.
+- **Hybrid Testing:** Mix **UI**, **API**, and **Database** steps in a single scenario.
+- **Smart Auth:** Login once, save the session, and reuse it across thousands of tests.
+- **Native Performance:** Runs purely on Playwright (no heavy Cucumber-JS wrapper), giving you Parallelism, Tracing, and Retries out of the box.
+- **Tag Filtering:** Run specific tests like `@smoke` or `@regression` easily.
+- **Auto-Reporting:** Built-in helper for HTML and Slack reports with **screenshots on failure**.
 
-- 🧩 Plug-and-play Cucumber step definitions
-- 🎯 Support for **UI**, **API**, **mobile**, **iframe**, **hybrid login**, and **visual testing**
-- 🧠 Smart **session management** via storageState, `localStorage`, `sessionStorage`, and alias reuse
-- 🗂️ **Alias**, **Faker**, `.env`, and dynamic JSON fixture support
-- 📸 **Screenshot** on failure, 🎥 **video recording**, and 🖼️ **visual diff** with baseline comparison
-- 📤 Supports **file upload**, **drag-and-drop**, and **multi-user session flows**
-- 🌐 Fully supports **API requests with inline assertions**, payload from custom folders, and session injection
-- ✅ Compatible with both `Page` and `FrameLocator` contexts (iframe-aware)
+---
 
 ## 📦 Installation
 
 ```bash
-npm install playwright-cucumber-ts-steps
+npm install playwright-cucumber-ts-steps @playwright/test
 ```
 
-or
-
 ```bash
-yarn add playwright-cucumber-ts-steps
+npx playwright install
 ```
 
 ---
 
-## 🧠 Prerequisites
+## ⚡ Quick Start Guide
 
-Ensure your project is already set up with:
+### 1. Configure Playwright
 
-- [`@playwright/test`](https://playwright.dev/)
-- [`@cucumber/cucumber`](https://github.com/cucumber/cucumber-js)
-- TypeScript
-- Cucumber IDE plugin (Optional), but Highly recommended
+Update `playwright.config.ts` to use the built-in reporting helper.
 
-If not, run:
+```typescript
+import { defineConfig } from "@playwright/test";
+import { getReporters } from "playwright-cucumber-ts-steps";
 
-```bash
-npm install --save-dev @playwright/test @cucumber/cucumber typescript ts-node
-npx playwright install
+export default defineConfig({
+  testDir: "./tests",
+  // Sets up HTML report + Console list automatically
+  reporter: getReporters({ on: ["html"] }),
+  use: {
+    // We handle screenshots manually in the runner,
+    // but this is good as a backup
+    screenshot: "only-on-failure",
+  },
+});
 ```
 
-## 📘 Step Definition Documentation
+### 2. Create the Runner
 
-👉 [View Steps Documentation](https://qapaschale.github.io/playwright-cucumber-ts-steps/) and [examples](https://github.com/qaPaschale/playwright-cucumber-ts-steps/tree/master/playwright/e2e).
+Create a file at `tests/bdd.spec.ts`. This is the entry point.
 
----
+```typescript
+import { runTests } from "playwright-cucumber-ts-steps";
 
-## 🛠️ Usage
+// Runs all feature files in the 'features' folder
+runTests("features/*.feature");
+```
 
-1. **Load step definitions** from the package:
+### 3. Write Your Feature
 
-   ```ts
-   // e2e/steps/index.ts
-   import "playwright-cucumber-ts-steps/register";
-   ```
+Create `features/login.feature`:
 
-2. **Use step definitions in your feature files**:
+```gherkin
+Feature: User Authentication
+
+  @smoke
+  Scenario: Successful Login
+    Given I visit "[https://the-internet.herokuapp.com/login](https://the-internet.herokuapp.com/login)"
+    When I fill "#username" with "tomsmith"
+    And I fill "#password" with "SuperSecretPassword!"
+    And I click "button[type='submit']"
+    Then I expect "#flash" to contain text "You logged into a secure area!"
 
-   ```gherkin
-   Feature: Login
+```
 
-     Scenario: User logs in
-       Given I visit "/login"
-       When I find input by name "Email"
-       And I type "user@example.com"
-       And I click button "Login"
-       Then I see visible text "Welcome"
-       Then I do not see URL contains "/login"
+### 4. Run Tests
 
-   ```
+```bash
+npx playwright test demo.spec.ts --headed
+```
 
 ---
 
-## 🧪 Step Categories
+## 🏷️ Tags & Filtering
 
-- ✅ **Assertions**: `I see text`, `I do not see text`, `I see button`, `I see value`, etc.
-- 🎬 **Actions**: `I click`, `I type`, `I wait`, `I switch to iframe`, etc.
-- 📄 **Forms**: `I fill the following`, aliasing, dynamic faker values
-- 🌐 **API**: Request mocking, assertions, response validation
-- 📱 **Mobile support**: Enable with `@mobile` tag (iPhone 13 emulation)
-- 👁️ **Visual testing**: Enable with `@visual` tag (pixelmatch diff)
+You can use tags to organize your tests and run specific subsets (e.g., only Smoke tests).
 
----
+**In your Feature file:**
 
-## 🧰 Customization
+```gherkin
+Feature: Checkout
 
-You can extend the base `CustomWorld` and define your own steps:
+  @smoke @critical
+  Scenario: Guest Checkout
+    ...
 
-```ts
-// custom-world.ts
-import { CustomWorld as BaseWorld } from "playwright-cucumber-ts-steps";
+  @regression
+  Scenario: Registered User Checkout
+    ...
 
-export class CustomWorld extends BaseWorld {
-  // Add your custom context or helpers here
-}
 ```
 
----
+**In your Test Runner (`tests/bdd.spec.ts`):**
 
-## 🔍 Tags & Aliases
+```typescript
+import { runTests } from "playwright-cucumber-ts-steps";
 
-- Use aliases with `@alias` syntax:
+// OPTION 1: Run Everything
+// runTests('features/*.feature');
 
-  ```gherkin
-  Given I get element by selector "[type='text_selector']"
-  And I store element text as "welcomeText"
-  Then I see "@welcomeText" in the element
-  ```
+// OPTION 2: Run only Smoke tests
+runTests("features/*.feature", { tags: "@smoke" });
+```
+
+---
 
-- Use faker:
+## 💡 Various Usage Examples
 
-  ```gherkin
-  // Here below "Email" represents a faker variable "Email: () => faker.internet.email()", Continue button containing text with action click, best for Forms
+### 1. API Testing (Backend Validation)
 
-   When I fill the following "example form page" form data:
-      | Target         | Value            |
-      | [name='email'] | Email            |
-      | Continue       | Click            |
-  ```
+You can validate your backend directly without opening a browser, or mix it with UI tests.
 
----
+```gherkin
+Feature: User API
 
-## 📸 Advanced Usage
+  @api
+  Scenario: Create and Verify User
+    When I make a POST request to "[https://reqres.in/api/users](https://reqres.in/api/users)" with body '{"name": "Morpheus", "job": "Leader"}'
+    Then I expect the response status to be 201
+    And I expect the response property "name" to be "Morpheus"
 
-These features are **optional** and can be implemented in your own `cucumber.js`:
+```
 
-- 📷 **Visual regression testing** with pixelmatch
-- 🎥 **Video recording per scenario**
-- 🔐 **Session reuse** using `storageState`
+### 2. Advanced Elements (Iframes & Uploads)
 
----
+Handling complex HTML elements is built-in.
 
----
+```gherkin
+Feature: File Upload and Iframes
 
-### ✅ Additional Supported Step Features
-
-| Feature Type     | Description                                                                           |
-| ---------------- | ------------------------------------------------------------------------------------- |
-| `fill form data` | Use `When I fill the following "Login" form data:` to perform actions like:           |
-|                  | - `fill`, `click`, `check`, `select`, `upload:<file>`                                 |
-|                  | - `drag:<targetSelector>` for drag-and-drop                                           |
-|                  | - `assert:visible`, `assert:text:<value>`                                             |
-|                  | - `request:<METHOD>:<URL>:<payload>.json`                                             |
-|                  | - `set:localStorage:<key>`, `set:sessionStorage:<key>`                                |
-|                  | - `wait:<ms>`, `reload`, and use alias `@aliasName`                                   |
-| Session Handling | Steps like `I login with a session data "admin.json"`, `I save session as "customer"` |
-| Session Restore  | `I restore session cookies "customer" [with reload] [using localStorage]`             |
-| API Assertions   | Validate JSON response with `assert:json:key=expectedValue`                           |
+  Scenario: Upload Document inside Iframe
+    Given I visit "[https://example.com/upload](https://example.com/upload)"
+    # Switch context to the iframe
+    When I upload file "data/resume.pdf" to "#file-input" inside frame "#upload-iframe"
+    And I click "#submit-btn" inside frame "#upload-iframe"
+    Then I expect "div.success" inside frame "#upload-iframe" to be visible
 
----
+```
+
+### 3. The "Login Once" Pattern (Authentication)
 
-### ✅ Extended Usage Examples
+Speed up your suite by 10x. Login once, save the cookies, and reuse them.
+
+**Step 1: Create a Setup Feature (`features/setup.feature`)**
 
 ```gherkin
-Scenario: Login and save session
-  When I fill the following "Login" form data:
-    | input[name='email']        | test@example.com            |
-    | input[name='password']     | @userPassword               |
-    | input[type='checkbox']     | check                       |
-    | button:has-text("Sign In") | click                       |
-    | .welcome                   | assert:visible              |
-    | .role                      | assert:text:Admin           |
-  And I save session as "admin"
-
-Scenario: Restore user session
-  Given I restore session cookies "admin" with reload using localStorage
-  When I visit "/dashboard"
-  Then I see text "Welcome back"
-
-Scenario: API login + inject session
-  When I fill the following "Login" form data:
-    | request:POST:/api/login:adminPayload.json | saveAs:loginData     |
-    | set:localStorage:token                    | @loginData.token     |
-    | save session as                           | adminViaAPI          |
+Feature: Setup
+
+  @setup
+  Scenario: Admin Login
+    Given I visit "/login"
+    When I fill "#user" with "admin"
+    And I fill "#pass" with "1234"
+    And I click "#login-btn"
+    And I expect "#dashboard" to be visible
+    # Saves session to ./auth/admin.json
+    And I save the browser state to "admin.json"
+
 ```
 
----
+**Step 2: Use in Daily Tests (`features/admin.feature`)**
+
+```gherkin
+Feature: Admin Panel
+
+  Scenario: Check Reports
+    # Loads cookies instantly - No login UI needed!
+    Given I load the browser state from "admin.json"
+    When I visit "/admin/reports"
+    Then I expect "h1" to have text "Weekly Reports"
 
-### ✅ Folder Structure Suggestion
-
-```text
-e2e/
-├── features/                        # .feature files
-├── step_definitions/
-│   └── index.ts                    # import from this package
-├── support/
-│   ├── world.ts                    # CustomWorld extends with iframe support
-│   ├── hooks.ts                    # artifact & session manager
-│   └── helpers/
-│       └── resolveUtils.ts        # alias/env/json resolver
-├── test-data/                      # JSON fixtures
-├── payload/                        # API request payloads
 ```
 
----
+### 4. Data Tables (Forms)
 
-Here’s a full `cucumber.js` config file that includes **all the configurable options** integrated so far. This supports:
+Fill out entire forms in a single step using a Data Table. You can type, click, check, or assert visibility in one go.
 
-- ✅ CLI/env override for artifact directories
-- ✅ Visual testing toggle
-- ✅ Screenshot and video toggle
-- ✅ Device emulation via `MOBILE_DEVICE` env or world param
-- ✅ Multiple profiles (`default`, `mobile`, `visual`, `ci`)
-- ✅ Parallel test execution and ts-node for TypeScript support
+```gherkin
+Scenario: Registration
+  When I fill the following "Registration" form data:
+    | #first-name | John           |
+    | #last-name  | Doe            |
+    | #email      | john@test.com  |
+    | #newsletter | check          |
+    | #submit-btn | click          |
+    | .success    | assert:visible |
+```
 
----
+### 5. API Testing (Tables & Files)
 
-### ✅ `cucumber.js`
+Validate your backend directly. You can send payloads via Tables or JSON Files.
 
-```js
-import path from "path";
-import dotenv from "dotenv";
+#### Option A: Data Table Payload
 
-dotenv.config();
+```gherkin
+Scenario: Create User (Table)
+  When I make a POST request to "[https://reqres.in/api/users](https://reqres.in/api/users)" with data:
+    | name | Neo        |
+    | job  | The Chosen |
+  Then I expect the response status to be 201
+  And I expect the response property "name" to be "Neo"
+```
 
-const ARTIFACT_DIR = process.env.TEST_ARTIFACT_DIR || "test-artifacts";
+#### Option B: File Payload
 
-const defaultWorldParams = {
-  artifactDir: ARTIFACT_DIR,
-  payloadDir: "payloads",
-  enableTrace: process.env.ENABLE_TRACE || "fail", // "false" | "fail" | "all"
-  enableScreenshots: process.env.ENABLE_SCREENSHOTS || "fail", // "false" | "fail" | "all"
-  enableVideos: process.env.ENABLE_VIDEOS || "all", // "false" | "fail" | "all"
-  enableVisualTest: process.env.ENABLE_VISUAL_TEST === "true",
-  device: process.env.MOBILE_DEVICE || undefined, // e.g., "Pixel 5"
-};
+```gherkin
+Scenario: Create User (File)
+  # Reads from 'data/user.json' in your project root
+  When I make a POST request to "/api/users" with payload from "data/user.json"
+  Then I expect the response status to be 201
+```
 
-export default {
-  default: {
-    require: ["ts-node/register", "src/test/steps/**/*.ts", "src/test/support/**/*.ts"],
-    format: ["progress", `html:${path.join(ARTIFACT_DIR, "report.html")}`],
-    publishQuiet: true,
-    paths: ["src/test/features/**/*.feature"],
-    parallel: 2,
-    worldParameters: defaultWorldParams,
-  },
+### 6. Network Mocking
 
-  mobile: {
-    require: ["ts-node/register", "src/test/steps/**/*.ts", "src/test/support/**/*.ts"],
-    format: ["progress"],
-    publishQuiet: true,
-    paths: ["src/test/features/**/*.feature"],
-    parallel: 1,
-    tags: "@mobile",
-    worldParameters: {
-      ...defaultWorldParams,
-      device: process.env.MOBILE_DEVICE || "iPhone 13 Pro",
-    },
-  },
+Simulate backend responses to test UI behavior without relying on real APIs.
 
-  visual: {
-    require: ["ts-node/register", "src/test/steps/**/*.ts", "src/test/support/**/*.ts"],
-    format: ["progress"],
-    publishQuiet: true,
-    paths: ["src/test/features/**/*.feature"],
-    tags: "@visual",
-    worldParameters: {
-      ...defaultWorldParams,
-      enableVisualTest: true,
-    },
-  },
+```gherkin
+Scenario: Mocking User Profile
+  # Intercept calls to /api/user/1 and return fake data
+  Given I mock the API endpoint "*/**/api/user/1" with body '{"name": "Mocked User"}'
+
+  # When the UI calls the API, it gets our fake data
+  When I visit "/profile"
+  Then I expect "#username-display" to have text "Mocked User"
 
-  ci: {
-    require: ["ts-node/register", "src/test/steps/**/*.ts", "src/test/support/**/*.ts"],
-    format: ["progress", `json:${path.join(ARTIFACT_DIR, "report.json")}`],
-    publishQuiet: true,
-    paths: ["src/test/features/**/*.feature"],
-    parallel: 4,
-    worldParameters: {
-      ...defaultWorldParams,
-      enableScreenshots: true,
-      enableVideos: true,
-      enableVisualTest: false,
-    },
-  },
-};
 ```
 
----
+### 7. Database Testing (Adapter Pattern)
 
-### ✅ Usage Examples
+You can validate database states by injecting your own DB driver into the runner.
 
-```bash
-# Run default suite
-npx cucumber-js --config cucumber.js
+**1. In your `bdd.spec.ts`:**
+
+```typescript
+import { runTests } from "playwright-cucumber-ts-steps";
+import pg from "pg"; // Your driver (pg, mysql, mongo, etc)
 
-# Run mobile tests with device from env
-MOBILE_DEVICE="Pixel 5" npx cucumber-js --config cucumber.js --profile mobile
+// wrapper function
+const queryDb = async (query: string) => {
+  const client = new pg.Client(process.env.DB_URL);
+  await client.connect();
+  const res = await client.query(query);
+  await client.end();
+  return res.rows; // Must return an array of objects
+};
+
+runTests("features/*.feature", { dbQuery: queryDb });
+```
 
-# Run visual regression tests
-ENABLE_VISUAL_TEST=true npx cucumber-js --config cucumber.js --profile visual
+**2. In your `Feature file`:**
 
-# Run in CI profile with JSON output
-npx cucumber-js --config cucumber.js --profile ci
+```gherkin
+Scenario: Create User
+  When I run the database query "INSERT INTO users (name) VALUES ('Bob')"
+  Then I expect the database to return 1 record
+  And I expect the first database record to contain:
+    | name | Bob |
 ```
 
 ---
 
-### ✅ Summary of Supported Options
+## 📖 Step Glossary (Cheat Sheet)
+
+### 🖱️ Actions
+
+| Step             | Usage Example                          |
+| ---------------- | -------------------------------------- |
+| **Visit**        | `I visit "https://google.com"`         |
+| **Click**        | `I click "#submit-btn"`                |
+| **Force Click**  | `I force click "#hidden-btn"`          |
+| **Double Click** | `I double click ".icon"`               |
+| **Fill Input**   | `I fill "#email" with "user@test.com"` |
+| **Press Key**    | `I press "Enter"` (or "Tab", "Escape") |
+| **Wait**         | `I wait for 2000 milliseconds`         |
+| **Reload**       | `I reload the page`                    |
+| **Go Back**      | `I go back`                            |
+
+### ✅ Assertions
+
+| Step             | Usage Example                                                  |
+| ---------------- | -------------------------------------------------------------- |
+| **Visibility**   | `I expect "#modal" to be visible`                              |
+| **Hidden**       | `I expect "#loader" to be hidden`                              |
+| **Exact Text**   | `I expect "#header" to have text "Welcome"`                    |
+| **Partial Text** | `I expect ".error" to contain text "Failed"`                   |
+| **Input Value**  | `I expect "#username" to have value "admin"`                   |
+| **Exact URL**    | `I expect the url to be "https://site.com/home"`               |
+| **Partial URL**  | `I expect the url to contain "/dashboard"`                     |
+| **Title**        | `I expect the title to contain "Home Page"`                    |
+| **Attribute**    | `I expect "img" to have attribute "src" with value "logo.png"` |
+| **Screenshot**   | `I expect the page screenshot to match "home.png"`             |
+
+### 🧩 Forms & Elements
+
+| Step                  | Usage Example                                  |
+| --------------------- | ---------------------------------------------- |
+| **Select (Dropdown)** | `I select option "Canada" from "#country"`     |
+| **Check Box**         | `I check "#terms-checkbox"`                    |
+| **Uncheck**           | `I uncheck "#newsletter"`                      |
+| **Upload File**       | `I upload file "data.csv" to "#upload"`        |
+| **Handle Alert**      | `I accept the next dialog`                     |
+| **Frame Click**       | `I click "#btn" inside frame "#payment-frame"` |
+
+### 🌐 API
+
+| Step             | Usage Example                                                 |
+| ---------------- | ------------------------------------------------------------- |
+| **GET**          | `I make a GET request to "/api/users"`                        |
+| **DELETE**       | `I make a DELETE request to "/api/users/1"`                   |
+| **POST**         | `I make a POST request to "/api/login" with body '{"u":"1"}'` |
+| **Status Check** | `I expect the response status to be 200`                      |
+| **JSON Check**   | `I expect the response property "data.id" to be "99"`         |
 
-| Setting            | CLI/Env Variable     | `worldParameters` Key | Purpose                                     |
-| ------------------ | -------------------- | --------------------- | ------------------------------------------- |
-| Screenshot toggle  | `ENABLE_SCREENSHOTS` | `enableScreenshots`   | Capture screenshots on failure              |
-| Video toggle       | `ENABLE_VIDEOS`      | `enableVideos`        | Enable/disable video recording              |
-| Visual testing     | `ENABLE_VISUAL_TEST` | `enableVisualTest`    | Capture and compare visual snapshots        |
-| Artifact directory | `TEST_ARTIFACT_DIR`  | `artifactDir`         | Where to save screenshots, videos, etc.     |
-| Mobile device emu  | `MOBILE_DEVICE`      | `device`              | Device name for Playwright mobile emulation |
+---
 
-## 🧾 License
+## 🛠️ Extending (Custom Steps)
 
-[MIT](LICENSE)
+Need a step that isn't included? You can easily register your own in your spec file.
 
----
+```typescript
+// tests/bdd.spec.ts
+import { runTests, Step } from "playwright-cucumber-ts-steps";
+
+// 1. Define custom step
+Step("I scroll to the bottom of the page", async (page) => {
+  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+});
+
+// 2. Run tests
+runTests("features/*.feature");
+```
+
+Then use it in your feature:
 
-## 🙋‍♂️ Contributing
+```gherkin
+Scenario: Scroll Test
+  Given I visit "[https://infinite-scroll.com](https://infinite-scroll.com)"
+  When I scroll to the bottom of the page
 
-Contributions, improvements, and suggestions are welcome! Feel free to open an issue or pull request.
+```
 
 ---
 
-## 💬 Questions?
+## 📄 License
 
-Open an issue on [GitHub Issues](https://github.com/qaPaschalE/playwright-cucumber-ts-steps/issues) or reach out via discussions.
+MIT © 2024

package/dist/backend/actions/formTable.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const registry_1 = require("../../core/registry");
+const test_1 = require("@playwright/test");
+// CHANGE: Removed the ':' at the end of the string below
+(0, registry_1.Step)("I fill the following {string} form data", async (page, formName, tableData) => {
+    console.log(`📝 Processing Form: ${formName}`);
+    // The runner passes the table data as the last argument
+    // tableData = [ ['#username', 'tomsmith'], ['#password', '...'] ]
+    // Guard clause: Ensure tableData exists to prevent crashes if user forgets the table
+    if (!tableData || !Array.isArray(tableData)) {
+        throw new Error(`❌ The step "I fill the following '${formName}' form data" requires a Data Table below it.`);
+    }
+    for (const row of tableData) {
+        const selector = row[0];
+        const value = row[1];
+        if (value === "click") {
+            await page.click(selector);
+        }
+        else if (value === "check") {
+            await page.check(selector);
+        }
+        else if (value === "assert:visible") {
+            await (0, test_1.expect)(page.locator(selector)).toBeVisible();
+        }
+        else if (value.startsWith("assert:text:")) {
+            const text = value.replace("assert:text:", "");
+            await (0, test_1.expect)(page.locator(selector)).toHaveText(text);
+        }
+        else {
+            await page.fill(selector, value);
+        }
+    }
+});

package/dist/backend/actions/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./navigation");
+require("./interactions");
+require("./formTable");