@itmetsam/samurai-framework 0.20.0 → 0.21.1

package/dist/recorder/session-secrets.js

@@ -26,6 +26,10 @@ export async function toolbarOptions(run, source, dir, config, testIndex) {
         variables: run.settings.variables,
         secrets,
         secretsIgnored: await isGitIgnored(dir, `.env.${environment}`),
+        inputs: Object.fromEntries((tests[testIndex]?.inputs ?? []).map((input) => [
+            input.name,
+            input.default,
+        ])),
         screenshots: tests[testIndex]?.steps.filter(({ step }) => step.kind === "screenshot")
             .length ?? 0,
     };

package/dist/recorder/toolbar/action-guard.d.ts

@@ -1,13 +1,11 @@
 import type { ActionReply } from "./protocol.js";
-import type { Message, Of } from "./types.js";
-/** The messages that expect a reply, and that a double click sends twice */
-type Replying = Of<"assert" | "assert-page" | "insert" | "add-insertable">;
+import type { Message, Replying } from "./types.js";
 /**
  * Drops the repeat of an action that is running or was answered `{ ok: true }` (a double click: its first copy
  * answers), and lets a retry after `{ ok: false }` through.
  */
 export declare class ActionGuard {
-    /** Ids of `assert`, `assert-page`, `insert` and `add-insertable` being processed */
+    /** Ids of the replying actions (`REPLYING`) being processed */
     private readonly inFlight;
     /** Ids `accept` let through whose `run` hasn't started yet */
     private readonly claimed;
@@ -18,4 +16,3 @@ export declare class ActionGuard {
     /** Runs an action that expects a reply, unless it is a repeat (see `accept`); `reply` gets the answer */
     run(message: Replying, work: () => Promise<ActionReply>, reply: (id: number, result: ActionReply) => void): Promise<void>;
 }
-export {};

package/dist/recorder/toolbar/action-guard.js

@@ -1,10 +1,17 @@
+const REPLYING = [
+    "assert",
+    "assert-page",
+    "insert",
+    "add-insertable",
+    "save-output",
+];
 /**
  * Drops the repeat of an action that is running or was answered `{ ok: true }` (a double click: its first copy
  * answers), and lets a retry after `{ ok: false }` through.
  */
 export class ActionGuard {
     constructor() {
-        /** Ids of `assert`, `assert-page`, `insert` and `add-insertable` being processed */
+        /** Ids of the replying actions (`REPLYING`) being processed */
         this.inFlight = new Set();
         /** Ids `accept` let through whose `run` hasn't started yet */
         this.claimed = new Set();
@@ -13,10 +20,7 @@ export class ActionGuard {
     }
     /** Whether to process `message`; call it as the message arrives, before queueing it */
     accept(message) {
-        if (message.action !== "assert" &&
-            message.action !== "assert-page" &&
-            message.action !== "insert" &&
-            message.action !== "add-insertable")
+        if (!REPLYING.includes(message.action))
             return true;
         const { id } = message;
         if (this.inFlight.has(id) || this.done.has(id))

package/dist/recorder/toolbar/actions/insert.d.ts

@@ -1,6 +1,9 @@
 import type { ActionReply } from "../protocol.js";
 import type { ActionContext, Of } from "../types.js";
-/** Types a variable or secret the tester already has into the field they picked, and records one `insert` step */
+/** Types a variable, secret or input the tester already has into the field they picked, and records one `insert` step */
 export declare function insertAction(ctx: ActionContext, message: Of<"insert">): Promise<ActionReply>;
-/** Saves a new variable or secret to the project, then types it into the field and records the `insert` step */
+/**
+ * Adds a new variable, secret or input, then types it into the field and records the `insert` step. A variable or
+ * secret is saved to the project first; an input is declared by the step itself.
+ */
 export declare function addInsertableAction(ctx: ActionContext, message: Of<"add-insertable">): Promise<ActionReply>;

package/dist/recorder/toolbar/actions/insert.js

@@ -1,28 +1,39 @@
 import { ConfigEditError } from "../../../project/config-edit.js";
 import { SECRET_NAME } from "../../../project/secrets-file.js";
 import { ExistsError, VARIABLE_NAME } from "../../../project/variables.js";
-import { fail, NO_ENVIRONMENT, PAUSED, TYPE_FAILED, UNIDENTIFIABLE, } from "./reply.js";
-/** Types a variable or secret the tester already has into the field they picked, and records one `insert` step */
+import { fail, nameProblem, NO_ENVIRONMENT, PAUSED, TYPE_FAILED, UNIDENTIFIABLE, } from "./reply.js";
+/** Types a variable, secret or input the tester already has into the field they picked, and records one `insert` step */
 export async function insertAction(ctx, message) {
     if (ctx.isPaused())
         return fail(PAUSED);
     const { kind, name } = message;
-    const value = kind === "secret" ? ctx.secrets.get(name) : ctx.variables.get(name);
+    const value = kind === "secret"
+        ? ctx.secrets.get(name)
+        : kind === "input"
+            ? ctx.inputs.get(name)
+            : ctx.variables.get(name);
     if (value === undefined)
         return fail(kind === "secret"
             ? `Set a value for ${name} first`
-            : `There is no variable "${name}"`);
+            : kind === "input"
+                ? `There is no input "${name}"`
+                : `There is no variable "${name}"`);
     const locator = await locate(ctx, message);
     if (!locator)
         return fail(UNIDENTIFIABLE);
     return typeIn(ctx, locator, kind, name, value);
 }
-/** Saves a new variable or secret to the project, then types it into the field and records the `insert` step */
+/**
+ * Adds a new variable, secret or input, then types it into the field and records the `insert` step. A variable or
+ * secret is saved to the project first; an input is declared by the step itself.
+ */
 export async function addInsertableAction(ctx, message) {
     if (ctx.isPaused())
         return fail(PAUSED);
     const { kind, name } = message;
     const value = String(message.value ?? "");
+    if (kind === "input")
+        return addInput(ctx, message, name, value);
     if (kind === "env" && !ctx.options.canAddVariables)
         return fail(NO_ENVIRONMENT);
     const known = kind === "env"
@@ -56,6 +67,26 @@ export async function addInsertableAction(ctx, message) {
     ctx.push();
     return typeIn(ctx, locator, kind, name, value, true);
 }
+/**
+ * Types a new input's value and records the step with the declaration; the project is not written, the
+ * test's own `inputs` carries the default. The name counts as taken once the step is recorded.
+ */
+async function addInput(ctx, message, name, value) {
+    const problem = nameProblem(name);
+    if (problem)
+        return fail(problem, "name");
+    if (ctx.inputs.has(name))
+        return fail(`"${name}" already exists`, "name");
+    const locator = await locate(ctx, message);
+    if (!locator)
+        return fail(UNIDENTIFIABLE);
+    const reply = await typeIn(ctx, locator, "input", name, value, false, true);
+    if (reply.ok) {
+        ctx.inputs.set(name, value);
+        ctx.push();
+    }
+    return reply;
+}
 /** Undefined when `work` succeeded, else the reply for its error */
 async function write(work, replyFor) {
     try {
@@ -76,7 +107,7 @@ async function locate(ctx, message) {
         return undefined; // the element went away
     }
 }
-async function typeIn(ctx, locator, kind, name, value, saved = false) {
+async function typeIn(ctx, locator, kind, name, value, saved = false, declare = false) {
     try {
         await ctx.deps.type(locator, value);
     }
@@ -86,7 +117,12 @@ async function typeIn(ctx, locator, kind, name, value, saved = false) {
         ctx.push();
         return fail(TYPE_FAILED);
     }
-    ctx.deps.observe({ type: "insert", locator, value: { kind, name } });
+    ctx.deps.observe({
+        type: "insert",
+        locator,
+        value: { kind, name },
+        ...(declare && { declare: value }),
+    });
     return { ok: true };
 }
 const errorText = (err) => err instanceof Error ? err.message : String(err);

package/dist/recorder/toolbar/actions/pick.d.ts

@@ -1,8 +1,11 @@
 import type { PickInfo } from "../protocol.js";
 /** Whether a text holds the value of one of the secrets */
 export declare function holdsSecret(secrets: Map<string, string | undefined>): (text: string | undefined) => boolean;
+/** A text with every secret value it holds replaced by the mask, longest value first (as `holdsSecret` finds them) */
+export declare function maskSecrets(secrets: Map<string, string | undefined>): (text: string) => string;
 /**
  * A field may hold an inserted secret: its value (and any text, attribute, class or CSS value holding a secret) is left out,
+ * the output text has the secret masked (Save as output previews on the recorder's side then, see `outputPreview`),
  * and the first matcher follows the Alt+click rule without a value, so neither the page nor the spec gets it.
  */
 export declare function withoutSecrets(info: PickInfo & {

package/dist/recorder/toolbar/actions/pick.js

@@ -1,17 +1,27 @@
+import { MASK } from "../../../config/mask.js";
 import { expectationFor } from "../../expectation.js";
 /** Whether a text holds the value of one of the secrets */
 export function holdsSecret(secrets) {
     const values = [...secrets.values()].filter((value) => value !== undefined && value !== "");
     return (text) => text !== undefined && values.some((value) => text.includes(value));
 }
+/** A text with every secret value it holds replaced by the mask, longest value first (as `holdsSecret` finds them) */
+export function maskSecrets(secrets) {
+    const values = [...secrets.values()]
+        .filter((value) => value !== undefined && value !== "")
+        .sort((a, b) => b.length - a.length);
+    return (text) => values.reduce((masked, value) => masked.split(value).join(MASK), text);
+}
 /**
  * A field may hold an inserted secret: its value (and any text, attribute, class or CSS value holding a secret) is left out,
+ * the output text has the secret masked (Save as output previews on the recorder's side then, see `outputPreview`),
  * and the first matcher follows the Alt+click rule without a value, so neither the page nor the spec gets it.
  */
 export function withoutSecrets(info, secrets) {
     const secret = holdsSecret(secrets);
     if (!secret(info.value) &&
         !secret(info.text) &&
+        !secret(info.outputText) &&
         !secret(info.first.expected) &&
         !secret(info.className ?? undefined) &&
         !secret(info.css.value) &&
@@ -23,6 +33,8 @@ export function withoutSecrets(info, secrets) {
     return {
         ...rest,
         text,
+        outputText: maskSecrets(secrets)(info.outputText),
+        ...(secret(info.outputText) && { showsSecret: true }),
         attributes: info.attributes.filter((a) => !secret(a.value)),
         className: secret(info.className ?? undefined) ? null : info.className,
         css: secret(info.css.value) ? { ...info.css, value: "" } : info.css,

package/dist/recorder/toolbar/actions/reply.d.ts

@@ -5,3 +5,5 @@ export declare const NO_ENVIRONMENT = "This recording has no environment";
 export declare const PAUSED = "Nothing you do now is recorded.";
 /** A refusal the toolbar shows; `field` names the form field to mark */
 export declare const fail: (error: string, field?: "name") => ActionReply;
+/** What is wrong with `name` as an input or output name, as the name field shows it; undefined when nothing is */
+export declare function nameProblem(name: string): string | undefined;

package/dist/recorder/toolbar/actions/reply.js

@@ -1,3 +1,4 @@
+import { IO_NAME, isIoName } from "../../../flows/core/steps.js";
 export const UNIDENTIFIABLE = "This element can't be identified uniquely";
 export const TYPE_FAILED = "Couldn't type into that field";
 export const NO_ENVIRONMENT = "This recording has no environment";
@@ -8,3 +9,11 @@ export const fail = (error, field) => ({
     error,
     ...(field && { field }),
 });
+/** What is wrong with `name` as an input or output name, as the name field shows it; undefined when nothing is */
+export function nameProblem(name) {
+    if (isIoName(name))
+        return undefined;
+    return IO_NAME.test(name)
+        ? `name: ${JSON.stringify(name)} is reserved`
+        : "name: use letters, digits and _";
+}

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

@@ -0,0 +1,15 @@
+import type { ActionReply, OutputPreview } from "../protocol.js";
+import type { ActionContext, Of } from "../types.js";
+/**
+ * What Save as output would save from an element that shows a secret, worked out here because the page only has
+ * its text masked: `outputs.save`'s rule (the first group, else the whole match, else the whole text) on the text
+ * as picked, every secret masked, and whether the value held one. The errors read as the panel's own preview's.
+ */
+export declare function outputPreview(ctx: ActionContext, message: Of<"output-preview">): OutputPreview;
+/**
+ * Turns the Save as output panel's choice into a `saveOutput` step for the element that was picked. Refuses 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. An element that shows a
+ * secret is saved too: the panel warns that the output may hold it.
+ */
+export declare function saveOutputAction(ctx: ActionContext, message: Of<"save-output">): Promise<ActionReply>;

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

@@ -0,0 +1,73 @@
+import { captured, matchesText } from "../../../assert/text-match.js";
+import { holdsSecret, maskSecrets } from "./pick.js";
+import { fail, nameProblem, PAUSED } from "./reply.js";
+const PICK_AGAIN = "Pick the element again";
+/** A pattern as typed, compiled the way the step writes it; undefined when there is none, an error when it isn't valid */
+function compile(pattern) {
+    const source = String(pattern ?? "").trim();
+    if (source === "")
+        return undefined;
+    try {
+        return new RegExp(source);
+    }
+    catch {
+        return { error: "pattern is not a valid regular expression" };
+    }
+}
+/**
+ * What Save as output would save from an element that shows a secret, worked out here because the page only has
+ * its text masked: `outputs.save`'s rule (the first group, else the whole match, else the whole text) on the text
+ * as picked, every secret masked, and whether the value held one. The errors read as the panel's own preview's.
+ */
+export function outputPreview(ctx, message) {
+    const pattern = String(message.pattern ?? "");
+    const answer = { preview: true, pattern };
+    const pick = ctx.pick();
+    if (!pick || pick.id !== message.id)
+        return { ...answer, ok: false, error: PICK_AGAIN };
+    const compiled = compile(pattern);
+    if (compiled && !(compiled instanceof RegExp))
+        return { ...answer, ok: false, error: "Not a valid pattern" };
+    if (compiled && !matchesText(pick.text, compiled, "exact"))
+        return { ...answer, ok: false, error: "No match" };
+    const value = compiled ? captured(compiled, pick.text) : pick.text;
+    return {
+        ...answer,
+        ok: true,
+        value: maskSecrets(ctx.secrets)(value),
+        secret: holdsSecret(ctx.secrets)(value),
+    };
+}
+/**
+ * Turns the Save as output panel's choice into a `saveOutput` step for the element that was picked. Refuses 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. An element that shows a
+ * secret is saved too: the panel warns that the output may hold 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_AGAIN);
+    const name = String(message.name ?? "").trim();
+    const problem = nameProblem(name);
+    if (problem)
+        return fail(problem, "name");
+    const pattern = compile(message.pattern);
+    if (pattern && !(pattern instanceof RegExp))
+        return fail(pattern.error);
+    if (pattern && !matchesText(pick.text, pattern, "exact"))
+        return fail("pattern doesn't match the element's text");
+    if (!pattern && 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 { outputPreview, 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,10 @@ 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 "output-preview":
+                return this.reply(message.id, outputPreview(this.actions, message));
             case "wait":
                 if (this.paused)
                     return;
@@ -278,7 +282,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 +323,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,32 @@ 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 pattern of Save as output for an element that shows a secret, as typed: answered with an `OutputPreview` */
+ | {
+    action: "output-preview";
+    id: number;
+    pattern: string;
+}
 /** The Page panel opened: answered with a `PageInfo` */
  | {
     action: "page-info";
@@ -130,7 +150,12 @@ 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;
+    /** `outputText` held a secret, which is masked in it: Save as output asks the recorder for its preview */
+    showsSecret?: true;
     value?: string;
     attributes: {
         name: string;
@@ -169,7 +194,22 @@ export type PageInfo = {
     ok: false;
     error: string;
 };
-/** The answer to `insert`, `add-insertable`, `assert` and `assert-page` */
+/**
+ * The answer to `output-preview`: what `outputs.save` would keep from the element's real text with `pattern`,
+ * every secret masked; `secret` when the value held one. `pattern` is the one asked about, so a late answer is dropped.
+ */
+export type OutputPreview = {
+    preview: true;
+    pattern: string;
+} & ({
+    ok: true;
+    value: string;
+    secret: boolean;
+} | {
+    ok: false;
+    error: string;
+});
+/** 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,17 @@ 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;
+        if (ui.output.info && ui.output.info.ok && ui.output.info.showsSecret) askPreview(ui.output);
+      }
+      render();
+    }
     else if (field === "attribute" && ui.assert) {
       ui.assert.attribute = value;
       ui.assert.expected = prefill(ui.assert, "toHaveAttribute");