playwright-cucumber-ts-steps 0.1.6 → 0.1.7

package/src/assertions/buttonAndTextVisibilitySteps.ts

@@ -0,0 +1,178 @@
+import { Then } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import { evaluateFaker } from "../helpers/utils/fakerUtils";
+import type { CustomWorld } from "../helpers/world";
+
+Then("I count {int} elements", async function (this: CustomWorld, expectedCount: number) {
+  if (!this.elements) throw new Error("No elements found to count");
+  const count = await this.elements.count();
+  await this.page.waitForLoadState("networkidle");
+
+  expect(count).toBe(expectedCount);
+});
+/**
+ * THEN: I see button "Submit"
+ */
+Then(/^I see button "(.*)"$/, async function (this: CustomWorld, rawText: string) {
+  let buttonText = rawText.startsWith("@") ? this.data[rawText.slice(1)] : rawText;
+
+  if (!buttonText) {
+    throw new Error(`No value found for alias: "${rawText}"`);
+  }
+
+  const button = this.page.getByRole("button", {
+    name: buttonText,
+    exact: false,
+  });
+
+  await this.page.waitForLoadState("networkidle");
+  await expect(button).toBeVisible();
+});
+
+/**
+ * THEN: I do not see button "Cancel"
+ */
+Then(/^I do not see button "(.*)"$/, async function (this: CustomWorld, rawText: string) {
+  let buttonText = rawText.startsWith("@") ? this.data[rawText.slice(1)] : rawText;
+
+  if (!buttonText) {
+    throw new Error(`No value found for alias: "${rawText}"`);
+  }
+
+  const button = this.page.getByRole("button", {
+    name: buttonText,
+    exact: false,
+  });
+
+  await this.page.waitForLoadState("networkidle");
+  const count = await button.count();
+  for (let i = 0; i < count; i++) {
+    const item = button.nth(i);
+    if (await item.isVisible()) {
+      throw new Error(`Button "${buttonText}" is visible but should not be`);
+    }
+  }
+});
+
+/**
+ * THEN: I see text "Welcome"
+ */
+
+Then("I see text {string}", async function (this: CustomWorld, expected: string) {
+  const scope = this.getScope(); // ✅ Supports iframe OR main page
+  const locator = scope.locator(`text=${expected}`);
+  await locator.waitFor({ state: "visible", timeout: 5000 });
+  this.log?.(`✅ Verified text visible: ${expected}`);
+});
+
+/**
+ * THEN: I see visible text "Dashboard"
+ */
+
+Then("I see visible text {string}", async function (this: CustomWorld, text: string) {
+  await this.page.waitForLoadState("networkidle");
+
+  const locator = this.page.locator(`:text-is("${text}")`);
+  if (!(await locator.first().isVisible())) {
+    throw new Error(`Visible text "${text}" not found`);
+  }
+});
+
+/**
+ * THEN: I do not see visible text "Logout"
+ */
+
+Then("I do not see visible text {string}", async function (this: CustomWorld, text: string) {
+  const locator = this.page.locator(`:text-is("${text}")`);
+  if ((await locator.count()) > 0 && (await locator.first().isVisible())) {
+    throw new Error(`Visible text "${text}" should not be visible`);
+  }
+});
+Then("I see value {string}", async function (this: CustomWorld, expected: string) {
+  if (!this.element) throw new Error("No element selected");
+  const value = await this.element.inputValue();
+  if (value !== expected) {
+    throw new Error(`Expected value "${expected}", but got "${value}"`);
+  }
+});
+Then("I do not see value {string}", async function (this: CustomWorld, unwanted: string) {
+  if (!this.element) throw new Error("No element selected");
+  const value = await this.element.inputValue();
+  if (value === unwanted) {
+    throw new Error(`Value "${unwanted}" is present but should not be`);
+  }
+});
+
+//
+// 📃 VISIBLE TEXT ASSERTIONS
+//
+
+Then(/^I do not see text "(.*)"$/, async function (this: any, unexpectedText: string) {
+  const el = this.page.getByText(unexpectedText, { exact: true });
+  await expect(el).toHaveCount(0);
+});
+
+//
+// 🆕 Visible Text - Alias for clarity (optional if you want separate steps for naming)
+//
+
+Then("I see {string} in the element", async function (this: CustomWorld, expected: string) {
+  const element = this.element;
+  if (!element) throw new Error("No element selected");
+
+  // ✅ Resolve alias
+  if (expected.startsWith("@")) {
+    const alias = expected.substring(1);
+    expected = this.data[alias];
+    if (!expected) throw new Error(`No data stored for alias "@${alias}"`);
+  }
+
+  // ✅ Resolve faker syntax
+  expected = evaluateFaker(expected);
+
+  const textContent = await element.textContent();
+  if (!textContent) throw new Error("Element has no text content");
+
+  expect(textContent).toContain(expected);
+  this.log?.(`Verified "${expected}" in element text`);
+});
+
+Then("I see @{word} in the element", async function (this: CustomWorld, alias: string) {
+  const storedValue = this.data[alias];
+
+  if (!storedValue) {
+    throw new Error(`No value found in data storage under alias "@${alias}".`);
+  }
+
+  if (!this.element) {
+    throw new Error("No element found. You must get an element before asserting its contents.");
+  }
+
+  const actualText = (await this.element.textContent())?.trim() || "";
+  expect(actualText).toContain(storedValue);
+  this.log(
+    `Verified element contains value from "@${alias}" = "${storedValue}". Actual: "${actualText}"`
+  );
+});
+Then("I see button {string} is disabled", async function (this: CustomWorld, rawText: string) {
+  // Resolve alias
+  let buttonText = rawText.startsWith("@") ? this.data[rawText.slice(1)] : rawText;
+
+  if (!buttonText) {
+    throw new Error(`No value found for alias: "${rawText}"`);
+  }
+
+  const button = this.page.getByRole("button", {
+    name: buttonText,
+    exact: false,
+  });
+
+  await expect(button).toBeVisible({ timeout: 5000 });
+  const isDisabled = await button.isDisabled();
+
+  if (!isDisabled) {
+    throw new Error(`🚫 Button "${buttonText}" is not disabled as expected.`);
+  }
+
+  this.log?.(`✅ Verified button "${buttonText}" is disabled.`);
+});

package/src/assertions/cookieSteps.ts

@@ -0,0 +1,52 @@
+import { Then } from "@cucumber/cucumber";
+import type { CustomWorld } from "../helpers/world";
+
+/**
+ * THEN: I see cookie "myCookie"
+ */
+Then("I see cookie {string}", async function (this: CustomWorld, cookieName: string) {
+  const cookies = await this.context.cookies();
+  const cookie = cookies.find((c) => c.name === cookieName);
+  if (!cookie) throw new Error(`Cookie "${cookieName}" not found`);
+});
+
+/**
+ * THEN: I do not see cookie "myCookie"
+ */
+Then("I do not see cookie {string}", async function (this: CustomWorld, name: string) {
+  const cookies = await this.context.cookies();
+  const cookie = cookies.find((c) => c.name === name);
+  if (cookie) throw new Error(`Cookie "${name}" was found but should not exist`);
+});
+
+/**
+ * THEN: I see cookie "sessionId" has value "abc123"
+ */
+Then(
+  "I see cookie {string} has value {string}",
+  async function (this: CustomWorld, name: string, expectedValue: string) {
+    const cookies = await this.context.cookies();
+    const cookie = cookies.find((c) => c.name === name);
+    if (!cookie) throw new Error(`Cookie "${name}" not found`);
+    if (cookie.value !== expectedValue) {
+      throw new Error(
+        `Expected cookie "${name}" to have value "${expectedValue}", but got "${cookie.value}"`
+      );
+    }
+  }
+);
+
+/**
+ * THEN: I see cookie "token" contains value "auth"
+ */
+Then(
+  "I see cookie {string} contains value {string}",
+  async function (this: CustomWorld, name: string, valuePart: string) {
+    const cookies = await this.context.cookies();
+    const cookie = cookies.find((c) => c.name === name);
+    if (!cookie) throw new Error(`Cookie "${name}" not found`);
+    if (!cookie.value.includes(valuePart)) {
+      throw new Error(`Cookie "${name}" does not contain value "${valuePart}"`);
+    }
+  }
+);

package/src/assertions/elementSteps.ts

@@ -0,0 +1,103 @@
+import { Then } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import type { CustomWorld } from "../helpers/world";
+//
+// ✅ ELEMENT EXISTS
+//
+
+Then(/^I see element "([^"]+)" exists$/, async function (this: any, selector: string) {
+  const el = await this.page.locator(selector);
+  await expect(el).toHaveCount(1);
+});
+Then("I see element exists", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("No element stored in context");
+  const count = (await this.element.count?.()) ?? 1;
+  if (count === 0) throw new Error("Element does not exist");
+});
+Then("I see element does not exist", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("No element stored in context");
+  const count = (await this.element.count?.()) ?? 1;
+  if (count > 0) throw new Error("Element exists but should not");
+});
+Then("I see element is visible", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("No element in context");
+  const isVisible = await this.element.isVisible();
+  if (!isVisible) throw new Error("Element is not visible");
+});
+Then("I see element is not visible", async function (this: CustomWorld) {
+  if (!this.element) throw new Error("No element in context");
+  const isVisible = await this.element.isVisible();
+  if (isVisible) throw new Error("Element is visible but should not be");
+});
+
+Then(/^I see element "([^"]+)" does not exist$/, async function (this: any, selector: string) {
+  const el = await this.page.locator(selector);
+  await expect(el).toHaveCount(0);
+});
+
+//
+// 👁️ ELEMENT VISIBILITY
+//
+
+Then(/^I see element "([^"]+)" is visible$/, async function (this: any, selector: string) {
+  const el = this.page.locator(selector);
+  await expect(el).toBeVisible();
+});
+
+Then(/^I see element "([^"]+)" is not visible$/, async function (this: any, selector: string) {
+  const el = this.page.locator(selector);
+  await expect(el).not.toBeVisible();
+});
+
+//
+// 🔎 ATTRIBUTE ASSERTIONS
+//
+
+Then(
+  /^I see element "([^"]+)" attribute "([^"]+)" equals "(.*)"$/,
+  async function (this: any, selector: string, attribute: string, expected: string) {
+    const el = this.page.locator(selector);
+    await expect(el).toHaveAttribute(attribute, expected);
+  }
+);
+Then(
+  'I see element attribute "{word}" equals {string}',
+  async function (this: CustomWorld, attr: string, expected: string) {
+    if (!this.element) {
+      throw new Error("No element is currently selected. Use a 'find' step before asserting.");
+    }
+    await expect(this.element).toHaveAttribute(attr, expected);
+  }
+);
+
+Then("I see element has attribute {string}", async function (this: CustomWorld, attr: string) {
+  if (!this.element) throw new Error("No element in context");
+  const value = await this.element.getAttribute(attr);
+  if (value === null) throw new Error(`Attribute "${attr}" not found`);
+});
+Then(
+  'I see element attribute "{word}" contains {string}',
+  async function (this: CustomWorld, attr: string, part: string) {
+    if (!this.element) throw new Error("No element in context");
+    const value = await this.element.getAttribute(attr);
+    if (!value?.includes(part)) {
+      throw new Error(`Attribute "${attr}" does not contain "${part}". Got: "${value}"`);
+    }
+  }
+);
+
+Then(
+  /^I see element "([^"]+)" attribute "([^"]+)" contains "(.*)"$/,
+  async function (this: any, selector: string, attribute: string, substring: string) {
+    const attr = await this.page.locator(selector).getAttribute(attribute);
+    expect(attr?.includes(substring)).toBeTruthy();
+  }
+);
+
+Then(
+  /^I see element "([^"]+)" has attribute "([^"]+)"$/,
+  async function (this: any, selector: string, attribute: string) {
+    const attr = await this.page.locator(selector).getAttribute(attribute);
+    expect(attr).not.toBeNull();
+  }
+);

package/src/assertions/formInputSteps.ts

@@ -0,0 +1,110 @@
+import { Then } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import { CustomWorld } from "../helpers/world";
+//
+// 🧾 INPUT VALUES
+//
+
+Then(
+  /^I see input "([^"]+)" has value "(.*)"$/,
+  async function (this: any, selector: string, value: string) {
+    const el = this.page.locator(selector);
+    await expect(el).toHaveValue(value);
+  }
+);
+Then("I see input value {string}", async function (this: CustomWorld, expected: string) {
+  if (!this.element) throw new Error("No element stored in context");
+  const value = await this.element.inputValue();
+  expect(value).toBe(expected);
+});
+Then("I see input value contains {string}", async function (this: CustomWorld, part: string) {
+  if (!this.element) throw new Error("No element stored in context");
+  const value = await this.element.inputValue();
+  expect(value).toContain(part);
+});
+
+Then(
+  /^I see input "([^"]+)" value contains "(.*)"$/,
+  async function (this: any, selector: string, partial: string) {
+    const val = await this.page.locator(selector).inputValue();
+    expect(val).toContain(partial);
+  }
+);
+
+//
+// 📝 TEXTAREA VALUES
+//
+
+Then(
+  /^I see textarea "([^"]+)" has value "(.*)"$/,
+  async function (this: any, selector: string, value: string) {
+    const el = this.page.locator(selector);
+    await expect(el).toHaveValue(value);
+  }
+);
+Then("I see textarea value {string}", async function (this: CustomWorld, expected: string) {
+  if (!this.element) throw new Error("No textarea selected");
+  const value = await this.element.inputValue();
+  if (value !== expected) throw new Error(`Expected "${expected}", got "${value}"`);
+});
+Then("I see textarea value contains {string}", async function (this: CustomWorld, part: string) {
+  if (!this.element) throw new Error("No textarea selected");
+  const value = await this.element.inputValue();
+  if (!value.includes(part)) {
+    throw new Error(`Textarea does not contain "${part}". Got: "${value}"`);
+  }
+});
+
+Then(
+  /^I see textarea "([^"]+)" value contains "(.*)"$/,
+  async function (this: any, selector: string, partial: string) {
+    const val = await this.page.locator(selector).inputValue();
+    expect(val).toContain(partial);
+  }
+);
+
+//
+// ✅ GENERIC VALUE MATCHING
+//
+
+Then(
+  /^I see value "(.*)" in "([^"]+)"$/,
+  async function (this: any, value: string, selector: string) {
+    const el = this.page.locator(selector);
+    await expect(el).toHaveValue(value);
+  }
+);
+
+Then(
+  /^I do not see value "(.*)" in "([^"]+)"$/,
+  async function (this: any, value: string, selector: string) {
+    const actual = await this.page.locator(selector).inputValue();
+    expect(actual).not.toBe(value);
+  }
+);
+
+//
+// ⬇️ OPTION IN SELECT
+//
+
+Then(/^I see option "(.*)"$/, async function (this: any, optionText: string) {
+  const el = this.page.locator(`option`, { hasText: optionText });
+  await expect(el).toHaveCount(1);
+});
+Then("I see option {string}", async function (this: CustomWorld, optionText: string) {
+  const option = this.page.locator("option", { hasText: optionText });
+  if (!(await option.isVisible())) {
+    throw new Error(`Option "${optionText}" not visible`);
+  }
+});
+Then("I do not see option {string}", async function (this: CustomWorld, optionText: string) {
+  const option = this.page.locator("option", { hasText: optionText });
+  if ((await option.count()) > 0 && (await option.first().isVisible())) {
+    throw new Error(`Option "${optionText}" is visible but should not be`);
+  }
+});
+
+Then(/^I do not see option "(.*)"$/, async function (this: any, optionText: string) {
+  const el = this.page.locator(`option`, { hasText: optionText });
+  await expect(el).toHaveCount(0);
+});

package/src/assertions/interceptionRequestsSteps.ts

@@ -0,0 +1,216 @@
+import { Then } from "@cucumber/cucumber";
+import { expect } from "@playwright/test";
+import type { CustomWorld } from "../helpers/world";
+// Accessing the Last Response
+
+Then("I should see response status {int}", function (expectedStatus: number) {
+  expect(this.data.lastResponse?.status).toBe(expectedStatus);
+  this.log(`Verified response status is ${expectedStatus}`);
+});
+
+Then("I should see response body contains {string}", function (expectedText: string) {
+  expect(this.data.lastResponse?.body).toContain(expectedText);
+  this.log(`Verified response body contains "${expectedText}"`);
+});
+Then("I see response body {string}", async function (this: CustomWorld, expected: string) {
+  const res = this.data.lastResponse;
+  const body = await res.text();
+  if (body !== expected) throw new Error(`Expected body "${expected}", got "${body}"`);
+});
+Then("I see response body contains {string}", async function (this: CustomWorld, part: string) {
+  const res = this.data.lastResponse;
+  const body = await res.text();
+  if (!body.includes(part)) throw new Error(`Body does not contain "${part}"`);
+});
+Then(
+  "I see response body matches JSON schema {string}",
+  async function (this: CustomWorld, schemaPath: string) {
+    const res = this.data.lastResponse;
+    const body = await res.text();
+    const schema = require(schemaPath); // Assuming schema is a JSON file
+    const Ajv = require("ajv");
+    const ajv = new Ajv();
+    const validate = ajv.compile(schema);
+    const valid = validate(JSON.parse(body));
+    if (!valid) {
+      throw new Error(`Response body does not match schema: ${ajv.errorsText(validate.errors)}`);
+    }
+  }
+);
+Then(
+  "I see response header {string} equals {string}",
+  async function (this: CustomWorld, headerName: string, expectedValue: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (headerValue !== expectedValue) {
+      throw new Error(
+        `Expected header "${headerName}" to be "${expectedValue}", got "${headerValue}"`
+      );
+    }
+    this.log(`Verified response header "${headerName}" equals "${expectedValue}"`);
+  }
+);
+Then(
+  "I see response header {string} contains {string}",
+  async function (this: CustomWorld, headerName: string, expectedValue: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (!headerValue || !headerValue.includes(expectedValue)) {
+      throw new Error(
+        `Expected header "${headerName}" to contain "${expectedValue}", got "${headerValue}"`
+      );
+    }
+    this.log(`Verified response header "${headerName}" contains "${expectedValue}"`);
+  }
+);
+Then(
+  "I see response header {string} does not contain {string}",
+  async function (this: CustomWorld, headerName: string, unexpectedValue: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (headerValue && headerValue.includes(unexpectedValue)) {
+      throw new Error(
+        `Expected header "${headerName}" to not contain "${unexpectedValue}", but it does`
+      );
+    }
+    this.log(`Verified response header "${headerName}" does not contain "${unexpectedValue}"`);
+  }
+);
+Then(
+  "I see response header {string} does not equal {string}",
+  async function (this: CustomWorld, headerName: string, unexpectedValue: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (headerValue === unexpectedValue) {
+      throw new Error(
+        `Expected header "${headerName}" to not equal "${unexpectedValue}", but it does`
+      );
+    }
+    this.log(`Verified response header "${headerName}" does not equal "${unexpectedValue}"`);
+  }
+);
+Then(
+  "I see response header {string} exists",
+  async function (this: CustomWorld, headerName: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (!headerValue) {
+      throw new Error(`Expected header "${headerName}" to exist, but it does not`);
+    }
+    this.log(`Verified response header "${headerName}" exists`);
+  }
+);
+Then(
+  "I see response header {string} does not exist",
+  async function (this: CustomWorld, headerName: string) {
+    const res = this.data.lastResponse;
+    const headerValue = res.headers()[headerName.toLowerCase()];
+    if (headerValue) {
+      throw new Error(`Expected header "${headerName}" to not exist, but it does`);
+    }
+    this.log(`Verified response header "${headerName}" does not exist`);
+  }
+);
+Then("I see response status {int}", async function (this: CustomWorld, status: number) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const actual = res.status();
+  if (actual !== status) throw new Error(`Expected status ${status}, got ${actual}`);
+});
+Then("I see response status is not {int}", async function (this: CustomWorld, status: number) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const actual = res.status();
+  if (actual === status) throw new Error(`Expected status not to be ${status}, but it is`);
+});
+Then("I see response body matches JSON schema", async function (this: CustomWorld, schema: object) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  const Ajv = require("ajv");
+  const ajv = new Ajv();
+  const validate = ajv.compile(schema);
+  const valid = validate(JSON.parse(body));
+  if (!valid) {
+    throw new Error(`Response body does not match schema: ${ajv.errorsText(validate.errors)}`);
+  }
+  this.log(`Response body matches JSON schema`);
+});
+Then("I see response body is empty", async function (this: CustomWorld) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  if (body.trim() !== "") {
+    throw new Error(`Expected empty response body, got "${body}"`);
+  }
+  this.log(`Verified response body is empty`);
+});
+Then("I see response body is not empty", async function (this: CustomWorld) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  if (body.trim() === "") {
+    throw new Error(`Expected non-empty response body, got empty`);
+  }
+  this.log(`Verified response body is not empty`);
+});
+Then("I see response body matches {string}", async function (this: CustomWorld, expected: string) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  if (body !== expected) {
+    throw new Error(`Expected body "${expected}", got "${body}"`);
+  }
+  this.log(`Verified response body matches: ${expected}`);
+});
+Then("I see response body contains {string}", async function (this: CustomWorld, part: string) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  if (!body.includes(part)) {
+    throw new Error(`Body does not contain "${part}"`);
+  }
+  this.log(`Verified response body contains: ${part}`);
+});
+Then(
+  "I see response body does not contain {string}",
+  async function (this: CustomWorld, part: string) {
+    const res = this.data.lastResponse;
+    if (!res) throw new Error("No response available");
+    const body = await res.text();
+    if (body.includes(part)) {
+      throw new Error(`Body contains "${part}", but it should not`);
+    }
+    this.log(`Verified response body does not contain: ${part}`);
+  }
+);
+Then("I see response body is JSON", async function (this: CustomWorld) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  try {
+    JSON.parse(body);
+    this.log(`Verified response body is valid JSON`);
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new Error(`Response body is not valid JSON: ${e.message}`);
+    } else {
+      throw new Error(`Response body is not valid JSON: ${String(e)}`);
+    }
+  }
+});
+Then("I see response body is not JSON", async function (this: CustomWorld) {
+  const res = this.data.lastResponse;
+  if (!res) throw new Error("No response available");
+  const body = await res.text();
+  try {
+    JSON.parse(body);
+    throw new Error(`Expected response body to not be JSON, but it is`);
+  } catch (e) {
+    if (e instanceof Error) {
+      this.log(`Verified response body is not JSON: ${e.message}`);
+    } else {
+      this.log(`Verified response body is not JSON: ${String(e)}`);
+    }
+  }
+});