fix(web): carry element identity on actions and fix findAll on paths

an action's target was coordinates only, so a property matching on which
element was acted upon could never fire. ax.findAll([a,b]) also returned
nothing on web.

pkg/spec/test/web-dom-harness.ts

@@ -14,6 +14,15 @@ export interface FakeElementSpec {
   y: number;
   width: number;
   height: number;
+  // id/testid/label/alt/title are how the host names a target: it builds the
+  // selector an action carries from them, so a fake needs them to exercise that
+  // naming. alt and title are the fallbacks the hierarchy dump folds into
+  // content-desc, which the host has to fall back to in the same order.
+  id?: string;
+  testid?: string;
+  label?: string;
+  alt?: string;
+  title?: string;
   // clickable/editable place the element in the selector sets the host queries;
   // the fake answers those queries directly rather than matching CSS.
   clickable?: boolean;
@@ -28,6 +37,9 @@ export interface FakeElement extends FakeElementSpec {
   tagName: string;
   type: string;
   isContentEditable: boolean;
+  id: string;
+  dataset: Record<string, string | undefined>;
+  getAttribute(name: string): string | null;
   scrollHeight: number;
   clientHeight: number;
   scrollWidth: number;
@@ -49,6 +61,10 @@ export function fakeElement(spec: FakeElementSpec): FakeElement {
     tagName: spec.tag.toUpperCase(),
     type: spec.tag === "input" ? "text" : "",
     isContentEditable: editable && spec.tag !== "input" && spec.tag !== "textarea",
+    id: spec.id ?? "",
+    dataset: { testid: spec.testid },
+    getAttribute: (name: string) =>
+      ({ "aria-label": spec.label, alt: spec.alt, title: spec.title })[name] ?? null,
     scrollHeight: spec.overflows ? spec.height * 2 : spec.height,
     clientHeight: spec.height,
     scrollWidth: spec.width,

pkg/spec/test/web-runtime.test.ts

@@ -128,6 +128,53 @@ test("queryTargets reports a disabled control rather than dropping it", () => {
   });
 });
 
+// A target with no selector is a target no property can name. The action the
+// picker builds from it carries coordinates only, so `lastAction.on` is empty
+// and any property matching on WHICH control was acted upon cannot fire.
+test("queryTargets names a uniquely identified target", () => {
+  const submit = fakeElement({
+    tag: "button", x: 0, y: 0, width: 40, height: 20, clickable: true, id: "TxnSubmit",
+  });
+  const byTestid = fakeElement({
+    tag: "button", x: 0, y: 40, width: 40, height: 20, clickable: true, testid: "cancel",
+  });
+  const byLabel = fakeElement({
+    tag: "button", x: 0, y: 80, width: 40, height: 20, clickable: true, label: "Close",
+  });
+  // alt and title are the fallbacks the hierarchy dump folds into content-desc,
+  // so the host has to fall back to them in the same order or a name it calls
+  // unique resolves to a different element on the Go side.
+  const byAlt = fakeElement({ tag: "img", x: 0, y: 120, width: 40, height: 20, alt: "Logo" });
+  const byTitle = fakeElement({ tag: "div", x: 0, y: 160, width: 40, height: 20, title: "Help" });
+  const anonymous = fakeElement({ tag: "div", x: 0, y: 200, width: 10, height: 10 });
+  withFakeDocument([submit, byTestid, byLabel, byAlt, byTitle, anonymous], () => {
+    const targets = host.queryTargets();
+    assert.equal(targets[0]!.selector, "id:TxnSubmit");
+    assert.equal(targets[1]!.selector, "data-testid:cancel");
+    assert.equal(targets[2]!.selector, "desc:Close");
+    assert.equal(targets[3]!.selector, "desc:Logo");
+    assert.equal(targets[4]!.selector, "desc:Help");
+    assert.equal(targets[5]!.selector, undefined);
+  });
+});
+
+// A repeated id (folio's Home screen renders one AccountCard testTag per
+// account) names no single element, so the runner would re-resolve the action
+// onto whichever sibling it found first. Better unnamed than mis-aimed.
+test("queryTargets leaves duplicated identities unnamed", () => {
+  const first = fakeElement({
+    tag: "div", x: 0, y: 0, width: 40, height: 20, clickable: true, id: "AccountCard",
+  });
+  const second = fakeElement({
+    tag: "div", x: 0, y: 40, width: 40, height: 20, clickable: true, id: "AccountCard",
+  });
+  withFakeDocument([first, second], () => {
+    const targets = host.queryTargets();
+    assert.equal(targets[0]!.selector, undefined);
+    assert.equal(targets[1]!.selector, undefined);
+  });
+});
+
 test("queryTargets caches within a tick until reset", () => {
   const button = fakeElement({ tag: "button", x: 0, y: 0, width: 10, height: 10, clickable: true });
   withFakeDocument([button], () => {
@@ -204,6 +251,36 @@ test("an uncaught cross-extractor read aborts evaluateExtractors", () => {
   );
 });
 
+// state.lastAction is the one piece of state the page cannot observe for
+// itself: only the runner knows which action it actually applied. While the web
+// runtime hardcoded null there, a spec property gated on the last action (e.g.
+// folio's submitMovesBalanceByTypedAmount, which only looks at taps on
+// TxnSubmit) was vacuously true on web forever, and the run went green having
+// checked nothing.
+function lastActionSeenByASpec(pushed: unknown): unknown {
+  const setLastAction = (globalThis as Record<string, unknown>)
+    .__sanderlingSetLastAction__ as (value: unknown) => void;
+  __testing__.extractors.length = 0;
+  __testing__.runtime.extract((state) => (state as { lastAction: unknown }).lastAction);
+  let out: Record<number, unknown> = {};
+  withState(() => {
+    setLastAction(pushed);
+    out = __testing__.evaluateExtractors();
+  });
+  return out[0];
+}
+
+test("state.lastAction carries the action the host pushed", () => {
+  const action = { kind: "Tap", on: "id:TxnSubmit" };
+  assert.deepEqual(lastActionSeenByASpec(action), action);
+});
+
+test("state.lastAction is null when the host pushed nothing", () => {
+  // The first step of a run, and any step whose action was never applied: the
+  // goja host reports null there, so the web host must too.
+  assert.equal(lastActionSeenByASpec(null), null);
+});
+
 // sanitize runs over every extractor's return value before it leaves the
 // runtime. A user extractor that returns a page object reachable from
 // document/window can be self-referential, carry functions, or nest deeply;
@@ -338,3 +415,105 @@ test("selectorFromObject text-only selector becomes an XPath", () => {
     xpath: `//*[normalize-space(text())="Go"]`,
   });
 });
+
+// An ax element is labelled with the selector it was found by, in the same
+// canonical grammar selectorStringFromJS emits in internal/verifier/marshal.go.
+// The label is what a spec's own Tap({ on: state.ax.find(...) }) carries to the
+// runner: with no label the action is coordinates only, `lastAction.on` is
+// empty, and a property matching on WHICH control was tapped cannot fire.
+const { selectorTag } = __testing__;
+
+test("selectorTag renders the selector shapes the goja host renders", () => {
+  assert.equal(selectorTag("testTag:TxnSubmit"), "testTag:TxnSubmit");
+  assert.equal(selectorTag({ testTag: "TxnSubmit" }), "testTag:TxnSubmit");
+  assert.equal(
+    selectorTag([{ testTag: "AddTransactionScreen" }, { testTag: "TxnSubmit" }]),
+    "testTag:AddTransactionScreen > testTag:TxnSubmit",
+  );
+  assert.equal(selectorTag({ testTag: "Row", "aria-label": "first" }), "testTag:Row aria-label:first");
+  assert.equal(selectorTag(undefined), "");
+});
+
+// A selector path scopes the second segment to each match of the first. It
+// returned nothing at all on web while returning matches on native, so folio's
+// accounts/totalBalance extractors (findAll([{HomeScreen}, {AccountCard}]))
+// were empty on every web step and the properties over them checked nothing.
+test("ax.findAll resolves a selector path segment by segment", () => {
+  const rect = { left: 0, top: 0, right: 10, bottom: 10, width: 10, height: 10 };
+  const node = (id: string, answers: Record<string, unknown[]> = {}) => ({
+    id,
+    tagName: "DIV",
+    className: "",
+    textContent: id,
+    dataset: {},
+    getAttribute: () => null,
+    getBoundingClientRect: () => rect,
+    querySelectorAll: (selector: string) => answers[selector] ?? [],
+  });
+  const cardCss = `:is([data-testid="AccountCard"], [id="AccountCard"])`;
+  const screenCss = `:is([data-testid="HomeScreen"], [id="HomeScreen"])`;
+  const cards = [node("first"), node("second")];
+  const home = node("HomeScreen", { [cardCss]: cards });
+
+  const g = globalThis as Record<string, unknown>;
+  const originalDocument = g.document;
+  const originalWindow = g.window;
+  g.document = { querySelectorAll: (selector: string) => (selector === screenCss ? [home] : []) };
+  g.window = {};
+  try {
+    __testing__.extractors.length = 0;
+    __testing__.runtime.extract((state) => {
+      const ax = (state as { ax: { findAll(s: unknown): Record<string, unknown>[] } }).ax;
+      return ax
+        .findAll([{ testTag: "HomeScreen" }, { testTag: "AccountCard" }])
+        .map((card) => card.text);
+    });
+    const values = __testing__.evaluateExtractors();
+    // Scoped to the head match: the cards come from the HomeScreen node, not
+    // from a document-wide sweep for AccountCard.
+    assert.deepEqual(values[0], ["first", "second"]);
+  } finally {
+    g.document = originalDocument;
+    g.window = originalWindow;
+  }
+});
+
+test("ax.find and ax.findAll label the element with its selector", () => {
+  const rect = { left: 0, top: 0, right: 10, bottom: 10, width: 10, height: 10 };
+  const submit = {
+    id: "TxnSubmit",
+    tagName: "DIV",
+    className: "",
+    textContent: "Submit",
+    dataset: {},
+    getAttribute: () => null,
+    getBoundingClientRect: () => rect,
+  };
+  const matches = `:is([data-testid="TxnSubmit"], [id="TxnSubmit"])`;
+  const g = globalThis as Record<string, unknown>;
+  const originalDocument = g.document;
+  const originalWindow = g.window;
+  g.document = { querySelectorAll: (selector: string) => (selector === matches ? [submit] : []) };
+  g.window = {};
+  try {
+    __testing__.extractors.length = 0;
+    __testing__.runtime.extract((state) => {
+      const ax = (state as { ax: { find(s: unknown): Record<string, unknown> | undefined } }).ax;
+      return ax.find({ testTag: "TxnSubmit" });
+    });
+    __testing__.runtime.extract((state) => {
+      const ax = (state as { ax: { findAll(s: unknown): Record<string, unknown>[] } }).ax;
+      return ax.findAll({ testTag: "TxnSubmit" });
+    });
+    const values = __testing__.evaluateExtractors();
+    const found = values[0] as Record<string, unknown>;
+    assert.equal(found.__sanderlingSelector, "testTag:TxnSubmit");
+    // findAll passes each element through map(); passing the callback by
+    // reference would hand the array INDEX to the runtime as the selector.
+    const all = values[1] as Record<string, unknown>[];
+    assert.equal(all[0]!.__sanderlingSelector, "testTag:TxnSubmit");
+  } finally {
+    g.document = originalDocument;
+    g.window = originalWindow;
+  }
+});