@itmetsam/samurai-framework 0.7.1 → 0.9.0

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

@@ -36,6 +36,13 @@ export interface ToolbarState {
         id: number;
         text: string;
     };
+    /** The name of the file being saved to the project, while a transfer runs */
+    saving?: string;
+    /** Shown until the tester dismisses each (a file that wasn't saved) */
+    warnings: {
+        id: number;
+        text: string;
+    }[];
 }
 /** Element-carrying messages send the element itself (it arrives as a handle) and its candidates */
 export type ToolbarMessage = {
@@ -61,6 +68,9 @@ export type ToolbarMessage = {
 } | {
     action: "collapse";
     collapsed: boolean;
+} | {
+    action: "dismiss";
+    id: number;
 } | {
     action: "pick";
     id: number;

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

@@ -18,7 +18,7 @@
  *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
- *   `wait-add`, `screenshot-add`; `escape` (the Esc key).
+ *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
  *   Form inputs carry `data-field` (`expected`, `attribute`, `countIndex`, `filter`, `name`, `value`,
  *   `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and

package/dist/recorder/toolbar/source.js

@@ -21,7 +21,7 @@ import { TOOLBAR_CSS } from "./styles.js";
  *   `matcher { matcher }`, `not`, `assert-add` (Assert panel);
  *   `insert-item { kind, name }`, `insert-first`, `insert-new { kind }` (Insert list);
  *   `new-kind { kind }`, `new-save`, `new-cancel` (New variable or secret);
- *   `wait-add`, `screenshot-add`; `escape` (the Esc key).
+ *   `wait-add`, `screenshot-add`; `escape` (the Esc key); `dismiss { id }` (a warning's Dismiss button).
  *   Form inputs carry `data-field` (`expected`, `attribute`, `countIndex`, `filter`, `name`, `value`,
  *   `waitKind`, `seconds`, `shotName`, `fullPage`) and update on `input`/`change`.
  * - `rebind(send)`: used by a second run in the same document (a new recording), which keeps the host and
@@ -46,6 +46,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   const DEFAULTS = {
     status: "recording", collapsed: false, position: null, steps: 0, environment: "", canAddVariables: false,
     variables: [], secrets: [], secretsIgnored: true, resumeQuestion: false, nextScreenshot: "screenshot-1",
+    warnings: [],
   };
   const MATCHERS = [
     ["toBeVisible", "Visible"], ["toHaveText", "Has text"], ["toContainText", "Contains text"],
@@ -109,6 +110,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   const container = h("div", { class: "ui" });
   const outline = h("div", { class: "outline", hidden: true });
   const toast = h("div", { class: "toast ui", hidden: true });
+  const notices = h("div", { class: "notices ui" });
   let adopted = false;
   try {
     const sheet = new CSSStyleSheet();
@@ -119,7 +121,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
     adopted = false;
   }
   // Without constructed sheets: a <style> element, which a strict CSP blocks
-  root.append(...(adopted ? [] : [h("style", null, CSS)]), frame, outline, container, toast);
+  root.append(...(adopted ? [] : [h("style", null, CSS)]), frame, outline, container, toast, notices);
 
   const viewport = () => ({ w: frame.clientWidth || innerWidth, h: frame.clientHeight || innerHeight });
 
@@ -366,6 +368,34 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
   ];
   const PANELS = { assert: assertPanel, insert: insertPanel, new: newPanel, wait: waitPanel, screenshot: screenshotPanel };
 
+  // Notice nodes live as long as their warning: rebuilding them would make screen readers announce each alert again
+  const noticeNodes = new Map();
+  let savingNode = null;
+  let savingText = null;
+  const renderNotices = () => {
+    const ids = new Set(state.warnings.map((w) => w.id));
+    for (const [id, node] of noticeNodes) {
+      if (ids.has(id)) continue;
+      node.remove();
+      noticeNodes.delete(id);
+    }
+    for (const w of state.warnings) {
+      if (noticeNodes.has(w.id)) continue;
+      const node = h("div", { class: "notice warning", "data-warning": String(w.id), role: "alert" },
+        h("span", null, w.text),
+        h("button", { class: "dismiss", "data-action": "dismiss", "data-id": String(w.id) }, "Dismiss"));
+      noticeNodes.set(w.id, node);
+      // Before the saving line, which stays last
+      notices.insertBefore(node, savingNode);
+    }
+    const saving = state.saving || null;
+    if (saving !== savingText) {
+      savingText = saving;
+      if (savingNode) savingNode.remove();
+      savingNode = saving ? h("div", { class: "notice saving" }, "Saving " + saving + "…") : null;
+      if (savingNode) notices.append(savingNode);
+    }
+  };
   const render = () => {
     const active = root.activeElement;
     const kept = active && active.type !== "radio" ? active.getAttribute("data-field") : null;
@@ -373,6 +403,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
     try { selection = kept ? [active.selectionStart, active.selectionEnd] : null; } catch (err) { selection = null; }
     const panel = ui.panel && !state.collapsed ? h("div", { class: ui.panel === "new" || ui.panel === "insert" ? "panel wide" : "panel" }, PANELS[ui.panel]()) : null;
     container.replaceChildren(state.collapsed ? chipView() : railView(), ...(panel ? [panel] : []));
+    renderNotices();
     placeAll();
     const focus = ui.focus || kept;
     ui.focus = null;
@@ -457,6 +488,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
 
   // Every action is what a click on its control does; press() runs the same functions
   const handlers = {
+    dismiss: (d) => post({ action: "dismiss", id: Number(d.id) }),
     pause: () => { if (!paused()) post({ action: "pause" }); },
     resume: () => { if (paused()) post({ action: "resume" }); },
     stop: () => {
@@ -670,6 +702,7 @@ export const TOOLBAR_SOURCE = String.raw `(send) => {
       kind: control.getAttribute("data-kind"),
       name: control.getAttribute("data-name"),
       matcher: control.getAttribute("data-matcher"),
+      id: control.getAttribute("data-id"),
     });
   });
   root.addEventListener("pointerdown", (event) => {

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

@@ -3,4 +3,4 @@
  * outline and the toast, as in the approved mockups. Everything inside is `position: fixed` against the
  * viewport; the host itself takes no space.
  */
-export declare const TOOLBAR_CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.ui { font: 12px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif; color: #222; color-scheme: light; }\nbutton, input, select { font: inherit; color: inherit; margin: 0; }\nbutton { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }\nbutton:disabled { cursor: default; }\ncode { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.rail, .chip { position: fixed; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.28); background: #17181c; color: #e9eaee; user-select: none; }\n.rail { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 5px; width: 112px; }\n.rail.wide { width: 150px; }\n.top { display: flex; align-items: center; justify-content: space-between; color: #6b6e78; padding: 0 2px 2px; }\n[data-grip] { cursor: grab; flex: 1; touch-action: none; }\n[data-grip]:active { cursor: grabbing; }\n.chev { color: #6b6e78; padding: 0 3px; border-radius: 4px; }\n.chev:hover { color: #e9eaee; }\n.st { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-weight: 600; }\n.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,.25); flex: none; }\n.dot.pause { background: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.25); }\n.b { padding: 5px 7px; border-radius: 6px; display: flex; align-items: center; gap: 6px; width: 100%; }\n.b:hover:not(:disabled) { background: #2a2c33; }\n.b.on, .b.on:hover:not(:disabled) { background: #2f6fed; color: #fff; }\n.b:disabled { opacity: .38; }\n.sep { height: 1px; background: #34363d; margin: 2px 3px; }\n.stop { color: #ff8a8c; }\n.ico { width: 14px; text-align: center; flex: none; }\n.note { font-size: 10.5px; color: #c9cbd2; padding: 4px 6px 2px; line-height: 1.35; }\n.ask { display: flex; gap: 4px; padding: 2px 6px 4px; }\n.ask button { flex: 1; text-align: center; border-radius: 5px; padding: 3px 0; background: #2a2c33; }\n.ask button.yes { background: #2f6fed; color: #fff; font-weight: 600; }\n\n.chip { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 10px 6px 8px; font-weight: 600; }\n.chip [data-grip] { color: #6b6e78; flex: none; }\n.chip .chev { color: #9a9ca5; }\n\n.panel { position: fixed; z-index: 2; width: 230px; max-height: calc(100vh - 16px); overflow: auto; background: #fff; border: 1px solid #d9dce1; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); color: #222; }\n.panel.wide { width: 236px; }\n.h { padding: 8px 10px; border-bottom: 1px solid #eceef1; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }\n.h.stack { display: block; }\n.h code { font-size: 11px; color: #555; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.h small { display: block; font-weight: 400; color: #777; margin-top: 2px; }\n.msg { padding: 10px; color: #555; }\n.err { padding: 6px 10px; color: #c22b2e; }\n.opts { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.o { border: 1px solid #e3e5e8; border-radius: 6px; padding: 5px 6px; }\n.o:hover:not(:disabled) { border-color: #b9c6e4; }\n.o.sel { border-color: #2f6fed; background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.o:disabled { opacity: .45; }\n.val { margin: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }\n.in { width: 100%; border: 1px solid #cfd3d8; border-radius: 4px; padding: 5px 6px; background: #fff; outline: none; }\n.in:focus { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }\n.in.code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n.row { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; }\n.neg { color: #555; display: flex; align-items: center; gap: 4px; }\n.add { background: #2f6fed; color: #fff; border-radius: 6px; padding: 5px 12px; font-weight: 600; text-align: center; }\n.add:disabled { opacity: .5; }\n.cancel { padding: 5px 10px; color: #555; }\n.foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid #eceef1; }\n.foot.plain { border-top: 0; padding-top: 10px; }\n\n.search { display: block; margin: 6px 8px; width: calc(100% - 16px); }\n.grp { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 6px 10px 2px; }\n.it { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; width: 100%; }\n.it:hover, .it.sel { background: #eef3fe; }\n.it .v { color: #777; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.warn { color: #b26a00; }\n.empty { padding: 4px 10px; color: #777; }\n.act { padding: 6px 10px; color: #1d4fc4; font-weight: 600; width: 100%; }\n.act:hover { background: #eef3fe; }\n\n.seg { display: flex; margin: 8px 10px 0; border: 1px solid #cfd3d8; border-radius: 6px; overflow: hidden; }\n.seg button { flex: 1; text-align: center; padding: 4px; }\n.seg .sel { background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.lbl { font-size: 11px; color: #666; padding: 6px 10px 2px; }\n.f { padding: 0 10px; }\n.field-error { color: #c22b2e; font-size: 11px; padding: 3px 10px 0; }\n.hint { padding: 6px 10px 0; color: #666; font-size: 11px; line-height: 1.35; }\n.hint code { font-size: 10.5px; }\n\n.radio { padding: 6px 10px; display: flex; gap: 7px; align-items: center; }\n.radio input[type=radio] { accent-color: #2f6fed; margin: 0; }\n.sub { color: #777; font-size: 11px; padding: 0 10px 2px 30px; margin-top: -4px; }\n.num { width: 52px; border: 1px solid #cfd3d8; border-radius: 4px; padding: 3px 5px; }\n\n.outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }\n.toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }\n.toast.gone { opacity: 0; }\n.frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }\n";
+export declare const TOOLBAR_CSS = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.ui { font: 12px/1.3 system-ui, -apple-system, \"Segoe UI\", sans-serif; color: #222; color-scheme: light; }\nbutton, input, select { font: inherit; color: inherit; margin: 0; }\nbutton { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }\nbutton:disabled { cursor: default; }\ncode { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n\n.rail, .chip { position: fixed; z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.28); background: #17181c; color: #e9eaee; user-select: none; }\n.rail { display: flex; flex-direction: column; gap: 2px; border-radius: 10px; padding: 5px; width: 112px; }\n.rail.wide { width: 150px; }\n.top { display: flex; align-items: center; justify-content: space-between; color: #6b6e78; padding: 0 2px 2px; }\n[data-grip] { cursor: grab; flex: 1; touch-action: none; }\n[data-grip]:active { cursor: grabbing; }\n.chev { color: #6b6e78; padding: 0 3px; border-radius: 4px; }\n.chev:hover { color: #e9eaee; }\n.st { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-weight: 600; }\n.dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 3px rgba(255,77,79,.25); flex: none; }\n.dot.pause { background: #f5b301; box-shadow: 0 0 0 3px rgba(245,179,1,.25); }\n.b { padding: 5px 7px; border-radius: 6px; display: flex; align-items: center; gap: 6px; width: 100%; }\n.b:hover:not(:disabled) { background: #2a2c33; }\n.b.on, .b.on:hover:not(:disabled) { background: #2f6fed; color: #fff; }\n.b:disabled { opacity: .38; }\n.sep { height: 1px; background: #34363d; margin: 2px 3px; }\n.stop { color: #ff8a8c; }\n.ico { width: 14px; text-align: center; flex: none; }\n.note { font-size: 10.5px; color: #c9cbd2; padding: 4px 6px 2px; line-height: 1.35; }\n.ask { display: flex; gap: 4px; padding: 2px 6px 4px; }\n.ask button { flex: 1; text-align: center; border-radius: 5px; padding: 3px 0; background: #2a2c33; }\n.ask button.yes { background: #2f6fed; color: #fff; font-weight: 600; }\n\n.chip { display: flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 10px 6px 8px; font-weight: 600; }\n.chip [data-grip] { color: #6b6e78; flex: none; }\n.chip .chev { color: #9a9ca5; }\n\n.panel { position: fixed; z-index: 2; width: 230px; max-height: calc(100vh - 16px); overflow: auto; background: #fff; border: 1px solid #d9dce1; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); color: #222; }\n.panel.wide { width: 236px; }\n.h { padding: 8px 10px; border-bottom: 1px solid #eceef1; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }\n.h.stack { display: block; }\n.h code { font-size: 11px; color: #555; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.h small { display: block; font-weight: 400; color: #777; margin-top: 2px; }\n.msg { padding: 10px; color: #555; }\n.err { padding: 6px 10px; color: #c22b2e; }\n.opts { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }\n.o { border: 1px solid #e3e5e8; border-radius: 6px; padding: 5px 6px; }\n.o:hover:not(:disabled) { border-color: #b9c6e4; }\n.o.sel { border-color: #2f6fed; background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.o:disabled { opacity: .45; }\n.val { margin: 2px 8px 8px; display: flex; flex-direction: column; gap: 4px; }\n.in { width: 100%; border: 1px solid #cfd3d8; border-radius: 4px; padding: 5px 6px; background: #fff; outline: none; }\n.in:focus { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47,111,237,.15); }\n.in.code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }\n.row { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 8px; }\n.neg { color: #555; display: flex; align-items: center; gap: 4px; }\n.add { background: #2f6fed; color: #fff; border-radius: 6px; padding: 5px 12px; font-weight: 600; text-align: center; }\n.add:disabled { opacity: .5; }\n.cancel { padding: 5px 10px; color: #555; }\n.foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid #eceef1; }\n.foot.plain { border-top: 0; padding-top: 10px; }\n\n.search { display: block; margin: 6px 8px; width: calc(100% - 16px); }\n.grp { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 6px 10px 2px; }\n.it { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; width: 100%; }\n.it:hover, .it.sel { background: #eef3fe; }\n.it .v { color: #777; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.warn { color: #b26a00; }\n.empty { padding: 4px 10px; color: #777; }\n.act { padding: 6px 10px; color: #1d4fc4; font-weight: 600; width: 100%; }\n.act:hover { background: #eef3fe; }\n\n.seg { display: flex; margin: 8px 10px 0; border: 1px solid #cfd3d8; border-radius: 6px; overflow: hidden; }\n.seg button { flex: 1; text-align: center; padding: 4px; }\n.seg .sel { background: #eef3fe; color: #1d4fc4; font-weight: 600; }\n.lbl { font-size: 11px; color: #666; padding: 6px 10px 2px; }\n.f { padding: 0 10px; }\n.field-error { color: #c22b2e; font-size: 11px; padding: 3px 10px 0; }\n.hint { padding: 6px 10px 0; color: #666; font-size: 11px; line-height: 1.35; }\n.hint code { font-size: 10.5px; }\n\n.radio { padding: 6px 10px; display: flex; gap: 7px; align-items: center; }\n.radio input[type=radio] { accent-color: #2f6fed; margin: 0; }\n.sub { color: #777; font-size: 11px; padding: 0 10px 2px 30px; margin-top: -4px; }\n.num { width: 52px; border: 1px solid #cfd3d8; border-radius: 4px; padding: 3px 5px; }\n\n.outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }\n.toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }\n.toast.gone { opacity: 0; }\n.notices {\n  position: fixed;\n  z-index: 4;\n  left: 50%;\n  bottom: 52px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: min(520px, calc(100vw - 32px));\n}\n.notice {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  background: #17181c;\n  color: #e9eaee;\n  border-radius: 8px;\n  padding: 8px 12px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);\n}\n.notice.warning {\n  background: #3b2a06;\n  color: #ffe7b0;\n  border: 1px solid #8a6514;\n}\n.notice .dismiss {\n  margin-left: auto;\n  text-decoration: underline;\n  white-space: nowrap;\n}\n.frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }\n";

package/dist/recorder/toolbar/styles.js

@@ -91,5 +91,36 @@ code { font: 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
 .outline { position: fixed; z-index: 1; pointer-events: none; outline: 2px solid #2f6fed; outline-offset: 2px; border-radius: 4px; background: rgba(47,111,237,.06); }
 .toast { position: fixed; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); background: #17181c; color: #e9eaee; border-radius: 8px; padding: 6px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; transition: opacity .3s; }
 .toast.gone { opacity: 0; }
+.notices {
+  position: fixed;
+  z-index: 4;
+  left: 50%;
+  bottom: 52px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: min(520px, calc(100vw - 32px));
+}
+.notice {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  background: #17181c;
+  color: #e9eaee;
+  border-radius: 8px;
+  padding: 8px 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
+}
+.notice.warning {
+  background: #3b2a06;
+  color: #ffe7b0;
+  border: 1px solid #8a6514;
+}
+.notice .dismiss {
+  margin-left: auto;
+  text-decoration: underline;
+  white-space: nowrap;
+}
 .frame { position: fixed; inset: 0; pointer-events: none; visibility: hidden; }
 `;

package/dist/runner/project.js

@@ -1,3 +1,4 @@
+import { removeGeneratedFiles } from "../browser/generated-files.js";
 import { loadConfig, projectDir, setActiveProject } from "../config/config.js";
 import { resetSecrets } from "../config/mask.js";
 import { setRunSettings } from "../config/run-settings.js";
@@ -27,6 +28,7 @@ export async function withProject(options, work) {
         return await work(run);
     }
     finally {
+        await removeGeneratedFiles().catch(() => undefined);
         setRunSettings(undefined);
         setActiveProject(undefined);
         active = false;

package/dist/script/preload.js

@@ -16,11 +16,24 @@ export async function addPreload(connector, options) {
             arguments: options.arguments.map((arg) => toLocalValue(arg)),
         }),
     });
+    let stopRerun;
+    if (needsRerun(connector, options)) {
+        try {
+            stopRerun = await rerunInNewRealms(connector, options);
+        }
+        catch (err) {
+            await connector
+                .send("script.removePreloadScript", { script })
+                .catch(() => undefined);
+            throw err;
+        }
+    }
     let removed = false;
     const dispose = async () => {
         if (removed)
             return;
         removed = true;
+        await stopRerun?.();
         try {
             await connector.send("script.removePreloadScript", { script });
         }
@@ -42,6 +55,58 @@ export async function addPreload(connector, options) {
     }
     return { id: script, dispose };
 }
+/**
+ * Chrome drops the messages of a channel that a preload script in a sandbox was given, while a channel handed to a
+ * call into the same sandbox works. So there the script is also run, with its channels, in every new sandbox realm.
+ */
+function needsRerun(connector, options) {
+    return (connector.browserName === "chrome" &&
+        options.sandbox !== undefined &&
+        (options.arguments?.length ?? 0) > 0);
+}
+async function rerunInNewRealms(connector, options) {
+    const { contexts, sandbox, source } = options;
+    const inScope = async (context) => {
+        if (!contexts)
+            return true;
+        if (contexts.includes(context))
+            return true;
+        const trees = await Promise.all(contexts.map((root) => connector.send("browsingContext.getTree", { root })));
+        return trees.some((tree) => tree.contexts.flatMap(flatten).includes(context));
+    };
+    const onRealm = (realm) => {
+        if (realm.type !== "window" || realm.sandbox !== sandbox || !realm.context)
+            return;
+        const context = realm.context;
+        void (async () => {
+            try {
+                if (!(await inScope(context)))
+                    return;
+                await callFunction(connector, context, source, options.arguments ?? [], {
+                    awaitPromise: false,
+                    ...(sandbox !== undefined && { sandbox }),
+                });
+            }
+            catch (err) {
+                // The document went away again, or the script threw: the registration covers what it can
+                logger.debug("Could not run a preload script in a new realm", { err });
+            }
+        })();
+    };
+    connector.onEvent("script.realmCreated", onRealm);
+    let subscription;
+    try {
+        subscription = await connector.subscribe(["script.realmCreated"]);
+    }
+    catch (err) {
+        connector.offEvent("script.realmCreated", onRealm);
+        throw err;
+    }
+    return async () => {
+        connector.offEvent("script.realmCreated", onRealm);
+        await subscription.unsubscribe().catch(() => undefined);
+    };
+}
 /** Runs `source` once in every loaded context (iframes included) under `contexts` */
 export async function runInLoadedContexts(connector, { source, contexts, sandbox, onRunError = "throw", arguments: args = [], }) {
     const trees = contexts

package/dist/steps/edit.js

@@ -1,3 +1,4 @@
+import ts from "typescript";
 import { stepToSource } from "./emit.js";
 import { parseSpec } from "./parse.js";
 const lineStart = (source, offset) => source.lastIndexOf("\n", offset - 1) + 1;
@@ -73,6 +74,32 @@ function withFixtures(source, parsed, step) {
             : `{ ${list} }`;
     return splice(source, fixtures.at, fixtures.at, text);
 }
+const usesGeneratedFile = (step) => (step.kind === "setInputFiles" || step.kind === "dropFiles") &&
+    step.files.some((file) => "generate" in file);
+const FRAMEWORK = "@itmetsam/samurai-framework";
+/** Adds `generatedFile` to the framework import (or a new one) unless the file already imports it under its own name */
+function withGeneratedFileImport(source) {
+    const file = ts.createSourceFile("spec.ts", source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    let frameworkImport;
+    for (const statement of file.statements) {
+        if (!ts.isImportDeclaration(statement))
+            continue;
+        if (!ts.isStringLiteral(statement.moduleSpecifier) ||
+            statement.moduleSpecifier.text !== FRAMEWORK)
+            continue;
+        const named = statement.importClause?.namedBindings;
+        if (!named || !ts.isNamedImports(named))
+            continue;
+        if (named.elements.some((e) => e.name.text === "generatedFile" &&
+            (!e.propertyName || e.propertyName.text === e.name.text)))
+            return source;
+        frameworkImport ??= named;
+    }
+    if (!frameworkImport || frameworkImport.elements.length === 0)
+        return `import { generatedFile } from "${FRAMEWORK}";\n${source}`;
+    const last = frameworkImport.elements[frameworkImport.elements.length - 1];
+    return splice(source, last.end, last.end, ", generatedFile");
+}
 /**
  * Applies one edit and returns the new source. Only the touched statement changes, plus the test's parameters
  * when the step reads a fixture (`env`, `secrets`) they don't have yet: everything else, formatting and
@@ -84,10 +111,18 @@ export function applyEdit(source, edit) {
         case "replace": {
             const { start, end } = pickStep(parsed, edit.index);
             // The parameters come before the body: adding to them leaves the step's offsets valid
-            return withFixtures(splice(source, start, end, stepToSource(edit.step)), parsed, edit.step);
+            const next = withFixtures(splice(source, start, end, stepToSource(edit.step)), parsed, edit.step);
+            // Last: the import shifts every offset
+            return usesGeneratedFile(edit.step)
+                ? withGeneratedFileImport(next)
+                : next;
+        }
+        case "insert": {
+            const next = withFixtures(insertCode(source, parsed, edit.index, stepToSource(edit.step)), parsed, edit.step);
+            return usesGeneratedFile(edit.step)
+                ? withGeneratedFileImport(next)
+                : next;
         }
-        case "insert":
-            return withFixtures(insertCode(source, parsed, edit.index, stepToSource(edit.step)), parsed, edit.step);
         case "remove":
             return removeStep(source, parsed, edit.index);
         case "move": {

package/dist/steps/emit.d.ts

@@ -1,4 +1,6 @@
-import type { LocatorCall, LocatorSpec, Step, TextValue } from "./model.js";
+import type { FileEntry, LocatorCall, LocatorSpec, Step, TextValue } from "./model.js";
+/** The argument of `setInputFiles` / `dropFiles`: one entry bare, else an array */
+export declare function filesToSource(files: readonly FileEntry[]): string;
 export declare function callToSource(call: LocatorCall): string;
 export declare function locatorToSource({ chain, fallbacks }: LocatorSpec): string;
 export declare function valueToSource(value: TextValue): string;

package/dist/steps/emit.js

@@ -1,4 +1,20 @@
+import { formatSize, sizeFromSource } from "./files.js";
 const str = (value) => JSON.stringify(value);
+function fileEntryToSource(entry) {
+    if ("path" in entry)
+        return str(entry.path);
+    const { name, size, type, sizeSource } = entry.generate;
+    const sizeText = sizeSource !== undefined && sizeFromSource(sizeSource) === size
+        ? sizeSource
+        : str(formatSize(size));
+    return `generatedFile({ name: ${str(name)}, size: ${sizeText}${type === undefined ? "" : `, type: ${str(type)}`} })`;
+}
+/** The argument of `setInputFiles` / `dropFiles`: one entry bare, else an array */
+export function filesToSource(files) {
+    return files.length === 1
+        ? fileEntryToSource(files[0])
+        : `[${files.map(fileEntryToSource).join(", ")}]`;
+}
 const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
 function textOptions(call) {
     const parts = [
@@ -73,6 +89,9 @@ export function stepToSource(step) {
             return `await page.waitForTimeout(${step.ms});`;
         case "screenshot":
             return `await page.screenshot({ name: ${str(step.name)}${step.fullPage ? ", fullPage: true" : ""} });`;
+        case "setInputFiles":
+        case "dropFiles":
+            return `await ${locatorToSource(step.locator)}.${step.kind}(${filesToSource(step.files)});`;
         case "custom":
             return step.code;
     }

package/dist/steps/files.d.ts

@@ -0,0 +1,8 @@
+/** Bytes for a size: a whole number of bytes, or a text like "60 MB", "1.5 GB", "512 KB" (powers of 1024) */
+export declare function parseSize(size: number | string): number | undefined;
+/** A size in the largest unit that gives a whole number: 62914560 → "60 MB", 1536 → "1536 B" */
+export declare function formatSize(bytes: number): string;
+/** A size for people: the largest unit it reaches, one decimal at most ("300 MB", "1.3 GB") */
+export declare function humanSize(bytes: number): string;
+/** The bytes a size's source text means: a number literal, or a quoted size text */
+export declare function sizeFromSource(text: string): number | undefined;

package/dist/steps/files.js

@@ -0,0 +1,33 @@
+const UNITS = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
+/** Bytes for a size: a whole number of bytes, or a text like "60 MB", "1.5 GB", "512 KB" (powers of 1024) */
+export function parseSize(size) {
+    if (typeof size === "number")
+        return Number.isInteger(size) && size >= 0 ? size : undefined;
+    const match = /^\s*(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)\s*$/i.exec(size);
+    if (!match)
+        return undefined;
+    return Math.round(Number(match[1]) * UNITS[match[2].toUpperCase()]);
+}
+/** A size in the largest unit that gives a whole number: 62914560 → "60 MB", 1536 → "1536 B" */
+export function formatSize(bytes) {
+    for (const unit of ["GB", "MB", "KB"]) {
+        if (bytes >= UNITS[unit] && bytes % UNITS[unit] === 0)
+            return `${bytes / UNITS[unit]} ${unit}`;
+    }
+    return `${bytes} B`;
+}
+/** A size for people: the largest unit it reaches, one decimal at most ("300 MB", "1.3 GB") */
+export function humanSize(bytes) {
+    for (const unit of ["GB", "MB", "KB"]) {
+        if (bytes >= UNITS[unit])
+            return `${Math.round((bytes / UNITS[unit]) * 10) / 10} ${unit}`;
+    }
+    return `${bytes} B`;
+}
+/** The bytes a size's source text means: a number literal, or a quoted size text */
+export function sizeFromSource(text) {
+    if (/^\d+$/.test(text))
+        return parseSize(Number(text));
+    const quoted = /^(["'`])(.*)\1$/s.exec(text);
+    return quoted ? parseSize(quoted[2]) : undefined;
+}

package/dist/steps/index.d.ts

@@ -1,5 +1,6 @@
 export { parseSpec } from "./parse.js";
 export { applyEdit, type StepEdit } from "./edit.js";
-export { stepToSource, locatorToSource, callToSource, valueToSource, } from "./emit.js";
+export { stepToSource, locatorToSource, callToSource, filesToSource, valueToSource, } from "./emit.js";
+export { formatSize, humanSize, parseSize, sizeFromSource } from "./files.js";
 export { locatorFromSpec } from "./build.js";
-export type { Expectation, LocatorCall, LocatorSpec, ParsedStep, ParsedTest, Step, TextMatcher, TextValue, } from "./model.js";
+export type { Expectation, FileEntry, GeneratedFileSpec, LocatorCall, LocatorSpec, ParsedStep, ParsedTest, Step, TextMatcher, TextValue, } from "./model.js";

package/dist/steps/index.js

@@ -1,4 +1,5 @@
 export { parseSpec } from "./parse.js";
 export { applyEdit } from "./edit.js";
-export { stepToSource, locatorToSource, callToSource, valueToSource, } from "./emit.js";
+export { stepToSource, locatorToSource, callToSource, filesToSource, valueToSource, } from "./emit.js";
+export { formatSize, humanSize, parseSize, sizeFromSource } from "./files.js";
 export { locatorFromSpec } from "./build.js";

package/dist/steps/model.d.ts

@@ -59,6 +59,22 @@ export type Expectation = {
     matcher: "toHaveCount";
     expected: number;
 };
+/** A file generated when the step runs: seeded random bytes of `size`, never stored in the project */
+export interface GeneratedFileSpec {
+    name: string;
+    /** Bytes */
+    size: number;
+    /** MIME type; `dropFiles` gives it to the page, `setInputFiles` gets it from the name's extension */
+    type?: string;
+    /** How the size is written in the source (`"60 MB"`, `1048576`); written back while it still means `size` */
+    sizeSource?: string;
+}
+/** A file a step sets or drops: one stored in the project (relative to the project folder), or a generated one */
+export type FileEntry = {
+    path: string;
+} | {
+    generate: GeneratedFileSpec;
+};
 /** The restricted set of statements the recorder writes. Anything else in a test is a `custom` step */
 export type Step = {
     kind: "goto";
@@ -95,6 +111,18 @@ export type Step = {
     name: string;
     fullPage: boolean;
 }
+/** Sets the files of an `<input type=file>`; no files clears it */
+ | {
+    kind: "setInputFiles";
+    locator: LocatorSpec;
+    files: FileEntry[];
+}
+/** Drops files on an element, as dragging them from the desktop does */
+ | {
+    kind: "dropFiles";
+    locator: LocatorSpec;
+    files: FileEntry[];
+}
 /** A statement the codec does not understand, kept verbatim */
  | {
     kind: "custom";

package/dist/steps/parse.js

@@ -1,4 +1,5 @@
 import ts from "typescript";
+import { parseSize } from "./files.js";
 const TEXT_MATCHERS = ["toHaveText", "toContainText", "toHaveValue"];
 function stringOf(node) {
     return node &&
@@ -174,6 +175,77 @@ function readExpectation(matcher, args) {
     }
     return undefined;
 }
+/** `"path"` or `generatedFile({ name, size, type? })`; undefined for anything else */
+function readFileEntry(node) {
+    const path = stringOf(node);
+    if (path !== undefined)
+        return { path };
+    if (!ts.isCallExpression(node) ||
+        !ts.isIdentifier(node.expression) ||
+        node.expression.text !== "generatedFile" ||
+        node.arguments.length !== 1 ||
+        !ts.isObjectLiteralExpression(node.arguments[0]))
+        return undefined;
+    let name;
+    let type;
+    let size;
+    let sizeSource;
+    for (const property of node.arguments[0].properties) {
+        if (!ts.isPropertyAssignment(property))
+            return undefined;
+        const value = property.initializer;
+        switch (property.name.getText()) {
+            case "name":
+                name = stringOf(value);
+                if (name === undefined)
+                    return undefined;
+                break;
+            case "type":
+                type = stringOf(value);
+                if (type === undefined)
+                    return undefined;
+                break;
+            case "size": {
+                const text = stringOf(value);
+                size =
+                    text !== undefined
+                        ? parseSize(text)
+                        : ts.isNumericLiteral(value)
+                            ? parseSize(Number(value.text))
+                            : undefined;
+                if (size === undefined)
+                    return undefined;
+                sizeSource = value.getText();
+                break;
+            }
+            default:
+                return undefined;
+        }
+    }
+    if (name === undefined || size === undefined)
+        return undefined;
+    return {
+        generate: {
+            name,
+            size,
+            ...(type !== undefined && { type }),
+            ...(sizeSource !== undefined && { sizeSource }),
+        },
+    };
+}
+/** One file entry, or an array of them */
+function readFiles(node) {
+    if (!node)
+        return undefined;
+    if (ts.isArrayLiteralExpression(node)) {
+        const entries = node.elements.map(readFileEntry);
+        return entries.every((entry) => entry !== undefined)
+            ? entries
+            : undefined;
+    }
+    const entry = readFileEntry(node);
+    return entry && [entry];
+}
 /** The step a statement stands for, or undefined when it is outside the recorder's set */
 function readStep(statement) {
     if (!ts.isExpressionStatement(statement) ||
@@ -241,6 +313,13 @@ function readStep(statement) {
         const value = readValue(args[0]);
         return value ? { kind: "fill", locator, value } : undefined;
     }
+    if ((name.text === "setInputFiles" || name.text === "dropFiles") &&
+        args.length === 1) {
+        const files = readFiles(args[0]);
+        return files
+            ? { kind: name.text, locator, files }
+            : undefined;
+    }
     return undefined;
 }
 function parseStatement(source, statement, sourceFile) {

package/dist/transport/bidi-connection.d.ts

@@ -25,12 +25,18 @@ export declare class BiDiConnector {
     private currentId;
     /** Set once the socket closed or failed: nothing sent after that gets an answer */
     private closed;
+    /** Which browser is on the other end, when the launcher says; code that must treat browsers apart asks this */
+    browserName?: "firefox" | "chrome";
     private webSocket;
     private eventEmitter;
     private commandTimeout;
     private subscriptions;
     constructor(ws: WebSocket, options?: ConnectorOptions);
     static connect(url: string, options?: ConnectorOptions): Promise<BiDiConnector>;
+    /** Calls `listener` once when the socket closes or fails (not when `kill()` ends it) */
+    onClosed(listener: () => void): void;
+    private closeListeners;
+    private notifyClosed;
     private onWebsocketClose;
     private onWebsocketError;
     private get isClosed();

package/dist/transport/bidi-connection.js

@@ -22,12 +22,15 @@ export class BiDiConnector {
         this.currentId = 0;
         /** Set once the socket closed or failed: nothing sent after that gets an answer */
         this.closed = false;
+        this.closeListeners = new Set();
         this.onWebsocketClose = () => {
             this.closed = true;
+            this.notifyClosed();
             this.rejectAll((pending) => new ConnectionClosedError(`Websocket closed${pendingSuffix(pending)}`));
         };
         this.onWebsocketError = (ev) => {
             this.closed = true;
+            this.notifyClosed();
             this.rejectAll((pending) => new ConnectionClosedError(`Websocket error${pendingSuffix(pending)}`, {
                 cause: ev,
             }));
@@ -84,6 +87,16 @@ export class BiDiConnector {
             });
         });
     }
+    /** Calls `listener` once when the socket closes or fails (not when `kill()` ends it) */
+    onClosed(listener) {
+        this.closeListeners.add(listener);
+    }
+    notifyClosed() {
+        const listeners = [...this.closeListeners];
+        this.closeListeners.clear();
+        for (const listener of listeners)
+            listener();
+    }
     get isClosed() {
         // A socket that is closing or closed (readyState 2 or 3) has already lost the browser
         const state = this.webSocket.readyState;

package/dist/types/browser.d.ts

@@ -1 +1 @@
-export type SupportedBrowser = "firefox";
+export type SupportedBrowser = "firefox" | "chrome";