playwright-cucumber-ts-steps 0.1.5 → 0.1.7

package/src/actions/fillFormSteps.ts

@@ -0,0 +1,213 @@
+import fs from "fs";
+import path from "path";
+import { When } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import { resolveLoginValue } from "../helpers/utils/resolveUtils";
+import type { CustomWorld } from "../helpers/world";
+
+/* 
+    * This file contains the step definitions for filling out forms in Playwright.
+    * It supports various actions like filling inputs, clicking buttons, checking checkboxes,
+    * uploading files, and handling requests.
+    * Feature: User login with hybrid form and API session
+
+  Background:
+    Given I open the application homepage
+
+  Scenario: Login as Admin via UI and save session
+    When I fill the following "Login" 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      |
+    Then I save session as "sessionAdmin.json"
+
+  Scenario: Restore session and assert dashboard
+    Given I restore session cookies "sessionAdmin.json" with reload
+    Then .user-role should contain text "Admin"
+
+  Scenario: Login via API request and inject session
+    When I fill the following "Login" form data:
+      | Target                         | Value                                        |
+      | request:POST:/api/auth/login:adminLogin.json |                               |
+      | set:localStorage:auth_token    | @lastApiResponse.token                       |
+      | wait                           | wait:1000                                    |
+      | reload                         |                                              |
+      | .dashboard-header              | assert:visible                               |
+    Then I save session as "apiSessionAdmin.json"
+
+  Scenario: Upload, drag, and assert form
+    When I fill the following "Profile" form data:
+      | Target                        | Value                             |
+      | input[type='file']           | upload:fixtures/profile-pic.jpg   |
+      | div.upload-target            | drag:.upload-preview              |
+      | .upload-success              | assert:visible                    |
+
+  Scenario: Login as reviewer and save session for approval flows
+    When I fill the following "Login" form data:
+      | Target                             | Value                          |
+      | input[placeholder='email']         | reviewer@email.com             |
+      | input[placeholder='password']      | REVIEWER_PASS                  |
+      | button:has-text("Login")           | click                          |
+      | .user-role                         | assert:text:Reviewer           |
+    Then I save session as "sessionReviewer.json"
+
+    */
+// Explicitly type each row
+type ActionRow = {
+  Target: string;
+  Value: string;
+  PayloadDir?: string;
+  SaveAs?: string;
+};
+
+When(
+  "I fill the following {string} form data:",
+  async function (this: CustomWorld, _formName: string, dataTable) {
+    // const scope = this.frame ?? this.page;
+    const rows = dataTable.hashes() as ActionRow[];
+
+    for (const row of rows) {
+      const target = row.Target.trim();
+      const rawValue = row.Value.trim();
+      const locator = this.getLocator(target);
+      const value = resolveLoginValue(rawValue, this);
+
+      // ✅ Assertions
+      if (rawValue.startsWith("assert:")) {
+        const [, type, expected] = rawValue.split(":");
+
+        if (type === "visible") {
+          await expect(locator).toBeVisible();
+        } else if (type === "text") {
+          await expect(locator).toHaveText(expected ?? "", {
+            useInnerText: true,
+          });
+        } else if (type === "value") {
+          await expect(locator).toHaveValue(expected ?? "");
+        } else {
+          throw new Error(`❌ Unknown assertion: ${type}`);
+        }
+
+        continue;
+      }
+
+      // ✅ UI interactions
+      if (rawValue === "click") {
+        await locator.click();
+        continue;
+      }
+
+      if (rawValue === "check") {
+        await locator.check();
+        continue;
+      }
+
+      if (rawValue === "uncheck") {
+        await locator.uncheck();
+        continue;
+      }
+
+      if (rawValue === "select") {
+        await locator.selectOption({ index: 0 });
+        continue;
+      }
+
+      // ✅ File upload
+      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: ${filePath}`);
+        await locator.setInputFiles(resolvedPath);
+        continue;
+      }
+
+      // ✅ Drag and drop
+      if (rawValue.startsWith("drag:")) {
+        const targetSelector = rawValue.split("drag:")[1].trim();
+        const targetLocator = this.getLocator(targetSelector);
+        await locator.dragTo(targetLocator);
+        continue;
+      }
+
+      // ✅ Local/sessionStorage
+      if (rawValue.startsWith("set:localStorage:")) {
+        const [, , key] = rawValue.split(":");
+        if (typeof key !== "string" || !key) {
+          throw new Error("Local storage key must be a non-empty string");
+        }
+        await this.page.evaluate(([k, v]) => localStorage.setItem(k, v), [key, value ?? ""]);
+        continue;
+      }
+
+      if (rawValue.startsWith("set:sessionStorage:")) {
+        const [, , key] = rawValue.split(":");
+        if (typeof key !== "string" || key === undefined) {
+          throw new Error("Session storage key must be a string");
+        }
+        await this.page.evaluate(
+          (args: string[]) => {
+            const [k, v] = args;
+            sessionStorage.setItem(k, v);
+          },
+          [key, value ?? ""]
+        );
+        continue;
+      }
+
+      // ✅ Wait
+      if (rawValue.startsWith("wait:")) {
+        const [, timeMs] = rawValue.split(":");
+        const waitTime = Number(timeMs);
+        if (!isNaN(waitTime)) {
+          await this.page.waitForTimeout(waitTime);
+        }
+        continue;
+      }
+
+      // ✅ Reload
+      if (rawValue === "reload") {
+        await this.page.reload();
+        continue;
+      }
+
+      // ✅ Request handling
+      if (rawValue.startsWith("request:")) {
+        const [, method, url, file] = rawValue.replace("request:", "").split(":");
+
+        const payloadDir = row.PayloadDir || this.parameters?.payloadDir || "payload";
+        const filePath = path.resolve(payloadDir, file);
+
+        if (!fs.existsSync(filePath)) {
+          throw new Error(`Payload file not found: ${filePath}`);
+        }
+
+        const payload = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+        const response = await this.page.request[
+          method.toLowerCase() as "post" | "put" | "patch" | "get"
+        ](url, {
+          data: payload,
+        });
+
+        const responseBody = await response.json();
+        this.data.lastApiResponse = responseBody;
+        this.data.lastStatusCode = response.status();
+
+        if (row.SaveAs) {
+          this.data[row.SaveAs] = responseBody;
+        }
+
+        continue;
+      }
+
+      // ✅ Default: fill
+      if (value !== undefined) {
+        await locator.fill(String(value));
+      }
+    }
+  }
+);

package/src/actions/inputSteps.ts

@@ -0,0 +1,118 @@
+// e2e/step_definitions/common/actions/inputSteps.ts
+// import fs from "fs";
+// import path from "path";
+import { When } from "@cucumber/cucumber";
+import { evaluateFaker } from "../helpers/utils/fakerUtils";
+import {
+  parseCheckOptions,
+  parseFillOptions,
+  parseSelectOptions,
+} from "../helpers/utils/optionsUtils";
+import { CustomWorld } from "../helpers/world";
+
+When("I check", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element?.check(options);
+  this.log?.("✅ Checked stored checkbox");
+});
+
+When("I uncheck", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  await this.element?.uncheck(options);
+  this.log?.("✅ Unchecked stored checkbox");
+});
+
+When("I check input", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  if (!this.element) throw new Error("No input selected");
+  await this.element.check(options);
+});
+
+When("I uncheck input", async function (this: CustomWorld, ...rest: any[]) {
+  const maybeTable = rest[0];
+  const options = maybeTable?.rowsHash ? parseCheckOptions(maybeTable) : {};
+  if (!this.element) throw new Error("No input selected");
+  await this.element.uncheck(options);
+});
+
+// const DEFAULT_PAYLOAD_DIR = "payload";
+
+const typeStep = async function (this: CustomWorld, textOrAlias: string, ...rest: any[]) {
+  if (!this.element) throw new Error("No element selected");
+
+  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);
+
+  await this.element.fill("");
+  await this.element.fill(text, options);
+  this.data.lastTyped = text;
+  this.log?.(`⌨️ Typed "${text}" into selected element`);
+};
+
+When("I type {string}", typeStep);
+When("I type stored {string}", typeStep);
+When("I type random {string}", typeStep);
+
+When(
+  "I set value {string}",
+  async function (this: CustomWorld, valueOrAlias: string, ...rest: any[]) {
+    if (!this.element) throw new Error("No element selected");
+
+    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);
+
+    await this.element.fill(value, options);
+    this.data.lastValueSet = value;
+    this.log?.(`📝 Set value to "${value}"`);
+  }
+);
+
+When("I clear", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("No element selected");
+  await this.element.fill("");
+  this.log?.("🧼 Cleared value of selected element");
+});
+
+When("I submit", async function (this: CustomWorld) {
+  // const maybeTable = rest[0];
+  const form = this.element ?? this.page.locator("form");
+  await form.evaluate((f: HTMLFormElement) => f.submit());
+  this.log?.("📨 Submitted form");
+});
+
+When(
+  "I select option {string}",
+  async function (this: CustomWorld, option: string, ...rest: any[]) {
+    if (!this.element) throw new Error("No select element stored");
+    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 file {string}",
+  async function (this: CustomWorld, filePath: string, ...rest: any[]) {
+    if (!this.element) throw new Error("No file input selected");
+    const maybeTable = rest[0];
+    const options = maybeTable?.rowsHash ? parseSelectOptions(maybeTable) : {};
+    await this.element.setInputFiles(filePath, options);
+    this.log?.(`📁 Set input file to "${filePath}"`);
+  }
+);

package/src/actions/interceptionSteps.ts

@@ -0,0 +1,87 @@
+// e2e/step_definitions/common/interceptionSteps.ts
+import { When, DataTable } from "@cucumber/cucumber";
+// import { expect } from "@playwright/test";
+import { CustomWorld } from "../helpers/world";
+let lastResponse: any;
+
+When("I intercept URL {string} and stub body:", async function (url: string, body: string) {
+  let parsedBody: any;
+  try {
+    parsedBody = JSON.parse(body);
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    throw new Error(`Failed to parse JSON body: ${message}`);
+  }
+
+  await this.page.route(url, (route: import("playwright").Route) => {
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(parsedBody),
+    });
+  });
+
+  this.log(`Intercepted and stubbed URL "${url}" with body: ${JSON.stringify(parsedBody)}`);
+});
+
+//Making Direct API Requests (Optional, Advanced)
+When("I make request to {string}", async function (url: string) {
+  const response = await this.page.request.get(url);
+  const status = response.status();
+  const body = await response.text();
+  this.data.lastResponse = { status, body };
+  this.log(`Made GET request to "${url}" — Status: ${status}`);
+});
+
+When(
+  "I make a POST request to {string} with JSON body:",
+  async function (url: string, docString: string) {
+    let payload: any;
+    try {
+      payload = JSON.parse(docString);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e);
+      throw new Error(`Invalid JSON: ${message}`);
+    }
+
+    const response = await this.page.request.post(url, { data: payload });
+    const status = response.status();
+    const body = await response.text();
+    this.data.lastResponse = { status, body };
+    this.log(`Made POST request to "${url}" — Status: ${status}`);
+  }
+);
+
+When("I intercept URL {string}", async function (this: CustomWorld, url: string) {
+  await this.page.route(url, async (route) => {
+    await route.continue();
+  });
+});
+
+When(
+  "I intercept URL {string} and stub body {string}",
+  async function (this: CustomWorld, url: string, body: string) {
+    await this.page.route(url, (route) => {
+      route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body,
+      });
+    });
+  }
+);
+
+When("I make a request to {string}", async function (this: CustomWorld, url: string) {
+  const response = await this.page.request.get(url);
+  this.data.lastResponse = response;
+});
+
+When(
+  'I make a "{word}" request to {string}',
+  async function (method: string, url: string, table?: DataTable) {
+    const options = table ? Object.fromEntries(table.rows()) : {};
+    if (options.body) options.body = JSON.stringify(JSON.parse(options.body));
+    const res = await fetch(url, { method, ...options });
+    lastResponse = res;
+  }
+);