@itmetsam/samurai-framework 0.17.0 → 0.19.0

package/dist/recorder/normalise.js

@@ -47,6 +47,12 @@ export class Normaliser {
                     not: observation.not,
                     expectation: observation.expectation,
                 };
+            case "expectPage":
+                return {
+                    kind: "expectPage",
+                    not: observation.not,
+                    expectation: observation.expectation,
+                };
             case "insert":
                 return {
                     kind: "fill",

package/dist/recorder/options.d.ts

@@ -49,7 +49,7 @@ export interface RecorderOptions {
     initialGoto?: boolean;
     /** URLs inside it are written relative to it, as `page.goto` resolves them */
     baseURL?: string;
-    /** Shows the recorder toolbar in the page (pause, assert, insert, wait, screenshot, stop). Without it, no toolbar */
+    /** Shows the recorder toolbar in the page (pause, assert, page, 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;

package/dist/recorder/recorder.js

@@ -180,6 +180,9 @@ export class Recorder {
             page: this.page,
             connector: this.connector,
             context: this.context,
+            ...(this.options.baseURL !== undefined && {
+                baseURL: this.options.baseURL,
+            }),
             mute: () => this.mute(),
             unmute: () => this.unmute(),
             observe: (observation) => this.emit(this.normaliser.observe(observation, Date.now())),

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

@@ -1,13 +1,13 @@
 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" | "insert" | "add-insertable">;
+type Replying = Of<"assert" | "assert-page" | "insert" | "add-insertable">;
 /**
  * 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`, `insert` and `add-insertable` being processed */
+    /** Ids of `assert`, `assert-page`, `insert` and `add-insertable` being processed */
     private readonly inFlight;
     /** Ids `accept` let through whose `run` hasn't started yet */
     private readonly claimed;

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

@@ -4,7 +4,7 @@
  */
 export class ActionGuard {
     constructor() {
-        /** Ids of `assert`, `insert` and `add-insertable` being processed */
+        /** Ids of `assert`, `assert-page`, `insert` and `add-insertable` being processed */
         this.inFlight = new Set();
         /** Ids `accept` let through whose `run` hasn't started yet */
         this.claimed = new Set();
@@ -14,6 +14,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")
             return true;

package/dist/recorder/toolbar/actions/assert-page.d.ts

@@ -0,0 +1,6 @@
+import type { ActionReply, PageInfo } from "../protocol.js";
+import type { ActionContext, ControllerDeps, Of } from "../types.js";
+/** What the Page panel offers: the recorded page's URL (relative to the base URL when it can be) and title */
+export declare function pageInfoOf(deps: ControllerDeps, secrets: Map<string, string | undefined>): Promise<PageInfo>;
+/** Turns the Page panel's choice into an `expectPage` step */
+export declare function assertPageAction(ctx: ActionContext, message: Of<"assert-page">): Promise<ActionReply>;

package/dist/recorder/toolbar/actions/assert-page.js

@@ -0,0 +1,33 @@
+import { urlForAssertion } from "../../expectation.js";
+import { holdsSecret } from "./pick.js";
+import { fail, PAUSED } from "./reply.js";
+/** What the Page panel offers: the recorded page's URL (relative to the base URL when it can be) and title */
+export async function pageInfoOf(deps, secrets) {
+    const { url, title } = await deps.pageInfo();
+    const secret = holdsSecret(secrets);
+    // A secret never reaches the page: a URL or title holding one is left out
+    const clean = (text) => (secret(text) ? "" : text);
+    return {
+        ok: true,
+        url: clean(url),
+        urlPrefill: clean(urlForAssertion(url, deps.baseURL)),
+        title: clean(title),
+    };
+}
+/** Turns the Page panel's choice into an `expectPage` step */
+export async function assertPageAction(ctx, message) {
+    if (ctx.isPaused())
+        return fail(PAUSED);
+    const { matcher } = message;
+    if (matcher !== "toHaveURL" && matcher !== "toHaveTitle")
+        return fail("Choose a matcher");
+    const expected = String(message.expected ?? "");
+    if (expected.trim() === "")
+        return fail("Fill in the value");
+    ctx.deps.observe({
+        type: "expectPage",
+        not: message.not === true,
+        expectation: { matcher, expected },
+    });
+    return { ok: true };
+}

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

@@ -11,8 +11,24 @@ export async function assertAction(ctx, message) {
     const expected = String(message.expected ?? "");
     switch (message.matcher) {
         case "toBeVisible":
-            expectation = { matcher: "toBeVisible" };
+        case "toBeHidden":
+        case "toBeEnabled":
+        case "toBeChecked":
+            expectation = { matcher: message.matcher };
             break;
+        case "toHaveClass":
+            expectation = { matcher: "toHaveClass", expected };
+            break;
+        case "toHaveCSS": {
+            const name = String(message.cssName ?? "").trim();
+            if (!name)
+                return fail("Choose a CSS property");
+            // A typo'd property computes to "", which would make the step always pass
+            if (!expected.trim())
+                return fail("Fill in the value");
+            expectation = { matcher: "toHaveCSS", name, expected };
+            break;
+        }
         case "toHaveText":
         case "toContainText":
         case "toHaveValue":

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

@@ -1,6 +1,8 @@
 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 field may hold an inserted secret: its value (and any text or attribute equal to a secret) is left out,
+ * A field may hold an inserted secret: its value (and any text, attribute, class or CSS value holding a secret) is left out,
  * 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,14 +1,20 @@
 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 field may hold an inserted secret: its value (and any text or attribute equal to a secret) is left out,
+ * A field may hold an inserted secret: its value (and any text, attribute, class or CSS value holding a secret) is left out,
  * 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 values = [...secrets.values()].filter((value) => value !== undefined && value !== "");
-    const secret = (text) => text !== undefined && values.some((value) => text.includes(value));
+    const secret = holdsSecret(secrets);
     if (!secret(info.value) &&
         !secret(info.text) &&
         !secret(info.first.expected) &&
+        !secret(info.className ?? undefined) &&
+        !secret(info.css.value) &&
         !info.attributes.some((a) => secret(a.value)))
         return info;
     const text = secret(info.text) ? "" : info.text;
@@ -18,6 +24,8 @@ export function withoutSecrets(info, secrets) {
         ...rest,
         text,
         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,
         first: {
             matcher: first.matcher,
             ...("expected" in first && { expected: String(first.expected) }),

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

@@ -37,6 +37,7 @@ export declare function setup(options?: Partial<ControllerOptions>, overrides?:
     calls: string[];
     page: {
         url: string;
+        title: string;
     };
     last: () => ToolbarState;
     noSecretLeaks: () => void;

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

@@ -28,6 +28,10 @@ export const INFO = {
     attributes: [{ name: "id", value: "email" }],
     first: { matcher: "toHaveValue", expected: "a@b.c" },
     counts: [{ label: "listitem", count: 3 }],
+    checkable: false,
+    disableable: true,
+    className: null,
+    css: { name: "color", value: "rgb(0, 0, 0)" },
 };
 export const lastOf = (items) => items[items.length - 1];
 export const msg = (message) => ({ type: "toolbar", ...message });
@@ -56,12 +60,13 @@ export function setup(options = {}, overrides = {}) {
     const observed = [];
     const statuses = [];
     const calls = [];
-    const page = { url: "http://localhost/a" };
+    const page = { url: "http://localhost/a", title: "Home" };
     let controller;
     const deps = {
         push: (state) => pushes.push(structuredClone(state)),
         reply: (id, result) => replies.push({ id, result: structuredClone(result) }),
         currentUrl: async () => page.url,
+        pageInfo: async () => ({ url: page.url, title: page.title }),
         rank: async () => LOCATOR,
         inspect: async () => ({
             info: INFO,

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

@@ -69,12 +69,14 @@ export declare class ToolbarController {
     private resume;
     private answer;
     /**
-     * Whether to process `message`; call it as the message arrives, before queueing it. An `assert`, `insert` or
-     * `add-insertable` whose id is in flight or was already answered `{ ok: true }` is a double click and is
+     * 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
      * dropped (its first copy answers). A retry after `{ ok: false }` is accepted.
      */
     accept(message: Message): boolean;
     /** Runs an action that expects a reply, unless it is a repeat (see `accept`) */
     private replying;
+    /** The Page panel opened: the recorded page's URL and title, unless that page was left meanwhile */
+    private pageInfo;
     private picked;
 }

package/dist/recorder/toolbar/controller.js

@@ -1,6 +1,7 @@
 import { cleanName } from "../../browser/evidence.js";
 import { ActionGuard } from "./action-guard.js";
 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 { fail, PAUSED, UNIDENTIFIABLE } from "./actions/reply.js";
@@ -137,6 +138,10 @@ export class ToolbarController {
                 return this.picked(message);
             case "assert":
                 return this.replying(message, () => assertAction(this.actions, message));
+            case "page-info":
+                return this.pageInfo(message);
+            case "assert-page":
+                return this.replying(message, () => assertPageAction(this.actions, message));
             case "insert":
                 return this.replying(message, () => insertAction(this.actions, message));
             case "add-insertable":
@@ -272,8 +277,8 @@ export class ToolbarController {
         this.push();
     }
     /**
-     * Whether to process `message`; call it as the message arrives, before queueing it. An `assert`, `insert` or
-     * `add-insertable` whose id is in flight or was already answered `{ ok: true }` is a double click and is
+     * 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
      * dropped (its first copy answers). A retry after `{ ok: false }` is accepted.
      */
     accept(message) {
@@ -283,6 +288,22 @@ export class ToolbarController {
     replying(message, work) {
         return this.guard.run(message, work, (id, result) => this.reply(id, result));
     }
+    /** The Page panel opened: the recorded page's URL and title, unless that page was left meanwhile */
+    async pageInfo(message) {
+        const page = this.scope.current;
+        if (this.paused)
+            return this.reply(message.id, fail(PAUSED));
+        let found;
+        try {
+            found = await this.scope.whileOn(() => pageInfoOf(this.deps, this.secrets));
+        }
+        catch {
+            found = { ok: false, error: "Couldn't read the page" };
+        }
+        if (found === LEFT || page !== this.scope.current)
+            return;
+        this.reply(message.id, found);
+    }
     async picked(message) {
         const page = this.scope.current;
         if (this.paused)

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

@@ -5,6 +5,7 @@ import type { BiDiConnector } from "../../transport/bidi-connection.js";
 import type { Inspection } from "./types.js";
 /**
  * What the Assert panel needs for a picked element: its short label, text, value, attributes, the first
- * matcher (today's Alt+click rule) and up to three locators that match more than one element, with counts.
+ * matcher (today's Alt+click rule), up to three locators that match more than one element, with counts,
+ * and what decides the Checked, Enabled, Has class and Has CSS choices.
  */
 export declare function inspectElement(page: Page, connector: BiDiConnector, context: string, target: ElementHandle, locator: LocatorSpec, candidates: LocatorCall[]): Promise<Inspection>;

package/dist/recorder/toolbar/inspect.js

@@ -5,25 +5,37 @@ import { expectationFor } from "../expectation.js";
 import { TOOLBAR_SANDBOX } from "./protocol.js";
 /** Most Count choices the Assert panel offers */
 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
  * 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.
+ * 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`.
  */
-const INSPECT_SOURCE = String.raw `(el) => {
+const INSPECT_SOURCE = String.raw `(el, cssName) => {
   ${CANDIDATES_JS}
   const TEXT_CAP = 4096;
+  const FORM_CONTROLS = ["input", "button", "select", "textarea", "fieldset", "optgroup", "option"];
   const MORE_ROLES = { li: "listitem", ul: "list", ol: "list", tr: "row", td: "cell", th: "columnheader", option: "option", nav: "navigation", table: "table", article: "article", dialog: "dialog" };
   const tag = el.tagName.toLowerCase();
   const hasValue = typeof el.value === "string" && el.tagName !== "BUTTON" && el.tagName !== "LI";
   const secret = tag === "input" && (el.getAttribute("type") || "").toLowerCase() === "password";
   const classes = Array.from(el.classList).filter(Boolean);
+  const type = (el.getAttribute("type") || "").toLowerCase();
+  const role = (el.getAttribute("role") || "").trim().toLowerCase();
+  const className = el.getAttribute("class");
   return {
     text: norm(String(el.textContent == null ? "" : el.textContent).slice(0, TEXT_CAP * 2)).slice(0, TEXT_CAP),
     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,
     css: classes.length ? CSS.escape(tag) + classes.map((c) => "." + CSS.escape(c)).join("") : null,
+    checkable: (tag === "input" && (type === "checkbox" || type === "radio")) ||
+      role === "checkbox" || role === "radio" || role === "switch" || el.hasAttribute("aria-checked"),
+    disableable: FORM_CONTROLS.includes(tag) || el.hasAttribute("aria-disabled"),
+    className: className && className.trim() ? className : null,
+    cssValue: getComputedStyle(el).getPropertyValue(cssName),
   };
 }`;
 /** A locator call in short, as the Assert panel shows it: `heading "Sign in"`, `label "Email"`, `li.item` */
@@ -48,10 +60,11 @@ function describeCall(call) {
 const sameCall = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 /**
  * What the Assert panel needs for a picked element: its short label, text, value, attributes, the first
- * matcher (today's Alt+click rule) and up to three locators that match more than one element, with counts.
+ * matcher (today's Alt+click rule), up to three locators that match more than one element, with counts,
+ * and what decides the Checked, Enabled, Has class and Has CSS choices.
  */
 export async function inspectElement(page, connector, context, target, locator, candidates) {
-    const found = await callFunction(connector, context, INSPECT_SOURCE, [target], { sandbox: TOOLBAR_SANDBOX });
+    const found = await callFunction(connector, context, INSPECT_SOURCE, [target, CSS_PROPERTY], { sandbox: TOOLBAR_SANDBOX });
     const value = found.value ?? undefined;
     const first = expectationFor(found.text, value);
     // The element's role without a name, its tag with its classes, then its other candidates
@@ -88,6 +101,10 @@ export async function inspectElement(page, connector, context, target, locator,
                 ...("expected" in first && { expected: String(first.expected) }),
             },
             counts,
+            checkable: found.checkable,
+            disableable: found.disableable,
+            className: found.className,
+            css: { name: CSS_PROPERTY, value: found.cssValue },
         },
         counts: calls,
     };

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

@@ -1,9 +1,9 @@
-import type { LocatorCall } from "../../steps/model.js";
+import type { Expectation, LocatorCall, PageExpectation } from "../../steps/model.js";
 /** The BiDi sandbox realm the toolbar script runs in */
 export declare const TOOLBAR_SANDBOX = "samurai-toolbar";
 /** `Symbol.for(TOOLBAR_KEY)` on the sandbox global holds the toolbar's hook: `update`, `reply`, `press`, `root` */
 export declare const TOOLBAR_KEY = "samurai.toolbar";
-type MatcherChoice = "toBeVisible" | "toHaveText" | "toContainText" | "toHaveValue" | "toHaveAttribute" | "toHaveCount";
+type MatcherChoice = Expectation["matcher"];
 /** What the toolbar draws; secrets are names only */
 export interface ToolbarState {
     status: "recording" | "paused";
@@ -84,6 +84,8 @@ export type ToolbarMessage = {
     matcher: MatcherChoice;
     expected?: string;
     attribute?: string;
+    /** The property Has CSS reads, as typed */
+    cssName?: string;
     countIndex?: number;
     not: boolean;
 } | {
@@ -101,6 +103,17 @@ export type ToolbarMessage = {
     kind: "env" | "secret";
     name: string;
     value: string;
+}
+/** The Page panel opened: answered with a `PageInfo` */
+ | {
+    action: "page-info";
+    id: number;
+} | {
+    action: "assert-page";
+    id: number;
+    matcher: PageExpectation["matcher"];
+    expected: string;
+    not: boolean;
 } | {
     action: "wait";
     kind: "idle";
@@ -131,11 +144,32 @@ export type PickInfo = {
         label: string;
         count: number;
     }[];
+    /** A checkbox or radio input, or role checkbox/radio/switch, or `aria-checked`: Checked is offered */
+    checkable: boolean;
+    /** A form control or button, or `aria-disabled`: Enabled is offered */
+    disableable: boolean;
+    /** The class attribute as written; null when there is none (Has class is not offered) */
+    className: string | null;
+    /** Has CSS's first property and its computed value */
+    css: {
+        name: string;
+        value: string;
+    };
+} | {
+    ok: false;
+    error: string;
+};
+/** The answer to `page-info`: the recorded page's URL, the URL the Page panel prefills, and its title */
+export type PageInfo = {
+    ok: true;
+    url: string;
+    urlPrefill: string;
+    title: string;
 } | {
     ok: false;
     error: string;
 };
-/** The answer to `insert`, `add-insertable` and `assert` */
+/** The answer to `insert`, `add-insertable`, `assert` and `assert-page` */
 export type ActionReply = {
     ok: true;
 } | {

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

@@ -0,0 +1,21 @@
+import type Page from "../../browser/page.js";
+import type { BiDiConnector } from "../../transport/bidi-connection.js";
+import { type ToolbarState } from "./protocol.js";
+/** The toolbar's hook, as an expression in its sandbox */
+export declare const HOOK = "globalThis[Symbol.for(\"samurai.toolbar\")]";
+export declare const pause: (ms: number) => Promise<unknown>;
+/** Polls `probe` until it gives something other than undefined or false */
+export declare function waitFor<T>(probe: () => T | undefined | Promise<T | undefined>, what: string, ms?: number): Promise<T>;
+/** Drives the real toolbar in the page `target` gives (read on every call: the page is opened in `before`) */
+export declare function toolbarDriver(target: () => {
+    page: Page;
+    connector: BiDiConnector;
+}): {
+    inSandbox: <T>(fn: string, ...args: unknown[]) => Promise<T>;
+    press: (action: string, detail?: object) => Promise<unknown>;
+    /** Runs the picker's click on the first element matching `selector` */
+    pickElement: (selector: string) => Promise<unknown>;
+    viewState: () => Promise<ToolbarState | null>;
+    /** Sets a toolbar form input as typing into it would */
+    typeInto: (field: string, value: string) => Promise<unknown>;
+};

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

@@ -0,0 +1,40 @@
+import { callFunction } from "../../script/call-function.js";
+import { TOOLBAR_KEY, TOOLBAR_SANDBOX } from "./protocol.js";
+/** The toolbar's hook, as an expression in its sandbox */
+export const HOOK = `globalThis[Symbol.for("${TOOLBAR_KEY}")]`;
+export const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+/** Polls `probe` until it gives something other than undefined or false */
+export async function waitFor(probe, what, ms = 8000) {
+    const end = Date.now() + ms;
+    for (;;) {
+        const value = await probe();
+        if (value !== undefined && value !== false)
+            return value;
+        if (Date.now() > end)
+            throw new Error(`Timed out waiting for ${what}`);
+        await pause(50);
+    }
+}
+/** Drives the real toolbar in the page `target` gives (read on every call: the page is opened in `before`) */
+export function toolbarDriver(target) {
+    const inSandbox = (fn, ...args) => {
+        const { page, connector } = target();
+        return callFunction(connector, page.contextId, fn, args, {
+            sandbox: TOOLBAR_SANDBOX,
+        });
+    };
+    return {
+        inSandbox,
+        press: (action, detail) => inSandbox(`(action, detail) => { ${HOOK}.press(action, detail); }`, action, detail),
+        /** Runs the picker's click on the first element matching `selector` */
+        pickElement: (selector) => inSandbox(`(selector) => { ${HOOK}.press("pick", { target: document.querySelector(selector) }); }`, selector),
+        viewState: () => inSandbox(`() => ${HOOK} ? ${HOOK}.state() : null`),
+        /** Sets a toolbar form input as typing into it would */
+        typeInto: (field, value) => inSandbox(`(field, value) => {
+      const el = ${HOOK}.root.querySelector('[data-field="' + field + '"]');
+      if (!el) throw new Error("no field " + field);
+      el.value = value;
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }`, field, value),
+    };
+}

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

@@ -10,10 +10,19 @@ export const FIELDS_JS = String.raw `  const press = (action, detail) => {
     if (!field) return;
     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 === "attribute" && ui.assert) {
       ui.assert.attribute = value;
       ui.assert.expected = prefill(ui.assert, "toHaveAttribute");
       render();
+    } else if (field === "cssName" && ui.assert) {
+      if (ui.assert.cssName === value) return;
+      ui.assert.cssName = value;
+      // The computed CSS value skips the secret filter on purpose: a computed style can't carry an
+      // input's typed value, and it is already visible on the page
+      ui.assert.cssValue = cssValueOf(ui.assert.target, value);
+      ui.assert.expected = prefill(ui.assert, "toHaveCSS");
+      render();
     } else if (field === "countIndex" && ui.assert) {
       ui.assert.countIndex = Number(value);
       ui.assert.expected = prefill(ui.assert, "toHaveCount");

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

@@ -27,6 +27,7 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
       ui.picking = !wasOn;
       render();
     },
+    page: () => openTool("page"),
     insert: () => openTool("insert"),
     wait: () => openTool("wait"),
     screenshot: () => openTool("screenshot"),
@@ -47,14 +48,37 @@ export const HANDLERS_JS = String.raw `  // Every action is what a click on its
       const a = ui.panel === "assert" && ui.assert;
       if (!a || ui.busy || !a.info || !a.info.ok) return;
       const message = { action: "assert", id: a.id, target: a.target, candidates: a.candidates, matcher: a.matcher, not: a.not };
-      if (a.matcher !== "toBeVisible") message.expected = a.expected;
+      if (!VALUELESS.includes(a.matcher)) message.expected = a.expected;
       if (a.matcher === "toHaveAttribute") message.attribute = a.attribute;
+      if (a.matcher === "toHaveCSS") message.cssName = a.cssName;
       if (a.matcher === "toHaveCount") message.countIndex = a.countIndex;
       ui.busy = true;
       a.error = null;
       post(message);
       render();
     },
+    "page-matcher": (detail) => {
+      const p = ui.panel === "page" && ui.page;
+      if (!p || !p.info || !p.info.ok || !PAGE_MATCHERS.some(([matcher]) => matcher === detail.matcher)) return;
+      p.matcher = detail.matcher;
+      p.expected = detail.matcher === "toHaveTitle" ? p.info.title : p.info.urlPrefill;
+      p.error = null;
+      render();
+    },
+    "page-not": () => {
+      if (ui.panel !== "page" || !ui.page || !ui.page.info) return;
+      ui.page.not = !ui.page.not;
+      render();
+    },
+    "page-add": () => {
+      const p = ui.panel === "page" && ui.page;
+      if (!p || ui.busy || !p.info || !p.info.ok) return;
+      ui.busy = true;
+      ui.pending = p.id;
+      p.error = null;
+      post({ action: "assert-page", id: p.id, matcher: p.matcher, expected: p.expected, not: p.not });
+      render();
+    },
     "insert-item": (detail) => {
       if (ui.panel !== "insert" || ui.busy || !ui.insert.field) return;
       if (detail.kind === "secret") {

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

@@ -3,6 +3,7 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
   const closePanel = () => {
     ui.panel = null;
     ui.assert = null;
+    ui.page = null;
     ui.busy = false;
     ui.closeOnUpdate = false;
     ui.pending = 0;
@@ -28,6 +29,11 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
         ui.field = field;
         ui.insert = { field, filter: "", error: null };
         if (field) ui.focus = "filter";
+      } else if (tool === "page") {
+        const id = nextId++;
+        ui.page = { id, info: null, matcher: "toHaveURL", expected: "", not: false, error: null };
+        ui.pending = id;
+        post({ action: "page-info", id });
       } else if (tool === "wait") {
         ui.wait = { kind: "idle", seconds: "2" };
       } else if (tool === "screenshot") {
@@ -45,7 +51,8 @@ export const PICKING_JS = String.raw `  // ---- Panels and picking ----
     const candidates = candidatesOf(target);
     const r = target.getBoundingClientRect();
     ui.assert = {
-      id, target, candidates, info: null, matcher: "toBeVisible", expected: "", attribute: null, countIndex: 0, not: false, error: null,
+      id, target, candidates, info: null, matcher: "toBeVisible", expected: "", attribute: null, countIndex: 0,
+      cssName: "", cssValue: "", not: false, error: null,
       rect: { left: r.left, top: r.top, right: r.right, bottom: r.bottom },
     };
     ui.panel = "assert";

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

@@ -37,12 +37,22 @@ export const RECORDER_SIDE_JS = String.raw `  // ---- The recorder's side ----
         a.matcher = result.first.matcher;
         a.attribute = result.attributes[0] ? result.attributes[0].name : null;
         a.countIndex = 0;
+        a.cssName = result.css.name;
+        a.cssValue = result.css.value;
         a.expected = prefill(a, a.matcher);
       }
+    } else if (ui.panel === "page" && ui.page && !ui.page.info) {
+      ui.page.info = result;
+      if (ok) {
+        ui.page.expected = result.urlPrefill;
+        ui.focus = "pageExpected";
+      }
     } else if (ok) {
       closePanel();
     } else if (ui.panel === "assert" && ui.assert) {
       ui.assert.error = result.error;
+    } else if (ui.panel === "page" && ui.page) {
+      ui.page.error = result.error;
     } else if (ui.panel === "insert") {
       ui.insert.error = result.error;
     } else if (ui.panel === "new") {

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

@@ -20,7 +20,12 @@ export const SETUP_JS = String.raw `  if (window !== window.top) return;
   const MATCHERS = [
     ["toBeVisible", "Visible"], ["toHaveText", "Has text"], ["toContainText", "Contains text"],
     ["toHaveValue", "Has value"], ["toHaveAttribute", "Has attribute"], ["toHaveCount", "Count"],
+    ["toBeHidden", "Hidden"], ["toBeEnabled", "Enabled"], ["toBeChecked", "Checked"],
+    ["toHaveClass", "Has class"], ["toHaveCSS", "Has CSS"],
   ];
+  const PAGE_MATCHERS = [["toHaveURL", "URL"], ["toHaveTitle", "Title"]];
+  // Matchers that take no expected value
+  const VALUELESS = ["toBeVisible", "toBeHidden", "toBeEnabled", "toBeChecked"];
 
   let channel = send;
   let state = Object.assign({}, DEFAULTS);
@@ -30,7 +35,7 @@ export const SETUP_JS = String.raw `  if (window !== window.top) return;
   // Local UI state; everything about steps lives in the recorder
   const ui = {
     panel: null, picking: false, busy: false, closeOnUpdate: false, pending: 0, focus: null,
-    field: null, assert: null, insert: null, form: null,
+    field: null, assert: null, page: null, insert: null, form: null,
     wait: { kind: "idle", seconds: "2" }, shot: { name: "", fullPage: false },
     drag: null, dropped: null, toastId: null,
   };