@vardot/varbase-e2e 2.0.0

package/tests/step-definitions/response.steps.js

@@ -0,0 +1,98 @@
+'use strict';
+
+// Inspect HTTP response headers using Playwright's request API on the current page URL.
+
+const { Then, Before } = require('@cucumber/cucumber');
+const assert = require('assert');
+
+// Capture response headers from navigation events, with page.request fallback.
+Before({ order: 100 }, async function () {
+  if (!this.page) return;
+  this._lastResponseHeaders = null;
+  this._lastResponseStatus = null;
+  this.page.on('response', (resp) => {
+    try {
+      if (resp.request().isNavigationRequest() && resp.frame() === this.page.mainFrame()) {
+        this._lastResponseHeaders = resp.headers();
+        this._lastResponseStatus = resp.status();
+      }
+    } catch (e) { /* ignore */ }
+  });
+});
+
+async function getHeaders(world) {
+  if (world._lastResponseHeaders) return world._lastResponseHeaders;
+  // Fallback: fetch current URL via Playwright request context to get headers.
+  const url = world.page.url();
+  if (!url || url === 'about:blank') return {};
+  try {
+    const resp = await world.page.request.get(url);
+    return resp.headers();
+  } catch (e) {
+    return {};
+  }
+}
+
+/**
+ * Assert the most recent navigation response carried a header (case-insensitive).
+ *
+ * Example #1: Then the response should contain the header "content-type"
+ * Example #2: Then the response should contain the header "cache-control"
+ * Example #3: And the response should contain the header "x-frame-options"
+ * Example #4: Then the response should contain the header "set-cookie"
+ * Example #5: Then the response should contain the header "etag"
+ *
+ */
+Then('the response should contain the header {string}', async function (name) {
+  const h = await getHeaders(this);
+  assert.ok(Object.keys(h).map((k) => k.toLowerCase()).includes(name.toLowerCase()), `Header "${name}" not present.`);
+});
+
+/**
+ * Assert the most recent navigation response did NOT carry a header.
+ *
+ * Example #1: Then the response should not contain the header "x-fake-header"
+ * Example #2: Then the response should not contain the header "x-powered-by"
+ * Example #3: And the response should not contain the header "server"
+ * Example #4: Then the response should not contain the header "x-aspnet-version"
+ * Example #5: Then the response should not contain the header "x-debug-token"
+ *
+ */
+Then('the response should not contain the header {string}', async function (name) {
+  const h = await getHeaders(this);
+  assert.ok(!Object.keys(h).map((k) => k.toLowerCase()).includes(name.toLowerCase()), `Header "${name}" should not be present.`);
+});
+
+/**
+ * Assert a header's value contains a substring.
+ *
+ * Example #1: Then the response header "content-type" should contain the value "html"
+ * Example #2: Then the response header "cache-control" should contain the value "no-cache"
+ * Example #3: And the response header "content-type" should contain the value "charset=utf-8"
+ * Example #4: Then the response header "set-cookie" should contain the value "session="
+ * Example #5: Then the response header "x-frame-options" should contain the value "DENY"
+ *
+ */
+Then('the response header {string} should contain the value {string}', async function (name, value) {
+  const h = await getHeaders(this);
+  const key = Object.keys(h).find((k) => k.toLowerCase() === name.toLowerCase());
+  assert.ok(key, `Header "${name}" not present.`);
+  assert.ok(String(h[key]).indexOf(value) !== -1, `Header "${name}"="${h[key]}" does not contain "${value}".`);
+});
+
+/**
+ * Assert a header's value does NOT contain a substring (or the header is absent).
+ *
+ * Example #1: Then the response header "content-type" should not contain the value "application/json"
+ * Example #2: Then the response header "cache-control" should not contain the value "public"
+ * Example #3: And the response header "content-type" should not contain the value "xml"
+ * Example #4: Then the response header "set-cookie" should not contain the value "Domain=other"
+ * Example #5: Then the response header "x-frame-options" should not contain the value "ALLOW"
+ *
+ */
+Then('the response header {string} should not contain the value {string}', async function (name, value) {
+  const h = await getHeaders(this);
+  const key = Object.keys(h).find((k) => k.toLowerCase() === name.toLowerCase());
+  if (!key) return;
+  assert.ok(String(h[key]).indexOf(value) === -1, `Header "${name}" should not contain "${value}".`);
+});

package/tests/step-definitions/responsive.steps.js

@@ -0,0 +1,125 @@
+'use strict';
+
+const { friendly } = require('./varbase-e2e');
+
+// Set viewport dimensions and named breakpoints.
+
+const { Given, When } = require('@cucumber/cucumber');
+
+const DEFAULT_BREAKPOINTS = {
+  xs: { width: 375, height: 667 },
+  sm: { width: 576, height: 800 },
+  md: { width: 768, height: 1024 },
+  lg: { width: 992, height: 768 },
+  xl: { width: 1200, height: 900 },
+  xxl: { width: 1400, height: 900 },
+  xxxl: { width: 1920, height: 1080 },
+  mobile: { width: 375, height: 667 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1200, height: 900 },
+};
+
+function getBreakpoints(world) {
+  if (!world._breakpoints) {
+    const cfg = (world.parameters && world.parameters.selectors && world.parameters.selectors.breakpoints) || {};
+    world._breakpoints = { ...DEFAULT_BREAKPOINTS, ...cfg };
+  }
+  return world._breakpoints;
+}
+
+/**
+ * Replace the breakpoint registry for the current scenario from a data table.
+ *
+ * Example #1: Given the following responsive breakpoints:
+ *               | mobile  | 375  | 667  |
+ *               | tablet  | 768  | 1024 |
+ *               | desktop | 1200 | 900  |
+ * Example #2: Given the following responsive breakpoints:
+ *               | watch   | 280  | 280  |
+ *               | phablet | 414  | 896  |
+ * Example #3: And the following responsive breakpoints:
+ *               | xs      | 320  | 480  |
+ *               | sm      | 480  | 800  |
+ * Example #4: Given the following responsive breakpoints:
+ *               | hd      | 1280 | 720  |
+ *               | full-hd | 1920 | 1080 |
+ * Example #5: Given the following responsive breakpoints:
+ *               | a11y    | 320  | 480  |
+ *               | print   | 794  | 1123 |
+ *
+ */
+Given('the following responsive breakpoints:', async function (table) {
+  const map = {};
+  for (const row of table.raw()) {
+    const [name, w, h] = row;
+    map[name] = { width: parseInt(w, 10), height: parseInt(h, 10) };
+  }
+  this._breakpoints = { ...DEFAULT_BREAKPOINTS, ...map };
+});
+
+/**
+ * Resize the viewport to a registered named breakpoint.
+ *
+ * Built-in names: `xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `xxxl`, `mobile`,
+ * `tablet`, `desktop`. Project-defined names override built-ins.
+ *
+ * Example #1: When I set the viewport to the "mobile" breakpoint
+ * Example #2: When I set the viewport to the "tablet" breakpoint
+ * Example #3: And we set the viewport to the "desktop" breakpoint
+ * Example #4: When I set the viewport to the "xl" breakpoint
+ * Example #5: When I set the viewport to the "xxxl" breakpoint
+ *
+ */
+When(/^(I |we )*set the viewport to the "([^"]*)" breakpoint$/, async function (pronoun, name) {
+  const bps = getBreakpoints(this);
+  const bp = bps[name];
+  if (!bp) throw friendly(`Unknown breakpoint "${name}".`);
+  await this.page.setViewportSize({ width: bp.width, height: bp.height });
+});
+
+/**
+ * Resize the viewport width while keeping the current height.
+ *
+ * Example #1: When I set the viewport width to 1200
+ * Example #2: When I set the viewport width to 375
+ * Example #3: And we set the viewport width to 1920
+ * Example #4: When I set the viewport width to 768
+ * Example #5: When I set the viewport width to 1024
+ *
+ */
+When(/^(I |we )*set the viewport width to (\d+)$/, async function (pronoun, w) {
+  w = parseInt(w, 10);
+  const cur = this.page.viewportSize() || { height: 800 };
+  await this.page.setViewportSize({ width: w, height: cur.height });
+});
+
+/**
+ * Resize the viewport height while keeping the current width.
+ *
+ * Example #1: When I set the viewport height to 800
+ * Example #2: When I set the viewport height to 1024
+ * Example #3: And we set the viewport height to 1080
+ * Example #4: When I set the viewport height to 667
+ * Example #5: When I set the viewport height to 900
+ *
+ */
+When(/^(I |we )*set the viewport height to (\d+)$/, async function (pronoun, h) {
+  h = parseInt(h, 10);
+  const cur = this.page.viewportSize() || { width: 1200 };
+  await this.page.setViewportSize({ width: cur.width, height: h });
+});
+
+/**
+ * Resize the viewport to an explicit width-by-height pair.
+ *
+ * Example #1: When I set the viewport to 1200 by 800
+ * Example #2: When I set the viewport to 375 by 667
+ * Example #3: And we set the viewport to 1920 by 1080
+ * Example #4: When I set the viewport to 768 by 1024
+ * Example #5: When I set the viewport to 1024 by 768
+ *
+ */
+When(/^(I |we )*set the viewport to (\d+) by (\d+)$/, async function (pronoun, w, h) {
+  w = parseInt(w, 10); h = parseInt(h, 10);
+  await this.page.setViewportSize({ width: w, height: h });
+});

package/tests/step-definitions/rest.steps.js

@@ -0,0 +1,111 @@
+'use strict';
+
+// Lightweight REST testing — distinct from the existing api.steps.js steps
+// Preserves exact step phrasing for compatibility.
+
+const { Given, When, Then } = require('@cucumber/cucumber');
+const assert = require('assert');
+const axios = require('axios');
+
+function ensureState(world) {
+  if (!world._rest) world._rest = { headers: {}, response: null };
+  return world._rest;
+}
+
+/**
+ * Add an HTTP header to subsequent REST requests.
+ *
+ * Example #1: Given a REST header "Authorization" with value "Bearer abc123"
+ * Example #2: Given a REST header "Accept" with value "application/json"
+ * Example #3: And a REST header "X-Request-ID" with value "req-001"
+ * Example #4: Given a REST header "Content-Type" with value "application/json"
+ * Example #5: Given a REST header "X-API-Key" with value "key-xyz"
+ *
+ */
+Given('a REST header {string} with value {string}', async function (name, value) {
+  ensureState(this).headers[name] = value;
+});
+
+/**
+ * Send an HTTP request without a body.
+ *
+ * Example #1: When I send a REST "GET" request to "/api/users"
+ * Example #2: When I send a REST "DELETE" request to "/api/orders/1"
+ * Example #3: And we send a REST "GET" request to "https://example.com/api/health"
+ * Example #4: When I send a REST "GET" request to "/api/me"
+ * Example #5: When I send a REST "DELETE" request to "/api/cart/items/42"
+ *
+ */
+When(/^(I |we )*send a REST "([^"]*)" request to "([^"]*)"$/, async function (pronoun, method, url) {
+  const s = ensureState(this);
+  const target = url.startsWith('http') ? url : (this.launchUrl || '') + url;
+  s.response = await axios.request({
+    method, url: target, headers: s.headers, validateStatus: () => true,
+  });
+});
+
+/**
+ * Send an HTTP request with a doc-string body (raw text, JSON, or form-encoded).
+ *
+ * Example #1: When I send a REST "POST" request to "/api/users" with body:
+ *               """
+ *               {"name": "Alice"}
+ *               """
+ * Example #2: When I send a REST "PUT" request to "/api/users/1" with body:
+ *               """
+ *               {"role": "admin"}
+ *               """
+ * Example #3: And we send a REST "PATCH" request to "/api/orders/1" with body:
+ *               """
+ *               {"status": "shipped"}
+ *               """
+ * Example #4: When I send a REST "POST" request to "/api/login" with body:
+ *               """
+ *               username=alice&password=s3cret
+ *               """
+ * Example #5: When I send a REST "POST" request to "/webhooks/event" with body:
+ *               """
+ *               {"event": "ping"}
+ *               """
+ *
+ */
+When(/^(I |we )*send a REST "([^"]*)" request to "([^"]*)" with body:$/, async function (pronoun, method, url, body) {
+  const s = ensureState(this);
+  const target = url.startsWith('http') ? url : (this.launchUrl || '') + url;
+  s.response = await axios.request({
+    method, url: target, headers: s.headers, data: body, validateStatus: () => true,
+  });
+});
+
+/**
+ * Assert the most recent REST response carried an expected status code.
+ *
+ * Example #1: Then the REST response status code should be 200
+ * Example #2: Then the REST response status code should be 201
+ * Example #3: And the REST response status code should be 401
+ * Example #4: Then the REST response status code should be 404
+ * Example #5: Then the REST response status code should be 500
+ *
+ */
+Then('the REST response status code should be {int}', async function (code) {
+  const s = ensureState(this);
+  assert.ok(s.response, 'No REST response captured.');
+  assert.strictEqual(s.response.status, code);
+});
+
+/**
+ * Assert the most recent REST response body contains a substring.
+ *
+ * Example #1: Then the REST response should contain "Alice"
+ * Example #2: Then the REST response should contain "id"
+ * Example #3: And the REST response should contain "shipped"
+ * Example #4: Then the REST response should contain "ok"
+ * Example #5: Then the REST response should contain "Welcome"
+ *
+ */
+Then('the REST response should contain {string}', async function (text) {
+  const s = ensureState(this);
+  assert.ok(s.response, 'No REST response captured.');
+  const body = typeof s.response.data === 'string' ? s.response.data : JSON.stringify(s.response.data);
+  assert.ok(body.indexOf(text) !== -1, `REST response does not contain "${text}".`);
+});