@itmetsam/samurai-framework 0.20.0 → 0.21.0

package/dist/recorder/toolbar/actions/save-output.d.ts

@@ -0,0 +1,9 @@
+import type { ActionReply } from "../protocol.js";
+import type { ActionContext, Of } from "../types.js";
+/**
+ * Turns the Save as output panel's choice into a `saveOutput` step for the element that was picked. Refuses an
+ * element whose text holds a secret, a name `test()` would reject, an element with no text when there is no
+ * pattern, and a pattern that isn't valid or doesn't match the element's text as picked, read the way
+ * `outputs.save` reads it.
+ */
+export declare function saveOutputAction(ctx: ActionContext, message: Of<"save-output">): Promise<ActionReply>;

package/dist/recorder/toolbar/actions/save-output.js

@@ -0,0 +1,46 @@
+import { matchesText } from "../../../assert/text-match.js";
+import { holdsSecret } from "./pick.js";
+import { fail, nameProblem, PAUSED } from "./reply.js";
+/**
+ * Turns the Save as output panel's choice into a `saveOutput` step for the element that was picked. Refuses an
+ * element whose text holds a secret, a name `test()` would reject, an element with no text when there is no
+ * pattern, and a pattern that isn't valid or doesn't match the element's text as picked, read the way
+ * `outputs.save` reads it.
+ */
+export async function saveOutputAction(ctx, message) {
+    if (ctx.isPaused())
+        return fail(PAUSED);
+    const pick = ctx.pick();
+    if (!pick || pick.id !== message.id)
+        return fail("Pick the element again");
+    // The step would write the secret into the run's results
+    if (holdsSecret(ctx.secrets)(pick.text))
+        return fail("this element shows a secret; it can't be an output");
+    const name = String(message.name ?? "").trim();
+    const problem = nameProblem(name);
+    if (problem)
+        return fail(problem, "name");
+    const source = String(message.pattern ?? "").trim();
+    let pattern;
+    if (source !== "") {
+        try {
+            pattern = new RegExp(source);
+        }
+        catch {
+            return fail("pattern is not a valid regular expression");
+        }
+        if (!matchesText(pick.text, pattern, "exact"))
+            return fail("pattern doesn't match the element's text");
+    }
+    else if (pick.text === "")
+        return fail("the element has no text");
+    ctx.setPick(undefined);
+    ctx.deps.observe({
+        type: "saveOutput",
+        locator: pick.locator,
+        name,
+        // The built pattern's source: a `/` comes out escaped, so the spec it is written into compiles
+        ...(pattern && { pattern: { source: pattern.source, flags: "" } }),
+    });
+    return { ok: true };
+}

package/dist/recorder/toolbar/controller-fixture.d.ts

@@ -18,8 +18,8 @@ export type Message = ToolbarMessage & {
     target?: ElementHandle;
 };
 export declare const msg: (message: Record<string, unknown>) => Message;
-export declare const insert: (id: number, kind: "env" | "secret", name: string) => Message;
-export declare const add: (id: number, kind: "env" | "secret", name: string, value: string) => Message;
+export declare const insert: (id: number, kind: "env" | "secret" | "input", name: string) => Message;
+export declare const add: (id: number, kind: "env" | "secret" | "input", name: string, value: string) => Message;
 export declare const pick: (id: number) => Message;
 /** A controller over fakes that record everything */
 export declare function setup(options?: Partial<ControllerOptions>, overrides?: Partial<ControllerDeps>): {

package/dist/recorder/toolbar/controller-fixture.js

@@ -10,6 +10,7 @@ const OPTIONS = {
     secrets: { ADMIN_PASSWORD: SECRET, API_TOKEN: undefined },
     secretsIgnored: true,
     screenshots: 0,
+    inputs: { email: "a@b.c" },
 };
 export const TARGET = new ElementHandle("el-1");
 export const CANDIDATES = [
@@ -24,6 +25,7 @@ export const INFO = {
     ok: true,
     label: `textbox "Email"`,
     text: "",
+    outputText: "",
     value: "a@b.c",
     attributes: [{ name: "id", value: "email" }],
     first: { matcher: "toHaveValue", expected: "a@b.c" },

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

@@ -15,6 +15,7 @@ export declare class ToolbarController {
     private screenshots;
     private readonly variables;
     private readonly secrets;
+    private readonly inputs;
     private pausedAt;
     /** The URL the resume question offers; set while it is asked */
     private question;
@@ -70,7 +71,7 @@ export declare class ToolbarController {
     private answer;
     /**
      * Whether to process `message`; call it as the message arrives, before queueing it. An `assert`, `assert-page`,
-     * `insert` or `add-insertable` whose id is in flight or was already answered `{ ok: true }` is a double click and is
+     * `insert`, `add-insertable` or `save-output` whose id is in flight or was already answered `{ ok: true }` is a double click and is
      * dropped (its first copy answers). A retry after `{ ok: false }` is accepted.
      */
     accept(message: Message): boolean;

package/dist/recorder/toolbar/controller.js

@@ -4,7 +4,9 @@ import { assertAction } from "./actions/assert.js";
 import { assertPageAction, pageInfoOf } from "./actions/assert-page.js";
 import { addInsertableAction, insertAction } from "./actions/insert.js";
 import { withoutSecrets } from "./actions/pick.js";
+import { saveOutputAction } from "./actions/save-output.js";
 import { fail, PAUSED, UNIDENTIFIABLE } from "./actions/reply.js";
+import { insertablesOf } from "./insertables.js";
 import { LEFT, PageScope } from "./page-scope.js";
 /** A wait for time is 0.1–60 s */
 const WAIT_MIN_MS = 100;
@@ -39,11 +41,13 @@ export class ToolbarController {
             String(value),
         ]));
         this.secrets = new Map(Object.entries(options.secrets));
+        this.inputs = new Map(Object.entries(options.inputs ?? {}));
         this.actions = {
             deps,
             options,
             variables: this.variables,
             secrets: this.secrets,
+            inputs: this.inputs,
             isPaused: () => this.paused,
             pick: () => this.pick,
             setPick: (pick) => {
@@ -64,11 +68,7 @@ export class ToolbarController {
             steps: this.steps,
             environment: this.options.environment,
             canAddVariables: this.options.canAddVariables,
-            variables: [...this.variables].map(([name, value]) => ({ name, value })),
-            secrets: [...this.secrets].map(([name, value]) => ({
-                name,
-                set: value !== undefined,
-            })),
+            ...insertablesOf(this.actions),
             secretsIgnored: this.options.secretsIgnored,
             resumeQuestion: this.question !== undefined,
             nextScreenshot: `screenshot-${this.screenshots + 1}`,
@@ -146,6 +146,8 @@ export class ToolbarController {
                 return this.replying(message, () => insertAction(this.actions, message));
             case "add-insertable":
                 return this.replying(message, () => addInsertableAction(this.actions, message));
+            case "save-output":
+                return this.replying(message, () => saveOutputAction(this.actions, message));
             case "wait":
                 if (this.paused)
                     return;
@@ -278,7 +280,7 @@ export class ToolbarController {
     }
     /**
      * Whether to process `message`; call it as the message arrives, before queueing it. An `assert`, `assert-page`,
-     * `insert` or `add-insertable` whose id is in flight or was already answered `{ ok: true }` is a double click and is
+     * `insert`, `add-insertable` or `save-output` whose id is in flight or was already answered `{ ok: true }` is a double click and is
      * dropped (its first copy answers). A retry after `{ ok: false }` is accepted.
      */
     accept(message) {
@@ -319,7 +321,12 @@ export class ToolbarController {
                     return undefined;
                 const inspected = await this.deps.inspect(message.target, locator, message.candidates);
                 if (page === this.scope.current)
-                    this.pick = { id: message.id, locator, counts: inspected.counts };
+                    this.pick = {
+                        id: message.id,
+                        locator,
+                        counts: inspected.counts,
+                        text: inspected.info.outputText,
+                    };
                 return inspected;
             });
         }

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

@@ -0,0 +1,7 @@
+import type { ToolbarState } from "./protocol.js";
+/** What the Insert list shows of the variables, secrets (names only) and inputs the controller holds */
+export declare function insertablesOf(held: {
+    variables: ReadonlyMap<string, string>;
+    secrets: ReadonlyMap<string, string | undefined>;
+    inputs: ReadonlyMap<string, string>;
+}): Pick<ToolbarState, "variables" | "secrets" | "inputs">;

package/dist/recorder/toolbar/insertables.js

@@ -0,0 +1,12 @@
+/** What the Insert list shows of the variables, secrets (names only) and inputs the controller holds */
+export function insertablesOf(held) {
+    const named = ([name, value]) => ({ name, value });
+    return {
+        variables: [...held.variables].map(named),
+        secrets: [...held.secrets].map(([name, value]) => ({
+            name,
+            set: value !== undefined,
+        })),
+        inputs: [...held.inputs].map(named),
+    };
+}

package/dist/recorder/toolbar/inspect.js

@@ -8,7 +8,7 @@ const MAX_COUNTS = 3;
 /** The property Has CSS starts with */
 const CSS_PROPERTY = "color";
 /**
- * Run in the toolbar's sandbox on the picked element: its text (cut at 4 KB), value (as the Alt+click rule reads it), first
+ * Run in the toolbar's sandbox on the picked element: its text (cut at 4 KB), its whole text as `outputs.save` reads it, value (as the Alt+click rule reads it), first
  * 20 attributes, its role without a name and its `tag.class` selector. `roleOf` only knows the roles the
  * candidates use, so the common list and table roles are added for Count. Also whether it can be checked or
  * disabled, its class attribute and the computed value of `CSS_PROPERTY`.
@@ -27,6 +27,7 @@ const INSPECT_SOURCE = String.raw `(el, cssName) => {
   const className = el.getAttribute("class");
   return {
     text: norm(String(el.textContent == null ? "" : el.textContent).slice(0, TEXT_CAP * 2)).slice(0, TEXT_CAP),
+    outputText: String(el.textContent == null ? "" : el.textContent).trim(),
     value: hasValue && !secret ? el.value : null,
     attributes: Array.from(el.attributes).slice(0, 20).map((a) => ({ name: a.name, value: a.value })),
     role: roleOf(el) || MORE_ROLES[tag] || null,
@@ -94,6 +95,7 @@ export async function inspectElement(page, connector, context, target, locator,
             ok: true,
             label: describeCall(locator.chain[0]),
             text: found.text,
+            outputText: found.outputText,
             ...(value !== undefined && { value }),
             attributes: found.attributes,
             first: {

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

@@ -25,6 +25,11 @@ export interface ToolbarState {
         name: string;
         set: boolean;
     }[];
+    /** The recording test's declared inputs and their defaults */
+    inputs: {
+        name: string;
+        value: string;
+    }[];
     /** Whether `.env.<environment>` is git-ignored */
     secretsIgnored: boolean;
     /** Ask "Add a step that opens this page?" */
@@ -93,17 +98,26 @@ export type ToolbarMessage = {
     id: number;
     target: unknown;
     candidates: LocatorCall[];
-    kind: "env" | "secret";
+    kind: "env" | "secret" | "input";
     name: string;
 } | {
     action: "add-insertable";
     id: number;
     target: unknown;
     candidates: LocatorCall[];
-    kind: "env" | "secret";
+    kind: "env" | "secret" | "input";
     name: string;
     value: string;
 }
+/** Save as output for the element picked with the same id; `pattern` is a RegExp's source, no flags */
+ | {
+    action: "save-output";
+    id: number;
+    target: unknown;
+    candidates: LocatorCall[];
+    name: string;
+    pattern?: string;
+}
 /** The Page panel opened: answered with a `PageInfo` */
  | {
     action: "page-info";
@@ -130,7 +144,10 @@ export type ToolbarMessage = {
 export type PickInfo = {
     ok: true;
     label: string;
+    /** Whitespace collapsed and trimmed, cut at 4 KB: what the Assert panel shows and prefills */
     text: string;
+    /** The whole text as `outputs.save` reads it (`textContent`, trimmed): what Save as output captures from */
+    outputText: string;
     value?: string;
     attributes: {
         name: string;
@@ -169,7 +186,7 @@ export type PageInfo = {
     ok: false;
     error: string;
 };
-/** The answer to `insert`, `add-insertable`, `assert` and `assert-page` */
+/** The answer to `insert`, `add-insertable`, `assert`, `assert-page` and `save-output` */
 export type ActionReply = {
     ok: true;
 } | {

package/dist/recorder/toolbar/source/events-page.js

@@ -62,6 +62,7 @@ export const EVENTS_PAGE_JS = String.raw `  // ---- Events on the page (window c
   }, true);
   listen(window, "resize", () => render());
   listen(window, "scroll", () => {
-    if (ui.panel === "assert" && ui.assert && !outline.hidden) showOutline(ui.assert.target);
+    const picked = ui.panel === "assert" ? ui.assert : ui.panel === "output" ? ui.output : null;
+    if (picked && !outline.hidden) showOutline(picked.target);
   }, true);
 `;

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

@@ -11,6 +11,14 @@ export const FIELDS_JS = String.raw `  const press = (action, detail) => {
     const value = t.value;
     if (field === "expected" && ui.assert) ui.assert.expected = value;
     else if (field === "pageExpected" && ui.page) ui.page.expected = value;
+    else if ((field === "outputName" || field === "outputPattern") && ui.output) {
+      const key = field === "outputName" ? "name" : "pattern";
+      if (ui.output[key] === value) return;
+      ui.output[key] = value;
+      if (key === "name") ui.output.nameError = null;
+      else ui.output.error = null;
+      render();
+    }
     else if (field === "attribute" && ui.assert) {
       ui.assert.attribute = value;
       ui.assert.expected = prefill(ui.assert, "toHaveAttribute");

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: "", 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

@@ -41,6 +41,9 @@ 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";
     } else if (ui.panel === "page" && ui.page && !ui.page.info) {
       ui.page.info = result;
       if (ok) {
@@ -51,6 +54,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,38 @@ 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] };
+  };
+  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 = captureOf(info.outputText, o.pattern);
+    return [
+      head,
+      h("div", { class: "lbl" }, "Text"),
+      h("div", { class: "msg out-text" }, 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),
+      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 +130,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 +153,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 +173,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 +221,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"),