@itmetsam/samurai-framework 0.20.0 → 0.21.1

package/dist/recorder/toolbar/source/handlers.js

@@ -19,14 +19,8 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
     expand: () => post({ action: "collapse", collapsed: false }),
     "resume-yes": () => { if (state.resumeQuestion) post({ action: "resume-goto", add: true }); },
     "resume-no": () => { if (state.resumeQuestion) post({ action: "resume-goto", add: false }); },
-    assert: () => {
-      if (!usable()) return;
-      const wasOn = toolOn("assert");
-      stopPicking();
-      closePanel();
-      ui.picking = !wasOn;
-      render();
-    },
+    assert: () => startPicking("assert"),
+    output: () => startPicking("output"),
     page: () => openTool("page"),
     insert: () => openTool("insert"),
     wait: () => openTool("wait"),
@@ -57,6 +51,17 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
       post(message);
       render();
     },
+    "output-save": () => {
+      const o = ui.panel === "output" && ui.output;
+      if (!o || ui.busy || !o.info || !o.info.ok) return;
+      ui.busy = true;
+      o.nameError = null;
+      o.error = null;
+      const message = { action: "save-output", id: o.id, target: o.target, candidates: o.candidates, name: o.name.trim() };
+      if (o.pattern.trim()) message.pattern = o.pattern.trim();
+      post(message);
+      render();
+    },
     "page-matcher": (detail) => {
       const p = ui.panel === "page" && ui.page;
       if (!p || !p.info || !p.info.ok || !PAGE_MATCHERS.some(([matcher]) => matcher === detail.matcher)) return;
@@ -85,6 +90,8 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
         const secret = state.secrets.find((s) => s.name === detail.name);
         if (!secret) return;
         if (!secret.set) return openForm("secret", secret.name, true);
+      } else if (detail.kind === "input") {
+        if (!(state.inputs || []).some((i) => i.name === detail.name)) return;
       } else if (!state.canAddVariables || !state.variables.some((v) => v.name === detail.name)) {
         return;
       }
@@ -93,20 +100,20 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
     "insert-first": () => {
       if (ui.panel !== "insert" || !ui.insert.field) return;
       const found = matches();
-      const first = found.variables[0] ? { kind: "env", name: found.variables[0].name } : found.secrets[0] && { kind: "secret", name: found.secrets[0].name };
+      const first = found.variables[0] ? { kind: "env", name: found.variables[0].name } : found.secrets[0] ? { kind: "secret", name: found.secrets[0].name } : found.inputs[0] && { kind: "input", name: found.inputs[0].name };
       if (first) handlers["insert-item"](first);
     },
     "insert-new": (detail) => {
       if (ui.panel !== "insert" || !ui.insert.field) return;
       const filter = ui.insert.filter.trim();
       const base = filter || fieldName(ui.insert.field);
-      const name = detail.kind === "secret" ? snake(base) : filter ? variableName(filter) : camel(base);
-      openForm(detail.kind === "secret" ? "secret" : "env", name, false);
+      const name = detail.kind === "secret" ? snake(base) : detail.kind === "input" ? camel(base) : filter ? variableName(filter) : camel(base);
+      openForm(detail.kind === "secret" ? "secret" : detail.kind === "input" ? "input" : "env", name, false);
     },
     "new-kind": (detail) => {
       const f = ui.panel === "new" && ui.form;
       if (!f || ui.busy || f.kind === detail.kind) return;
-      f.kind = detail.kind === "secret" ? "secret" : "env";
+      f.kind = detail.kind === "secret" ? "secret" : detail.kind === "input" ? "input" : "env";
       f.name = f.kind === "secret" ? snake(f.name) : camel(f.name);
       f.nameError = null;
       f.error = null;

package/dist/recorder/toolbar/source/picking.js

@@ -3,6 +3,7 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
   const closePanel = () => {
     ui.panel = null;
     ui.assert = null;
+    ui.output = null;
     ui.page = null;
     ui.busy = false;
     ui.closeOnUpdate = false;
@@ -11,7 +12,7 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
   };
   const stopPicking = () => {
     ui.picking = false;
-    if (ui.panel !== "assert") hideOutline();
+    if (ui.panel !== "assert" && ui.panel !== "output") hideOutline();
   };
   const usable = () => !paused() && !state.collapsed;
   const openTool = (tool) => {
@@ -43,6 +44,16 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
     }
     render();
   };
+  // The tool's picker: Assert or Save as output
+  const startPicking = (tool) => {
+    if (!usable()) return;
+    const wasOn = toolOn(tool);
+    stopPicking();
+    closePanel();
+    ui.picking = !wasOn;
+    ui.pickFor = tool;
+    render();
+  };
   const pick = (target) => {
     if (!ui.picking || !target || target.nodeType !== 1) return;
     ui.picking = false;
@@ -50,12 +61,16 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
     const id = nextId++;
     const candidates = candidatesOf(target);
     const r = target.getBoundingClientRect();
-    ui.assert = {
-      id, target, candidates, info: null, matcher: "toBeVisible", expected: "", attribute: null, countIndex: 0,
-      cssName: "", cssValue: "", not: false, error: null,
-      rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom },
-    };
-    ui.panel = "assert";
+    const rect = { left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+    if (ui.pickFor === "output") {
+      ui.output = { id, target, candidates, info: null, name: "", pattern: "", preview: null, nameError: null, error: null, rect };
+    } else {
+      ui.assert = {
+        id, target, candidates, info: null, matcher: "toBeVisible", expected: "", attribute: null, countIndex: 0,
+        cssName: "", cssValue: "", not: false, error: null, rect,
+      };
+    }
+    ui.panel = ui.pickFor === "output" ? "output" : "assert";
     ui.pending = id;
     showOutline(target);
     post({ action: "pick", id, target, candidates });

package/dist/recorder/toolbar/source/recorder-side.js

@@ -27,6 +27,13 @@ export const RECORDER_SIDE_JS = String.raw `  // ---- The recorder's side ----
     render();
   };
   const reply = (id, result) => {
+    // A Save as output preview, for the pattern still typed (a late one is dropped); it doesn't end a pending action
+    if (result && result.preview) {
+      const o = ui.panel === "output" && ui.output;
+      if (!o || o.id !== id || o.pattern.trim() !== result.pattern) return;
+      o.preview = result;
+      return render();
+    }
     if (!ui.pending || id !== ui.pending || !result) return;
     ui.busy = false;
     const ok = result.ok === true;
@@ -41,6 +48,10 @@ export const RECORDER_SIDE_JS = String.raw `  // ---- The recorder's side ----
         a.cssValue = result.css.value;
         a.expected = prefill(a, a.matcher);
       }
+    } else if (ui.panel === "output" && ui.output && !ui.output.info) {
+      ui.output.info = result;
+      if (ok) ui.focus = "outputName";
+      if (ok && result.showsSecret) askPreview(ui.output);
     } else if (ui.panel === "page" && ui.page && !ui.page.info) {
       ui.page.info = result;
       if (ok) {
@@ -51,6 +62,9 @@ export const RECORDER_SIDE_JS = String.raw `  // ---- The recorder's side ----
       closePanel();
     } else if (ui.panel === "assert" && ui.assert) {
       ui.assert.error = result.error;
+    } else if (ui.panel === "output" && ui.output) {
+      if (result.field === "name") ui.output.nameError = result.error;
+      else ui.output.error = result.error;
     } else if (ui.panel === "page" && ui.page) {
       ui.page.error = result.error;
     } else if (ui.panel === "insert") {

package/dist/recorder/toolbar/source/setup.js

@@ -14,7 +14,7 @@ export const SETUP_JS = String.raw `  if (window !== window.top) return;
   const CSS = ${JSON.stringify(TOOLBAR_CSS)};
   const DEFAULTS = {
     status: "recording", collapsed: false, position: null, steps: 0, environment: "", canAddVariables: false,
-    variables: [], secrets: [], secretsIgnored: true, resumeQuestion: false, nextScreenshot: "screenshot-1",
+    variables: [], secrets: [], inputs: [], secretsIgnored: true, resumeQuestion: false, nextScreenshot: "screenshot-1",
     warnings: [],
   };
   const MATCHERS = [
@@ -34,8 +34,8 @@ export const SETUP_JS = String.raw `  if (window !== window.top) return;
   let toastTimer = 0;
   // Local UI state; everything about steps lives in the recorder
   const ui = {
-    panel: null, picking: false, busy: false, closeOnUpdate: false, pending: 0, focus: null,
-    field: null, assert: null, page: null, insert: null, form: null,
+    panel: null, picking: false, pickFor: "assert", busy: false, closeOnUpdate: false, pending: 0, focus: null,
+    field: null, assert: null, output: null, page: null, insert: null, form: null,
     wait: { kind: "idle", seconds: "2" }, shot: { name: "", fullPage: false },
     drag: null, dropped: null, toastId: null,
   };

package/dist/recorder/toolbar/source/views-panels.d.ts

@@ -1,2 +1,2 @@
-/** Views: the Assert, Page, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+/** Views: the Assert, Save as output, Page, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
 export declare const VIEWS_PANELS_JS: string;

package/dist/recorder/toolbar/source/views-panels.js

@@ -1,4 +1,4 @@
-/** Views: the Assert, Page, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
+/** Views: the Assert, Save as output, Page, Insert, New, Wait and Screenshot panels. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
 export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher) =>
     (matcher === "toHaveValue" && info.value === undefined) ||
     (matcher === "toHaveAttribute" && info.attributes.length === 0) ||
@@ -73,6 +73,50 @@ export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher)
     ];
   };
 
+  // What the output would hold, as outputs.save reads it: the pattern's first group, else its whole match, else the text
+  const captureOf = (text, pattern) => {
+    if (!pattern.trim()) return { value: text };
+    let re;
+    try { re = new RegExp(pattern.trim()); } catch (err) { return { error: "Not a valid pattern" }; }
+    const match = re.exec(text);
+    if (!match) return { error: "No match" };
+    return { value: match[1] !== undefined ? match[1] : match[0] };
+  };
+  // An element that shows a secret reaches the page with it masked: the recorder works out its preview from the real text
+  const askPreview = (o) => {
+    o.preview = null;
+    post({ action: "output-preview", id: o.id, pattern: o.pattern.trim() });
+  };
+  const outputCapture = (o) => {
+    if (!o.info.showsSecret) return captureOf(o.info.outputText, o.pattern);
+    if (!o.preview) return { value: "…" };
+    return o.preview.ok ? { value: o.preview.value, secret: o.preview.secret } : { error: o.preview.error };
+  };
+  const outputPanel = () => {
+    const o = ui.output;
+    const info = o.info;
+    const head = h("div", { class: "h" }, "Save as output", info && info.ok && h("code", { title: info.label }, info.label));
+    if (!info) return [head, h("div", { class: "msg" }, "…")];
+    if (!info.ok) return [head, h("div", { class: "err" }, info.error)];
+    const capture = outputCapture(o);
+    return [
+      head,
+      info.showsSecret && h("div", { class: "warn out-secret" }, "This element shows a secret. The saved output may contain it; use a pattern that captures only the non-secret part."),
+      h("div", { class: "lbl" }, "Text"),
+      h("div", { class: "msg out-text" }, info.showsSecret ? info.outputText : info.text),
+      h("div", { class: "lbl" }, "Name"),
+      h("div", { class: "f" }, h("input", { type: "text", class: "in code", "data-field": "outputName", value: o.name, "data-enter": "output-save", autocomplete: "off", spellcheck: "false" })),
+      o.nameError && h("div", { class: "field-error" }, o.nameError),
+      h("div", { class: "lbl" }, "Pattern (optional)"),
+      h("div", { class: "f" }, h("input", { type: "text", class: "in code", "data-field": "outputPattern", value: o.pattern, placeholder: "Order #(\\d+)", "data-enter": "output-save", autocomplete: "off", spellcheck: "false" })),
+      h("div", { class: "lbl" }, "Saves"),
+      capture.error ? h("div", { class: "warn out-capture" }, capture.error) : h("code", { class: "out-capture" }, capture.value),
+      capture.secret && h("div", { class: "err out-leak" }, "The output will contain a secret: reports mask it, but whatever reads the output gets the real value."),
+      o.error && h("div", { class: "err" }, o.error),
+      h("div", { class: "foot" }, h("button", { class: "add", "data-action": "output-save", disabled: ui.busy || !o.name.trim() }, "Save")),
+    ];
+  };
+
   const pagePanel = () => {
     const p = ui.page;
     const head = h("div", { class: "h" }, "Page");
@@ -98,13 +142,14 @@ export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher)
       filter,
       variables: state.canAddVariables ? state.variables.filter(hit) : [],
       secrets: state.secrets.filter(hit),
+      inputs: (state.inputs || []).filter(hit),
     };
   };
   const insertPanel = () => {
     const ins = ui.insert;
     if (!ins.field) return [h("div", { class: "h" }, "Insert"), h("div", { class: "msg" }, "Click into a field first")];
     const found = matches();
-    const none = found.filter && found.variables.length === 0 && found.secrets.length === 0;
+    const none = found.filter && found.variables.length === 0 && found.secrets.length === 0 && found.inputs.length === 0;
     const item = (kind, name, value) =>
       h("button", { class: "it", "data-action": "insert-item", "data-kind": kind, "data-name": name, disabled: ui.busy }, h("code", null, name), value);
     return [
@@ -120,13 +165,19 @@ export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher)
       found.secrets.length
         ? found.secrets.map((s) => item("secret", s.name, s.set ? h("span", { class: "v" }, "••••••") : h("span", { class: "warn" }, "not set")))
         : h("div", { class: "empty" }, found.filter ? "No secret matches." : "No secrets yet."),
+      h("div", { class: "grp" }, "Inputs"),
+      found.inputs.length
+        ? found.inputs.map((i) => item("input", i.name, h("span", { class: "v", title: i.value }, i.value)))
+        : h("div", { class: "empty" }, found.filter ? "No input matches." : "No inputs yet."),
       ins.error && h("div", { class: "err" }, ins.error),
       h("button", { class: "act", "data-action": "insert-new", "data-kind": "env" }, "+ Add variable" + (none ? ' "' + variableName(ins.filter) + '"' : "")),
       h("button", { class: "act", "data-action": "insert-new", "data-kind": "secret" }, "+ Add secret" + (none ? ' "' + snake(ins.filter) + '"' : "")),
+      h("button", { class: "act", "data-action": "insert-new", "data-kind": "input" }, "+ Add input" + (none ? ' "' + camel(ins.filter) + '"' : "")),
     ];
   };
 
-  const newHint = (secret, env, name) => {
+  const newHint = (kind, secret, env, name) => {
+    if (kind === "input") return "Declared in the test's inputs, with this value as its default.";
     if (!secret) return ["Saved to ", h("code", null, "environments." + env + ".variables"), " in samurai.config.ts. Other environments don't get it — add it there before running against them."];
     if (!state.secretsIgnored) return h("span", { class: "warn" }, "Add .env." + env + " to .gitignore before committing.");
     return ["Saved as ", h("code", null, "SAMURAI_SECRET_" + (name.trim() || "<NAME>")), " in ", h("code", null, ".env." + env), " (git-ignored)."];
@@ -134,22 +185,23 @@ export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher)
   const newPanel = () => {
     const f = ui.form;
     const secret = f.kind === "secret";
-    const blocked = !secret && !state.canAddVariables;
+    const blocked = f.kind === "env" && !state.canAddVariables;
     const env = state.environment;
     return [
-      h("div", { class: "h stack" }, f.setValue ? "Set value" : secret ? "New secret" : "New variable", h("small", null, 'For "' + fieldLabel(ui.insert.field) + '"')),
+      h("div", { class: "h stack" }, f.setValue ? "Set value" : secret ? "New secret" : f.kind === "input" ? "New input" : "New variable", h("small", null, 'For "' + fieldLabel(ui.insert.field) + '"')),
       h("div", { class: "seg" },
-        h("button", { class: secret ? "" : "sel", "data-action": "new-kind", "data-kind": "env" }, "Variable"),
-        h("button", { class: secret ? "sel" : "", "data-action": "new-kind", "data-kind": "secret" }, "Secret")),
+        h("button", { class: f.kind === "env" ? "sel" : "", "data-action": "new-kind", "data-kind": "env" }, "Variable"),
+        h("button", { class: secret ? "sel" : "", "data-action": "new-kind", "data-kind": "secret" }, "Secret"),
+        h("button", { class: f.kind === "input" ? "sel" : "", "data-action": "new-kind", "data-kind": "input" }, "Input")),
       blocked
         ? h("div", { class: "msg" }, "This recording has no environment")
         : [
             h("div", { class: "lbl" }, "Name"),
             h("div", { class: "f" }, h("input", { type: "text", class: "in code", "data-field": "name", value: f.name, "data-enter": "new-save", autocomplete: "off", spellcheck: "false" })),
             f.nameError && h("div", { class: "field-error" }, f.nameError),
-            h("div", { class: "lbl" }, "Value in " + env),
+            h("div", { class: "lbl" }, f.kind === "input" ? "Default value" : "Value in " + env),
             h("div", { class: "f" }, h("input", { type: secret ? "password" : "text", class: "in", "data-field": "value", value: f.value, "data-enter": "new-save", autocomplete: secret ? "new-password" : "off" })),
-            h("div", { class: "hint" }, newHint(secret, env, f.name)),
+            h("div", { class: "hint" }, newHint(f.kind, secret, env, f.name)),
             f.error && h("div", { class: "err" }, f.error),
           ],
       h("div", { class: "foot plain" },
@@ -181,5 +233,5 @@ export const VIEWS_PANELS_JS = String.raw `  const unavailable = (info, matcher)
     radio("fullPage", "true", ui.shot.fullPage, "Whole page"),
     h("div", { class: "foot" }, h("button", { class: "add", "data-action": "screenshot-add", disabled: ui.busy }, "Add")),
   ];
-  const PANELS = { assert: assertPanel, page: pagePanel, insert: insertPanel, new: newPanel, wait: waitPanel, screenshot: screenshotPanel };
+  const PANELS = { assert: assertPanel, output: outputPanel, page: pagePanel, insert: insertPanel, new: newPanel, wait: waitPanel, screenshot: screenshotPanel };
 `;

package/dist/recorder/toolbar/source/views-rail.js

@@ -1,7 +1,8 @@
 /** Views: the chip and the rail. A slice of the toolbar function: it shares one closure with its neighbours, see `../source.ts`. */
 export const VIEWS_RAIL_JS = String.raw `  // ---- Views ----
   const toolOn = (tool) =>
-    tool === "assert" ? ui.picking || ui.panel === "assert" : tool === "insert" ? ui.panel === "insert" || ui.panel === "new" : ui.panel === tool;
+    tool === "assert" || tool === "output" ? (ui.picking && ui.pickFor === tool) || ui.panel === tool
+      : tool === "insert" ? ui.panel === "insert" || ui.panel === "new" : ui.panel === tool;
 
   const chipView = () =>
     h("div", { class: "chip" },
@@ -30,7 +31,9 @@ export const VIEWS_RAIL_JS = String.raw `  // ---- Views ----
         ? h("button", { class: "b on", "data-action": "resume" }, ico("▶"), "Resume")
         : h("button", { class: "b", "data-action": "pause" }, ico("❚❚"), "Pause"),
       tool("assert", "✓", "Assert"),
-      ui.picking && h("div", { class: "note" }, "Click an element · Esc cancels"),
+      ui.picking && ui.pickFor === "assert" && h("div", { class: "note" }, "Click an element · Esc cancels"),
+      tool("output", "⇥", "Output"),
+      ui.picking && ui.pickFor === "output" && h("div", { class: "note" }, "Click an element · Esc cancels"),
       tool("page", "⌂", "Page"),
       tool("insert", "{x}", "Insert"),
       tool("wait", "⏱", "Wait"),

package/dist/recorder/toolbar/source.d.ts

@@ -9,22 +9,23 @@
  * `globalThis[Symbol.for("samurai.toolbar")]` in the sandbox holds the hook:
  * - `update(state)`: the recorder's state, after every change and every page load.
  * - `reply(id, result)`: the answer to `pick` (a `PickInfo`), to `page-info` (a `PageInfo`) or to `assert`,
- *   `assert-page`, `insert` and `add-insertable` (an `ActionReply`).
+ *   `assert-page`, `insert`, `add-insertable` and `save-output` (an `ActionReply`), or to `output-preview` (an
+ *   `OutputPreview`, which carries `preview: true` and doesn't end a pending action).
  * - `root`: the shadow root, for tests.
  * - `press(action, detail?)`: runs the handler a click on that control runs (for tests). Actions:
  *   `pause`, `resume`, `stop`, `collapse`, `expand`, `resume-yes`, `resume-no` (rail);
- *   `assert`, `page`, `insert`, `wait`, `screenshot` (open or close the tool);
+ *   `assert`, `output`, `page`, `insert`, `wait`, `screenshot` (open or close the tool);
  *   `pick { target }` (the element a picking click hit);
- *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
+ *   `matcher { matcher }`, `not`, `assert-add` (Assert panel); `output-save` (Save as output panel);
  *   `page-matcher { matcher }`, `page-not`, `page-add` (Page panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
  *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
- *   Form inputs carry `data-field` (`expected`, `attribute`, `cssName`, `countIndex`, `pageExpected`, `filter`,
+ *   Form inputs carry `data-field` (`expected`, `attribute`, `cssName`, `countIndex`, `outputName`, `outputPattern`, `pageExpected`, `filter`,
  *   `name`, `value`, `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and
  *   swaps in that recording's toolbar channel.
- * - `state()`, `picking()`: the last state from `update` and whether the Assert picker is on (for tests).
+ * - `state()`, `picking()`: the last state from `update` and whether the Assert or Save as output picker is on (for tests).
  * - `dispose()`: removes the host and every listener the toolbar put on the window and document (the
  *   recording ended while the document stays open).
  *

package/dist/recorder/toolbar/source.js

@@ -24,22 +24,23 @@ import { ATTACH_JS } from "./source/attach.js";
  * `globalThis[Symbol.for("samurai.toolbar")]` in the sandbox holds the hook:
  * - `update(state)`: the recorder's state, after every change and every page load.
  * - `reply(id, result)`: the answer to `pick` (a `PickInfo`), to `page-info` (a `PageInfo`) or to `assert`,
- *   `assert-page`, `insert` and `add-insertable` (an `ActionReply`).
+ *   `assert-page`, `insert`, `add-insertable` and `save-output` (an `ActionReply`), or to `output-preview` (an
+ *   `OutputPreview`, which carries `preview: true` and doesn't end a pending action).
  * - `root`: the shadow root, for tests.
  * - `press(action, detail?)`: runs the handler a click on that control runs (for tests). Actions:
  *   `pause`, `resume`, `stop`, `collapse`, `expand`, `resume-yes`, `resume-no` (rail);
- *   `assert`, `page`, `insert`, `wait`, `screenshot` (open or close the tool);
+ *   `assert`, `output`, `page`, `insert`, `wait`, `screenshot` (open or close the tool);
  *   `pick { target }` (the element a picking click hit);
- *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
+ *   `matcher { matcher }`, `not`, `assert-add` (Assert panel); `output-save` (Save as output panel);
  *   `page-matcher { matcher }`, `page-not`, `page-add` (Page panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
  *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
- *   Form inputs carry `data-field` (`expected`, `attribute`, `cssName`, `countIndex`, `pageExpected`, `filter`,
+ *   Form inputs carry `data-field` (`expected`, `attribute`, `cssName`, `countIndex`, `outputName`, `outputPattern`, `pageExpected`, `filter`,
  *   `name`, `value`, `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and
  *   swaps in that recording's toolbar channel.
- * - `state()`, `picking()`: the last state from `update` and whether the Assert picker is on (for tests).
+ * - `state()`, `picking()`: the last state from `update` and whether the Assert or Save as output picker is on (for tests).
  * - `dispose()`: removes the host and every listener the toolbar put on the window and document (the
  *   recording ended while the document stays open).
  *

package/dist/recorder/toolbar/types.d.ts

@@ -1,7 +1,7 @@
 import type { ElementHandle } from "../../script/element-handle.js";
 import type { LocatorCall, LocatorSpec } from "../../steps/model.js";
 import type { Observation } from "../normalise.js";
-import type { ActionReply, PageInfo, PickInfo, ToolbarMessage, ToolbarState } from "./protocol.js";
+import type { ActionReply, OutputPreview, PageInfo, PickInfo, ToolbarMessage, ToolbarState } from "./protocol.js";
 /** What `inspect` found for a picked element: the reply, and the locator behind each Count choice */
 export interface Inspection {
     info: PickInfo & {
@@ -14,7 +14,7 @@ export interface Inspection {
 export interface ControllerDeps {
     /** Sends the state to every loaded top-level document's toolbar */
     push(state: ToolbarState): void;
-    reply(id: number, result: PickInfo | PageInfo | ActionReply): void;
+    reply(id: number, result: PickInfo | PageInfo | ActionReply | OutputPreview): void;
     currentUrl(): Promise<string>;
     /** The recorded page's URL and title */
     pageInfo(): Promise<{
@@ -47,6 +47,8 @@ export interface ControllerOptions {
     /** Name → value; undefined when not set */
     secrets: Record<string, string | undefined>;
     secretsIgnored: boolean;
+    /** The test's declared inputs: name → default */
+    inputs?: Record<string, string>;
     /** Screenshot steps already in the test, for the default name */
     screenshots: number;
 }
@@ -56,20 +58,25 @@ export type Message = ToolbarMessage & {
 export type Of<A extends Message["action"]> = Extract<Message, {
     action: A;
 }>;
-/** The element picked for an Assert, and the locator behind each of its Count choices */
+/** The element picked for an Assert or Save as output, the locator behind each of its Count choices, and its text */
 export interface PickState {
     id: number;
     locator: LocatorSpec;
     counts: LocatorCall[];
+    /** Its text as `outputs.save` reads it, when it was picked, secrets included: it never goes back to the page */
+    text: string;
 }
-/** What the action handlers (assert, insert, add a variable or secret) use of the controller */
+/** The messages that expect a reply, and that a double click sends twice */
+export type Replying = Of<"assert" | "assert-page" | "insert" | "add-insertable" | "save-output">;
+/** What the action handlers (assert, insert, add a variable, secret or input, save as output) use of the controller */
 export interface ActionContext {
     readonly deps: ControllerDeps;
     readonly options: ControllerOptions;
     readonly variables: Map<string, string>;
     readonly secrets: Map<string, string | undefined>;
+    readonly inputs: Map<string, string>;
     isPaused(): boolean;
-    /** The picked element an `assert` with the same id refers to */
+    /** The picked element an `assert` or `save-output` with the same id refers to */
     pick(): PickState | undefined;
     setPick(pick: PickState | undefined): void;
     showToast(text: string): void;

package/dist/runner/options.d.ts

@@ -24,6 +24,11 @@ export interface RunnerOptions {
      * @default the config's `retries`, else 0
      */
     retries?: number | string;
+    /**
+     * Values for the inputs the tests declare, by name: every test of the run reads the names it declares from
+     * here, and its own default for a name missing here
+     */
+    inputs?: Record<string, string>;
     /** Run the browser without a window. @default false */
     headless?: boolean;
     /** Remote debugging port of the browser. @default DEFAULT_PORT (9223) */

package/dist/runner/pooled-run.d.ts

@@ -16,9 +16,10 @@ export interface PlannedTest {
 }
 /**
  * Lists the run: every selected test in the first browser, then every selected test in the next one. The
- * position in the list is the item's `index`. `serialKey` says which group makes a test run alone.
+ * position in the list is the item's `index`. `serialKey` says which group makes a test run alone. `inputs`, the
+ * run's input values, go with every item.
  */
-export declare function planItems(selected: RegisteredTestCase[], browsers: SupportedBrowser[], serialKey: (test: RegisteredTestCase) => string | undefined): {
+export declare function planItems(selected: RegisteredTestCase[], browsers: SupportedBrowser[], serialKey: (test: RegisteredTestCase) => string | undefined, inputs?: Record<string, string>): {
     items: WorkItem[];
     planned: PlannedTest[];
 };

package/dist/runner/pooled-run.js

@@ -2,9 +2,10 @@ import { idOf } from "./select.js";
 import { staticSkip } from "./skip.js";
 /**
  * Lists the run: every selected test in the first browser, then every selected test in the next one. The
- * position in the list is the item's `index`. `serialKey` says which group makes a test run alone.
+ * position in the list is the item's `index`. `serialKey` says which group makes a test run alone. `inputs`, the
+ * run's input values, go with every item.
  */
-export function planItems(selected, browsers, serialKey) {
+export function planItems(selected, browsers, serialKey, inputs) {
     const planned = browsers.flatMap((browser) => selected.map((test) => ({ test, browser })));
     // A test that does not run (skip, fixme) is in the plan but not in the queue; `index` is its place in the plan
     const items = planned.flatMap(({ test, browser }, index) => {
@@ -18,6 +19,7 @@ export function planItems(selected, browsers, serialKey) {
                 testName: test.name,
                 browser,
                 ...(key !== undefined && { serialKey: key }),
+                ...(inputs !== undefined && { inputs }),
             },
         ];
     });

package/dist/runner/registry.d.ts

@@ -1,14 +1,18 @@
-import type { AllHook, EachHook, RegisteredTestCase, TestCaseBase, TestDetails } from "../types/test.js";
+import type { AllHook, EachHook, RegisteredTestCase, TestCaseBase, TestDetails, TestOptions } from "../types/test.js";
 type Body = TestCaseBase["function"];
 /** `test(title, fn)`, `test.skip(title, fn)`, `test.skip(condition, reason)` and the other forms */
 export interface TestFunction {
     (title: string, fn: Body): void;
+    (title: string, options: TestOptions, fn: Body): void;
     /** Registers a test that is not run */
     skip: SkipFunction;
     /** Registers a test that is not run because it is known to be broken */
     fixme: SkipFunction;
     /** Runs only this test (and the other `only` ones) */
-    only(title: string, fn: Body): void;
+    only: {
+        (title: string, fn: Body): void;
+        (title: string, options: TestOptions, fn: Body): void;
+    };
 }
 /**
  * With a title and a body it registers a skipped test, `{ reason }` saying why; with a condition it skips the
@@ -16,7 +20,7 @@ export interface TestFunction {
  */
 interface SkipFunction {
     (title: string, fn: Body): void;
-    (title: string, details: TestDetails, fn: Body): void;
+    (title: string, options: TestOptions, fn: Body): void;
     (condition: boolean, reason?: string): void;
 }
 /** `describe.skip` and `describe.fixme`: every test inside gets the modifier, and `{ reason }` says why */

package/dist/runner/registry.js

@@ -1,6 +1,7 @@
 import { fileURLToPath } from "node:url";
 import logger from "../logger/index.js";
 import { SkipSignal } from "./skip.js";
+import { validateTestIO } from "./test-io.js";
 import { addHook, currentSuite, enterSuite, leaveSuite, modifierOf, resetSuites, } from "./suite.js";
 const registered = [];
 /** Runs `fn` as the `describe` block `title`, under `modifier` when there is one. `fn` runs immediately and must be synchronous. */
@@ -17,7 +18,8 @@ function openDescribe(file, title, fn, modifier, reason) {
         leaveSuite();
     }
 }
-function add(file, title, fn, modifier, reason) {
+function add(file, title, fn, modifier, extras = {}) {
+    const { reason, inputs, outputs } = extras;
     const suite = currentSuite(file);
     const titlePath = [...titlesOf(suite), title];
     const name = titlePath.join(" > ");
@@ -28,6 +30,8 @@ function add(file, title, fn, modifier, reason) {
         file,
         suite,
         ...modifierOf({ modifier, ...(reason !== undefined && { reason }) }, suite),
+        ...(inputs && { inputs }),
+        ...(outputs && { outputs }),
     });
     logger.debug("Registered test %s", name);
 }
@@ -39,23 +43,37 @@ function titlesOf(suite) {
             titles.unshift(s.title);
     return titles;
 }
-/** The body and `{ reason }` of `(title, fn)` and `(title, details, fn)` */
-function bodyAndReason(call, title, second, third) {
-    const [details, fn] = typeof second === "function"
+/** The body and options of `(title, fn)` and `(title, options, fn)`; `describe` only reads `reason` from them */
+function bodyAndOptions(call, title, second, third) {
+    const [options, fn] = typeof second === "function"
         ? [undefined, second]
         : [second, third];
     if (typeof fn !== "function")
         throw new TypeError(`${call}(${JSON.stringify(title)}) needs a function as its last argument`);
-    const reason = details?.reason;
-    return { fn: fn, ...(reason !== undefined && { reason }) };
+    const reason = options?.reason;
+    return {
+        fn: fn,
+        ...(reason !== undefined && { reason }),
+        ...(options && call.startsWith("test") && validateTestIO(call, options)),
+    };
+}
+/** `test()` and `test.only()`: a reason only makes sense with skip and fixme */
+function registering(call, modifier) {
+    return ((title, second, third) => {
+        const { fn, reason, ...io } = bodyAndOptions(call, title, second, third);
+        if (reason !== undefined)
+            throw new Error(`${call}(): reason only applies to skip and fixme`);
+        // Frames: Error, callerFile, this function, the spec
+        add(callerFile(), title, fn, modifier, io);
+    });
 }
 /** `test.skip` and `test.fixme`: a title and a body register a test with the modifier; a condition skips the running test */
 function skipping(annotation) {
     return ((first, second, third) => {
         if (typeof first === "string") {
-            const { fn, reason } = bodyAndReason(`test.${annotation}`, first, second, third);
+            const { fn, ...extras } = bodyAndOptions(`test.${annotation}`, first, second, third);
             // Frames: Error, callerFile, this function, the spec
-            add(callerFile(), first, fn, annotation, reason);
+            add(callerFile(), first, fn, annotation, extras);
             return;
         }
         if (first)
@@ -65,14 +83,14 @@ function skipping(annotation) {
 /** `describe.skip` and `describe.fixme`, with or without `{ reason }` */
 function describeSkipping(annotation) {
     return ((title, second, third) => {
-        const { fn, reason } = bodyAndReason(`describe.${annotation}`, title, second, third);
+        const { fn, reason } = bodyAndOptions(`describe.${annotation}`, title, second, third);
         openDescribe(callerFile(), title, fn, annotation, reason);
     });
 }
-export const test = Object.assign((title, fn) => add(callerFile(), title, fn), {
+export const test = Object.assign(registering("test"), {
     skip: skipping("skip"),
     fixme: skipping("fixme"),
-    only: (title, fn) => add(callerFile(), title, fn, "only"),
+    only: registering("test.only", "only"),
 });
 export const describe = Object.assign((title, fn) => openDescribe(callerFile(), title, fn), {
     skip: describeSkipping("skip"),