@itmetsam/samurai-framework 0.7.1 → 0.9.0

package/dist/recorder/recorder.d.ts

@@ -21,6 +21,24 @@ export type ToolbarOptions = ControllerOptions & {
      */
     onStop?: () => void;
 };
+/** Where uploads made while recording are stored */
+export interface FileRecording {
+    /** The project folder */
+    projectDir: string;
+    /** Relative to the project folder. @default "files" */
+    filesDir?: string;
+    /** A file that isn't stored (over 50 MB, or unreadable): its step points at `path`, which doesn't exist */
+    onMissing?: (file: MissingFile) => void;
+    /** @internal Tests only: also record events no person caused (`isTrusted` false) */
+    trustSynthetic?: boolean;
+}
+export interface MissingFile {
+    /** Project-relative, as the step has it */
+    path: string;
+    name: string;
+    size: number;
+    reason: "too-big" | "unreadable";
+}
 export interface RecorderOptions {
     /** Called for every step the tester produces, in order. Steps get indexes from `at` on */
     onEvent: (event: RecorderEvent) => void;
@@ -36,6 +54,8 @@ export interface RecorderOptions {
     baseURL?: string;
     /** Shows the recorder toolbar in the page (pause, assert, insert, wait, screenshot, stop). Without it, no toolbar */
     toolbar?: ToolbarOptions;
+    /** Records uploads (file inputs and drops) into the project's files folder. Without it, uploads aren't recorded */
+    files?: FileRecording;
 }
 /**
  * Watches the tester use the page and reports steps as they happen. A preload script reports clicks,
@@ -55,9 +75,21 @@ export declare class Recorder {
     private readonly queue;
     private readonly known;
     private stopped;
+    /** Set when stopping begins: files messages after it are not taken */
+    private ending;
     private stopping;
     private controller;
     private constructor();
+    /** The files capture script's channel, handed only to its sandbox */
+    private readonly filesChannel;
+    private filesPreload;
+    private filesRealms;
+    private readonly stored;
+    private readonly missing;
+    /** Files stored or reused in the files folder by this recording, project-relative */
+    get storedFiles(): string[];
+    /** Files whose steps point at a path that wasn't written */
+    get missingFiles(): MissingFile[];
     /** The context's `samurai-toolbar` sandbox realms, as last listed: the only realms toolbar messages are taken from */
     private toolbarRealms;
     /** Toolbar messages waiting for a realm lookup, and those that arrived behind them (kept in order) */
@@ -75,6 +107,7 @@ export declare class Recorder {
      * holds if a page realm ever got the toolbar's channel.
      */
     private readonly onMessage;
+    private listFilesRealms;
     private listToolbarRealms;
     /** A message from the toolbar's own sandbox */
     private fromToolbar;
@@ -91,6 +124,9 @@ export declare class Recorder {
     private emit;
     private locatorFor;
     private handle;
+    private fromFiles;
+    /** Saves one kept file to the files folder; returns the path its step gets */
+    private storePageFile;
     private release;
     /**
      * Pauses capture in the loaded document: clicks and typing are not reported until `unmute`.
@@ -104,3 +140,5 @@ export declare class Recorder {
     stop(): Promise<void>;
     private end;
 }
+/** The warning for a file that isn't saved, as the toolbar and the CLI show it */
+export declare function missingFileText(file: MissingFile, folder: string): string;

package/dist/recorder/recorder.js

@@ -1,12 +1,18 @@
 import { randomUUID } from "node:crypto";
+import { mkdtemp, open, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
 import logger from "../logger/index.js";
 import { addPreload, runInLoadedContexts } from "../script/preload.js";
 import { callFunction } from "../script/call-function.js";
 import { ChannelArg, fromRemoteValue } from "../script/serialize.js";
 import { ElementHandle } from "../script/element-handle.js";
 import { locatorFromSpec } from "../steps/build.js";
-import { addVariable, setSecret } from "../project/index.js";
+import { addVariable, cleanFileName, filesFolder, RECORD_LIMIT, setSecret, storeFile, } from "../project/index.js";
+import { humanSize } from "../steps/files.js";
 import { CAPTURE_MUTE, CAPTURE_OFF, CAPTURE_SOURCE, CAPTURE_UNMUTE, } from "./capture.js";
+import { FILES_SANDBOX, filesCaptureSource } from "./files-capture.js";
+import { disposeFilesCapture, readPageFile, releasePageFile, } from "./files-reader.js";
 import { Normaliser, } from "./normalise.js";
 import { rankLocator } from "./ranking.js";
 import { ToolbarController, } from "./toolbar/controller.js";
@@ -36,6 +42,13 @@ export class Recorder {
         this.queue = { tail: Promise.resolve() };
         this.known = new Map();
         this.stopped = false;
+        /** Set when stopping begins: files messages after it are not taken */
+        this.ending = false;
+        /** The files capture script's channel, handed only to its sandbox */
+        this.filesChannel = `samurai-files-${randomUUID()}`;
+        this.filesRealms = new Set();
+        this.stored = new Set();
+        this.missing = [];
         /** The context's `samurai-toolbar` sandbox realms, as last listed: the only realms toolbar messages are taken from */
         this.toolbarRealms = new Set();
         /** Toolbar messages waiting for a realm lookup, and those that arrived behind them (kept in order) */
@@ -56,6 +69,23 @@ export class Recorder {
                     this.enqueue(async () => this.handle(message));
                 return;
             }
+            if (params.channel === this.filesChannel) {
+                if (this.ending)
+                    return;
+                const realm = params.source.realm ?? "";
+                const data = params.data;
+                // In order with the page's messages: a picker follows the click that opened it
+                this.enqueue(async () => {
+                    if (!this.filesRealms.has(realm))
+                        await this.listFilesRealms();
+                    if (!this.filesRealms.has(realm)) {
+                        logger.warn("Recorder ignored a files message from outside the files sandbox");
+                        return;
+                    }
+                    await this.fromFiles(fromRemoteValue(data));
+                });
+                return;
+            }
             if (params.channel !== this.toolbarChannel || !this.controller)
                 return;
             const realm = params.source.realm ?? "";
@@ -96,6 +126,14 @@ export class Recorder {
             });
         };
     }
+    /** Files stored or reused in the files folder by this recording, project-relative */
+    get storedFiles() {
+        return [...this.stored];
+    }
+    /** Files whose steps point at a path that wasn't written */
+    get missingFiles() {
+        return [...this.missing];
+    }
     static async start(target, options) {
         const at = options.at ?? 0;
         const normaliser = new Normaliser({
@@ -108,6 +146,15 @@ export class Recorder {
         await recorder.begin(options.initialGoto ?? true);
         return recorder;
     }
+    async listFilesRealms() {
+        const { realms } = await this.connector.send("script.getRealms", {
+            context: this.context,
+            type: "window",
+        });
+        this.filesRealms = new Set(realms
+            .filter((info) => info.type === "window" && info.sandbox === FILES_SANDBOX)
+            .map((info) => info.realm));
+    }
     async listToolbarRealms() {
         const { realms } = await this.connector.send("script.getRealms", {
             context: this.context,
@@ -157,6 +204,17 @@ export class Recorder {
                 arguments: [new ChannelArg(this.channel)],
                 onRunError: "log",
             });
+            if (this.options.files) {
+                this.filesPreload = await addPreload(this.connector, {
+                    source: filesCaptureSource({
+                        trustSynthetic: this.options.files.trustSynthetic === true,
+                    }),
+                    sandbox: FILES_SANDBOX,
+                    contexts: [this.context],
+                    arguments: [new ChannelArg(this.filesChannel)],
+                    onRunError: "log",
+                });
+            }
             if (this.controller) {
                 this.toolbarPreload = await addPreload(this.connector, {
                     source: TOOLBAR_SOURCE,
@@ -225,6 +283,8 @@ export class Recorder {
             this.options.onEvent(event);
             if (event.op === "insert")
                 this.controller?.stepAdded(event.step);
+            else if (event.op === "remove")
+                this.controller?.stepRemoved();
         }
     }
     async locatorFor(message) {
@@ -269,6 +329,93 @@ export class Recorder {
                     };
         this.emit(this.normaliser.observe(observation, Date.now()));
     }
+    async fromFiles(message) {
+        const now = Date.now();
+        if (message.type !== "files") {
+            if (!this.controller?.paused)
+                this.emit(this.normaliser.observe(message, now));
+            return;
+        }
+        const release = (from) => Promise.allSettled(message.files
+            .slice(from)
+            .map((file) => releasePageFile(this.connector, this.context, file.id)));
+        if (this.controller?.paused)
+            return void (await release(0));
+        // storePageFile releases its own file; whatever it never reached is released here, on any exit
+        let started = 0;
+        try {
+            const locator = await this.locatorFor(message);
+            if (!locator) {
+                logger.warn("Recorder found no locator that matches only the element the files were %s; the upload was skipped", message.via === "drop" ? "dropped on" : "set on");
+                return;
+            }
+            const files = [];
+            for (const file of message.files) {
+                started++;
+                files.push({ path: await this.storePageFile(file) });
+            }
+            this.emit(this.normaliser.observe({ type: "files", via: message.via, locator, files }, now));
+        }
+        finally {
+            await release(started);
+        }
+    }
+    /** Saves one kept file to the files folder; returns the path its step gets */
+    async storePageFile(file) {
+        const recording = this.options.files;
+        const folder = filesFolder(recording.projectDir, recording.filesDir);
+        const notSaved = (reason) => {
+            const missing = {
+                path: folder.relative
+                    ? `${folder.relative}/${cleanFileName(file.name)}`
+                    : cleanFileName(file.name),
+                name: file.name,
+                size: file.size,
+                reason,
+            };
+            this.missing.push(missing);
+            recording.onMissing?.(missing);
+            this.controller?.warn(missingFileText(missing, folder.relative));
+            return missing.path;
+        };
+        if (file.size > RECORD_LIMIT) {
+            await releasePageFile(this.connector, this.context, file.id).catch(() => undefined);
+            return notSaved("too-big");
+        }
+        this.controller?.saving(file.name);
+        let temp;
+        try {
+            temp = await mkdtemp(path.join(tmpdir(), "samurai-upload-"));
+            const content = path.join(temp, "content");
+            const out = await open(content, "w");
+            try {
+                await readPageFile(this.connector, this.context, file.id, file.size, (bytes) => out.write(bytes));
+            }
+            finally {
+                await out.close();
+            }
+            const stored = await storeFile({
+                projectDir: recording.projectDir,
+                ...(recording.filesDir !== undefined && {
+                    filesDir: recording.filesDir,
+                }),
+                name: file.name,
+                content,
+            });
+            this.stored.add(stored.path);
+            return stored.path;
+        }
+        catch (err) {
+            logger.warn("Recorder could not save %s", file.name, { err });
+            return notSaved("unreadable");
+        }
+        finally {
+            this.controller?.saving(undefined);
+            if (temp)
+                await rm(temp, { recursive: true, force: true }).catch(() => undefined);
+            await releasePageFile(this.connector, this.context, file.id).catch(() => undefined);
+        }
+    }
     async release() {
         this.connector.offEvent("script.message", this.onMessage);
         this.connector.offEvent("browsingContext.navigationStarted", this.onNavigation);
@@ -277,6 +424,7 @@ export class Recorder {
             this.subscription?.unsubscribe(),
             this.preload?.dispose(),
             this.toolbarPreload?.dispose(),
+            this.filesPreload?.dispose(),
         ]);
     }
     /**
@@ -305,6 +453,7 @@ export class Recorder {
     async end() {
         if (this.stopped)
             return;
+        this.ending = true;
         this.controller?.dispose();
         await runInLoadedContexts(this.connector, {
             source: CAPTURE_OFF,
@@ -324,7 +473,17 @@ export class Recorder {
             }).catch(() => undefined);
         }
         await this.queue.tail;
+        // Only now: started and queued transfers need the kept Files
+        if (this.filesPreload)
+            await disposeFilesCapture(this.connector, this.context).catch(() => undefined);
         this.stopped = true;
         await this.release();
     }
 }
+/** The warning for a file that isn't saved, as the toolbar and the CLI show it */
+export function missingFileText(file, folder) {
+    const where = folder === "" ? "the project folder" : `${folder}/`;
+    return file.reason === "too-big"
+        ? `${file.name} is ${humanSize(file.size)}. Files over 50 MB aren't saved: add it to ${where} yourself, or use a generated file.`
+        : `${file.name} couldn't be read, so it isn't saved: add it to ${where} yourself, or use a generated file.`;
+}

package/dist/recorder/session.d.ts

@@ -5,6 +5,7 @@ import { type ProjectOptions } from "../runner/project.js";
 import type { SamuraiTestConfig } from "../types/config.js";
 import type { ControllerOptions } from "./toolbar/controller.js";
 import type { RecorderEvent } from "./normalise.js";
+import { type MissingFile } from "./recorder.js";
 export interface RecordSpecOptions extends ProjectOptions {
     /** The spec file, absolute or relative to the project folder. Created when `create` is given and it doesn't exist */
     file: string;
@@ -35,6 +36,8 @@ export interface RecordSpecOptions extends ProjectOptions {
         state: "recording" | "paused";
         toolbar: boolean;
     }) => void;
+    /** A picked or dropped file wasn't saved (over 50 MB, or unreadable); `text` is the warning to show */
+    onMissingFile?: (file: MissingFile, text: string) => void;
     /** Called once the browser is open and recording */
     onStarted?: (context: {
         page: Page;
@@ -50,11 +53,21 @@ export interface RecordResult {
     secrets: string[];
     /** Those of `secrets` that have no value in the recording's environment yet, read when the recording ended */
     unsetSecrets: string[];
+    /** Files stored in (or reused from) the files folder, project-relative */
+    files: string[];
+    /** Files the steps point at that weren't saved: they must be added before the test can run */
+    missingFiles: MissingFile[];
+    /** The files folder is git-ignored: CI won't have the files */
+    filesIgnored: boolean;
+    /** The files folder, relative to the project with forward slashes ("" for the project root) */
+    filesFolder: string;
+    /** The files folder was created by this recording */
+    firstFiles: boolean;
 }
 /** What the toolbar shows of the project: its environment, variables, secrets and the test's screenshots */
 export declare function toolbarOptions(run: Pick<PreparedRun, "settings" | "secrets">, source: string, dir: string, config: Pick<SamuraiTestConfig, "environments">, testIndex: number): Promise<ControllerOptions>;
 /** The secrets a recording needs set: those its steps read, then those added from the panel, once each */
-export declare function resultSecrets(events: readonly Pick<RecorderEvent, "step">[], added: Iterable<string>): string[];
+export declare function resultSecrets(events: readonly RecorderEvent[], added: Iterable<string>): string[];
 /** The index of the test `selector` names (see `RecordSpecOptions.test`) */
 export declare function pickTest(tests: readonly {
     name: string;

package/dist/recorder/session.js

@@ -2,12 +2,13 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import path from "node:path";
 import { Browser } from "../browser/browser.js";
 import { ensureWarm } from "../browser/warm-up.js";
-import { loadConfig, projectDir } from "../config/config.js";
+import { loadConfig, projectDir, readConfig } from "../config/config.js";
 import { loadSecrets } from "../config/secrets.js";
-import { isGitIgnored } from "../project/index.js";
+import { filesFolder, isFolderIgnored, isGitIgnored, } from "../project/index.js";
 import { withProject } from "../runner/project.js";
 import { parseSpec } from "../steps/parse.js";
 import { applyRecorderEvent } from "./apply.js";
+import { missingFileText, } from "./recorder.js";
 const NEW_SPEC_HEADER = `import { expect, test } from "@itmetsam/samurai-framework";\n\n`;
 function addTest(source, title) {
     const header = source.trim() === ""
@@ -49,8 +50,10 @@ export async function toolbarOptions(run, source, dir, config, testIndex) {
 export function resultSecrets(events, added) {
     return [
         ...new Set([
-            ...events.flatMap(({ step }) => step.kind === "fill" && step.value.kind === "secret"
-                ? [step.value.name]
+            ...events.flatMap((event) => event.op !== "remove" &&
+                event.step.kind === "fill" &&
+                event.step.value.kind === "secret"
+                ? [event.step.value.name]
                 : []),
             ...added,
         ]),
@@ -98,7 +101,8 @@ export async function recordSpec(options) {
             throw new Error(`${options.file} does not exist; give a title with --new to create it`);
         }
         // Before the spec is touched: a recording without its browser changes nothing
-        await ensureWarm("firefox", { port: options.port ?? 9223 }, options.signal);
+        const browserName = (await readConfig("browser")) ?? "firefox";
+        await ensureWarm(browserName, { port: options.port ?? 9223 }, options.signal);
         options.signal?.throwIfAborted();
         source ??= "";
         if (options.create !== undefined &&
@@ -114,10 +118,14 @@ export async function recordSpec(options) {
         if (!Number.isInteger(at) || at < 0 || at > test.steps.length) {
             throw new RangeError(`--at must be between 0 and ${test.steps.length} (the test has ${test.steps.length} steps)`);
         }
-        const { browser, page } = await Browser.launch("firefox", {
+        const { browser, page } = await Browser.launch(browserName, {
             port: options.port ?? 9223,
             headless: options.headless ?? settings.headless,
         }, options.signal);
+        const loaded = await loadConfig();
+        const folder = filesFolder(projectDir(), loaded.filesDir);
+        const hadFolder = existsSync(folder.absolute);
+        let recorder;
         const events = [];
         const addedSecrets = new Set();
         let stopRequested;
@@ -128,17 +136,22 @@ export async function recordSpec(options) {
                 await page.goto(options.url);
             else if (settings.baseURL !== undefined)
                 await page.navigateTo(settings.baseURL);
-            const recorder = await page.record({
+            recorder = await page.record({
                 at,
                 initialGoto: at === 0 && start !== undefined,
                 ...(settings.baseURL !== undefined && { baseURL: settings.baseURL }),
                 toolbar: {
-                    ...(await toolbarOptions(run, source, projectDir(), await loadConfig(), testIndex)),
+                    ...(await toolbarOptions(run, source, projectDir(), loaded, testIndex)),
                     projectDir: projectDir(),
                     ...(options.onStatus && { onStatus: options.onStatus }),
                     onSecretAdded: (name) => addedSecrets.add(name),
                     onStop: () => stopRequested(),
                 },
+                files: {
+                    projectDir: projectDir(),
+                    ...(loaded.filesDir !== undefined && { filesDir: loaded.filesDir }),
+                    onMissing: (file) => options.onMissingFile?.(file, missingFileText(file, folder.relative)),
+                },
                 onEvent: (event) => {
                     source = applyRecorderEvent(source, testIndex, event);
                     writeFileSync(file, source);
@@ -169,6 +182,20 @@ export async function recordSpec(options) {
         // Read again: the toolbar may have written new ones to the .env file
         const set = loadSecrets(settings.environment);
         const unsetSecrets = secrets.filter((name) => !set.has(name));
-        return { file, test: test.name, events, secrets, unsetSecrets };
+        const files = recorder?.storedFiles ?? [];
+        const missingFiles = recorder?.missingFiles ?? [];
+        return {
+            file,
+            test: test.name,
+            events,
+            secrets,
+            unsetSecrets,
+            files,
+            missingFiles,
+            filesFolder: folder.relative,
+            filesIgnored: files.length + missingFiles.length > 0 &&
+                (await isFolderIgnored(projectDir(), folder.relative)),
+            firstFiles: !hadFolder && files.length > 0,
+        };
     });
 }

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

@@ -46,11 +46,6 @@ export interface ControllerOptions {
 type Message = ToolbarMessage & {
     target?: ElementHandle;
 };
-/**
- * The recorder's side of the toolbar: owns its state (pause, the rail, the environment's variables and
- * secrets) and turns its messages into observations. Secret values stay here; the page only ever gets
- * their names and whether they are set.
- */
 export declare class ToolbarController {
     private readonly deps;
     private readonly options;
@@ -66,6 +61,9 @@ export declare class ToolbarController {
     private question;
     private toast;
     private toastId;
+    private savingName;
+    private warnings;
+    private warningId;
     /** The picked element an `assert` with the same id refers to */
     private pick;
     /** Ids of `assert`, `insert` and `add-insertable` being processed */
@@ -76,6 +74,8 @@ export declare class ToolbarController {
     private readonly done;
     /** Bumped on every page load: work started for an older page is not answered */
     private page;
+    /** Wake-ups for the work that is waiting on the current page: called, and forgotten, when the page changes */
+    private pageGone;
     private toolbar;
     /** A `ready` arrived since the last load: it counts for the next one */
     private readySinceLoad;
@@ -88,6 +88,10 @@ export declare class ToolbarController {
     private reply;
     private reportStatus;
     private setToolbar;
+    /** A picked or dropped file is being saved; undefined when done */
+    saving(name: string | undefined): void;
+    /** Shows a warning that stays until the tester dismisses it */
+    warn(text: string): void;
     private showToast;
     handle(message: Message): Promise<void>;
     /** A top-level document finished loading: push state; start the 2 s ready watchdog */
@@ -97,8 +101,14 @@ export declare class ToolbarController {
      * and doesn't count for the coming load
      */
     navigating(): void;
+    /** Lets what waits on the current document stop waiting: its commands may never be answered once it is gone */
+    private leavePage;
+    /** Runs `work`, but stops waiting for it when the page is left; resolves `gone` then */
+    private whileOnPage;
     /** A step was emitted (any source): count it */
     stepAdded(step: Step): void;
+    /** A recorded step was taken out again (a cancelled file picker's click) */
+    stepRemoved(): void;
     /** The recording ended: no more pushes, replies or status */
     dispose(): void;
     /**

package/dist/recorder/toolbar/controller.js

@@ -22,6 +22,8 @@ const fail = (error, field) => ({
  * secrets) and turns its messages into observations. Secret values stay here; the page only ever gets
  * their names and whether they are set.
  */
+/** What a wait on the page ends with when the page was left first */
+const LEFT = Symbol("left the page");
 export class ToolbarController {
     constructor(deps, options) {
         this.deps = deps;
@@ -31,6 +33,8 @@ export class ToolbarController {
         this.position = null;
         this.steps = 0;
         this.toastId = 0;
+        this.warnings = [];
+        this.warningId = 0;
         /** Ids of `assert`, `insert` and `add-insertable` being processed */
         this.inFlight = new Set();
         /** Ids `accept` let through whose `handle` hasn't started yet */
@@ -39,6 +43,8 @@ export class ToolbarController {
         this.done = new Set();
         /** Bumped on every page load: work started for an older page is not answered */
         this.page = 0;
+        /** Wake-ups for the work that is waiting on the current page: called, and forgotten, when the page changes */
+        this.pageGone = new Set();
         this.toolbar = true;
         /** A `ready` arrived since the last load: it counts for the next one */
         this.readySinceLoad = false;
@@ -70,6 +76,8 @@ export class ToolbarController {
             resumeQuestion: this.question !== undefined,
             nextScreenshot: `screenshot-${this.screenshots + 1}`,
             ...(this.toast && { toast: this.toast }),
+            ...(this.savingName !== undefined && { saving: this.savingName }),
+            warnings: this.warnings.map((w) => ({ ...w })),
         };
     }
     push() {
@@ -90,6 +98,16 @@ export class ToolbarController {
         this.toolbar = loaded;
         this.reportStatus();
     }
+    /** A picked or dropped file is being saved; undefined when done */
+    saving(name) {
+        this.savingName = name;
+        this.push();
+    }
+    /** Shows a warning that stays until the tester dismisses it */
+    warn(text) {
+        this.warnings.push({ id: ++this.warningId, text });
+        this.push();
+    }
     showToast(text) {
         this.toast = { id: ++this.toastId, text };
     }
@@ -116,6 +134,9 @@ export class ToolbarController {
                 this.collapsed = message.collapsed === true;
                 this.pick = undefined;
                 return this.push();
+            case "dismiss":
+                this.warnings = this.warnings.filter((w) => w.id !== message.id);
+                return this.push();
             case "pick":
                 return this.picked(message);
             case "assert":
@@ -156,6 +177,7 @@ export class ToolbarController {
         if (this.disposed)
             return;
         this.page++;
+        this.leavePage();
         this.pick = undefined;
         this.toast = undefined;
         this.push();
@@ -180,6 +202,28 @@ export class ToolbarController {
      */
     navigating() {
         this.readySinceLoad = false;
+        this.leavePage();
+    }
+    /** Lets what waits on the current document stop waiting: its commands may never be answered once it is gone */
+    leavePage() {
+        const waiting = [...this.pageGone];
+        this.pageGone.clear();
+        for (const wake of waiting)
+            wake();
+    }
+    /** Runs `work`, but stops waiting for it when the page is left; resolves `gone` then */
+    async whileOnPage(work, gone) {
+        let wake;
+        const left = new Promise((resolve) => {
+            wake = () => resolve(gone);
+            this.pageGone.add(wake);
+        });
+        try {
+            return await Promise.race([work(), left]);
+        }
+        finally {
+            this.pageGone.delete(wake);
+        }
     }
     /** A step was emitted (any source): count it */
     stepAdded(step) {
@@ -188,6 +232,11 @@ export class ToolbarController {
             this.screenshots++;
         this.push();
     }
+    /** A recorded step was taken out again (a cancelled file picker's click) */
+    stepRemoved() {
+        this.steps = Math.max(0, this.steps - 1);
+        this.push();
+    }
     /** The recording ended: no more pushes, replies or status */
     dispose() {
         this.disposed = true;
@@ -288,19 +337,24 @@ export class ToolbarController {
             return this.reply(message.id, fail(PAUSED));
         let found;
         try {
-            const locator = message.target &&
-                (await this.deps.rank(message.target, message.candidates));
-            if (locator) {
-                found = await this.deps.inspect(message.target, locator, message.candidates);
+            // Chrome never answers a command into a document that is being replaced, so a pick of the old page must not
+            // keep the messages behind it waiting
+            found = await this.whileOnPage(async () => {
+                const locator = message.target &&
+                    (await this.deps.rank(message.target, message.candidates));
+                if (!locator)
+                    return undefined;
+                const inspected = await this.deps.inspect(message.target, locator, message.candidates);
                 if (page === this.page)
-                    this.pick = { id: message.id, locator, counts: found.counts };
-            }
+                    this.pick = { id: message.id, locator, counts: inspected.counts };
+                return inspected;
+            }, LEFT);
         }
         catch {
             found = undefined; // the element went away while it was inspected
         }
         // The page that asked is gone: its successor's toolbar isn't waiting for this
-        if (page !== this.page)
+        if (found === LEFT || page !== this.page)
             return;
         this.reply(message.id, found ? this.withoutSecrets(found.info) : fail(UNIDENTIFIABLE));
     }