@piwitests/reporter 0.43.0 → 0.44.0

package/dist/cli/index.js

@@ -1752,8 +1752,12 @@ function samePage(a, b) {
   const kb = pageKey(b);
   return ka === null || kb === null || ka === kb;
 }
+function viewportLine(viewport) {
+  return `  await page.setViewportSize({ width: ${Math.round(viewport.width)}, height: ${Math.round(viewport.height)} });`;
+}
 function renderSpec(session, options = {}) {
   const { steps } = session;
+  const viewportAt = new Map((session.viewports ?? []).map((v) => [v.step, v]));
   const title = options.title ?? "recorded flow";
   const catalog = (options.catalog ?? []).filter(callIdentifiersAreSafe);
   const ctx = {
@@ -1781,6 +1785,8 @@ function renderSpec(session, options = {}) {
   let sawGoto = false;
   while (pos < steps.length) {
     const step = steps[pos];
+    const viewport = pos > 0 ? viewportAt.get(pos) : void 0;
+    if (viewport) bodyLines.push(viewportLine(viewport));
     stepStarts[pos] = bodyLines.length;
     if (step.action === "goto") {
       bodyLines.push(...renderRawStep(step, pos, ctx));
@@ -1788,7 +1794,8 @@ function renderSpec(session, options = {}) {
       pos++;
       continue;
     }
-    const match = catalog.length > 0 ? matchFunctionAt(steps, pos, catalog) : null;
+    const found = catalog.length > 0 ? matchFunctionAt(steps, pos, catalog) : null;
+    const match = found && ![...viewportAt.keys()].some((at) => at > pos && at <= Math.max(...found.matchedIndices)) ? found : null;
     if (match) {
       bodyLines.push(renderFunctionCall(match));
       usedEntries.push(match.entry);
@@ -1803,11 +1810,13 @@ function renderSpec(session, options = {}) {
     checkNextPage(pos);
     pos++;
   }
-  let bodyOffset = 0;
-  if (!sawGoto && session.startUrl) {
-    bodyLines.unshift(`  await page.goto(${quote2(urlForCode(session.startUrl, ctx))});`);
-    bodyOffset = 1;
-  }
+  const start = viewportAt.get(0);
+  const opening = [
+    ...start ? [viewportLine(start)] : [],
+    ...!sawGoto && session.startUrl ? [`  await page.goto(${quote2(urlForCode(session.startUrl, ctx))});`] : []
+  ];
+  bodyLines.unshift(...opening);
+  const bodyOffset = opening.length;
   const importLines = renderImports(usedEntries);
   const instantiationLines = renderInstantiations(usedEntries);
   const failLine = expectFailLine(options);
@@ -1825,7 +1834,7 @@ function renderSpec(session, options = {}) {
     };
   }
   const details = renderDetails(options);
-  const opening = details.length > 0 ? [`test(${quote2(title)}, {`, ...details, `}, async ({ page }) => {`] : [`test(${quote2(title)}, async ({ page }) => {`];
+  const testOpening = details.length > 0 ? [`test(${quote2(title)}, {`, ...details, `}, async ({ page }) => {`] : [`test(${quote2(title)}, async ({ page }) => {`];
   const lines = [
     // Package name interpolated rather than adjoining the preceding keyword
     // directly, so this generated-code line does not itself look like a real
@@ -1833,12 +1842,12 @@ function renderSpec(session, options = {}) {
     `import { test, expect } from ${quote2(options.testImport?.trim() || "@playwright/test")};`,
     ...importLines,
     ``,
-    ...opening,
+    ...testOpening,
     ...testBody,
     `});`,
     ``
   ];
-  const header = 1 + importLines.length + 1 + opening.length;
+  const header = 1 + importLines.length + 1 + testOpening.length;
   return { code: lines.join("\n"), matchedSpans, warnings: ctx.warnings, stepLines: linesFrom(header) };
 }
 
@@ -1850,7 +1859,12 @@ var STEPS_LIMITS = {
   /** Typed values, expected values, URLs, notes. */
   valueLength: 2e3,
   /** Titles, names, texts, locators. */
-  textLength: 500
+  textLength: 500,
+  viewports: 50,
+  /** The widest and tallest viewport, in CSS pixels. */
+  viewportSize: 1e4,
+  /** The browser's zoom factors a viewport may name, as browsers allow them. */
+  zoom: { min: 0.25, max: 5 }
 };
 var ACTIONS = /* @__PURE__ */ new Set([
   "goto",
@@ -1895,13 +1909,14 @@ function toStepsDocument(session, meta = {}) {
     origin,
     recordedAt: session.startedAt,
     note: meta.note ?? null,
-    steps: session.steps.map((step) => ({
+    steps: session.steps.map(({ view: _view, ...step }) => ({
       ...step,
       target: step.target ? withoutElementKey(step.target) : null,
       ...step.dropTarget ? { dropTarget: withoutElementKey(step.dropTarget) } : {},
       pageUrl: toPath(step.pageUrl, origin),
       value: step.action === "goto" && step.value ? toPath(step.value, origin) : step.value
-    }))
+    })),
+    ...session.viewports?.length ? { viewports: session.viewports.map((v) => ({ ...v })) } : {}
   };
 }
 function withoutElementKey(target) {
@@ -1915,7 +1930,12 @@ function sessionFromSteps(doc, origin = doc.origin) {
     value: step.action === "goto" && step.value ? toAbsolute(step.value, origin) : step.value
   }));
   const firstGoto = steps.find((s) => s.action === "goto");
-  return { steps, startedAt: doc.recordedAt, startUrl: firstGoto?.value ?? steps[0]?.pageUrl ?? origin ?? "" };
+  return {
+    steps,
+    startedAt: doc.recordedAt,
+    startUrl: firstGoto?.value ?? steps[0]?.pageUrl ?? origin ?? "",
+    ...doc.viewports?.length ? { viewports: doc.viewports } : {}
+  };
 }
 function isObject(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
@@ -2001,6 +2021,44 @@ function checkAssertion(c, v, path19) {
     note: c.text(v.note, `${path19}.note`, STEPS_LIMITS.valueLength, true)
   };
 }
+function checkViewports(c, v, stepCount) {
+  if (v == null) return [];
+  if (!Array.isArray(v)) {
+    c.fail("viewports", "must be a list");
+    return [];
+  }
+  if (v.length > STEPS_LIMITS.viewports) {
+    c.fail("viewports", `holds more than ${STEPS_LIMITS.viewports}`);
+    return [];
+  }
+  const out = [];
+  v.forEach((entry, i) => {
+    const at = `viewports[${i}]`;
+    if (!isObject(entry)) return c.fail(at, "must be an object");
+    const { step, width, height } = entry;
+    if (!Number.isInteger(step) || step < 0 || step >= stepCount)
+      return c.fail(`${at}.step`, "must be the index of a step");
+    for (const [name, size] of [
+      ["width", width],
+      ["height", height]
+    ]) {
+      if (!Number.isInteger(size) || size < 1 || size > STEPS_LIMITS.viewportSize)
+        return c.fail(`${at}.${name}`, `must be a whole number of pixels from 1 to ${STEPS_LIMITS.viewportSize}`);
+    }
+    const { zoom } = entry;
+    if (zoom != null && (typeof zoom !== "number" || !(zoom >= STEPS_LIMITS.zoom.min && zoom <= STEPS_LIMITS.zoom.max)))
+      return c.fail(`${at}.zoom`, `must be a zoom factor from ${STEPS_LIMITS.zoom.min} to ${STEPS_LIMITS.zoom.max}`);
+    const last = out[out.length - 1];
+    if (last && last.step >= step) return c.fail(`${at}.step`, "must come after the step before it");
+    out.push({
+      step,
+      width,
+      height,
+      ...zoom != null && zoom !== 1 ? { zoom } : {}
+    });
+  });
+  return out;
+}
 function checkStep(c, v, path19) {
   if (!isObject(v)) {
     c.fail(path19, "must be an object");
@@ -2072,13 +2130,15 @@ function parseSteps(input) {
     const originText = c.text(value.origin, "origin", STEPS_LIMITS.textLength, true);
     const origin = originText ? originOf2(originText) : null;
     if (originText && !origin) c.fail("origin", "must be an http(s) origin");
+    const viewports = checkViewports(c, value.viewports, steps.length);
     doc = {
       v: STEPS_VERSION,
       title: c.text(value.title, "title", STEPS_LIMITS.textLength, true),
       origin,
       recordedAt: value.recordedAt == null ? 0 : c.number(value.recordedAt, "recordedAt"),
       note: c.text(value.note, "note", STEPS_LIMITS.valueLength, true),
-      steps
+      steps,
+      ...viewports.length > 0 ? { viewports } : {}
     };
   }
   return c.errors.length > 0 ? { ok: false, errors: c.errors } : { ok: true, steps: doc };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@piwitests/reporter",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "Playwright reporter that streams results, traces and HTML reports to a Piwi Dashboard instance",
   "url": "https://github.com/PiwiTests/platform",
   "homepage": "https://piwitests.dev",