@specific.dev/spectest 0.30.0 → 0.31.0

package/dist/locator.js

@@ -196,15 +196,74 @@ export const desktopStrategy = {
  *  the press dwell RN Pressables need (playwright's `tap()` has no dwell). */
 export const mobileStrategy = {
     touch: true,
-    async tap(backend, loc, opts) {
+    async tap(backend, loc, opts, rec) {
         await loc.waitFor({ state: "visible", timeout: opts?.timeout });
         await loc.scrollIntoViewIfNeeded({ timeout: opts?.timeout });
         const box = await loc.boundingBox();
         if (!box)
             throw new Error("tap: element vanished before it could be tapped");
-        await backend.rawTap(box.x + box.width / 2, box.y + box.height / 2, opts?.duration);
+        const x = box.x + box.width / 2;
+        const y = box.y + box.height / 2;
+        // Exact, no probe needed: this IS the point the touch is dispatched at,
+        // measured after the scroll. Same field the replay reads — see
+        // stampActionPoint.
+        if (rec) {
+            rec.x = Math.round(x);
+            rec.y = Math.round(y);
+        }
+        await backend.rawTap(x, y, opts?.duration);
     },
 };
+/** How long the click-point probe waits for the element. Short on purpose:
+ *  either it is already on screen and the answer is one round trip away, or
+ *  the action's own actionability wait — with the author's timeout and a real
+ *  error message — is the one that should report it. */
+const POINT_PROBE_MS = 250;
+/** Stamp the viewport point an action is about to act on onto its (still
+ *  open) step, as the `x`/`y` a raw `browser.clickAt` records.
+ *
+ *  The replay cursor is normally positioned from rrweb's own recorded mouse
+ *  events — but a click that navigates loses them. The page-side event buffer
+ *  lives on `window`, so everything the click emitted dies with the document
+ *  before the post-op drain can collect it, and the step arrives carrying only
+ *  the destination page's load. The step's own coordinates are then the sole
+ *  record of where the click landed; without them the viewer has nothing to
+ *  put the cursor on.
+ *
+ *  Best-effort in every direction. A probe failure (not attached yet, strict
+ *  violation, frame detached) leaves the step unstamped and lets the action
+ *  itself report the problem. We only stamp a centre that is inside the
+ *  viewport of the top-level document, because that is exactly the case where
+ *  playwright clicks the element where it currently sits — one that is
+ *  off-screen (or in an iframe, whose rect is frame-relative) gets scrolled
+ *  into view first, which moves the point we measured. */
+async function stampActionPoint(loc, rec, position) {
+    try {
+        const pt = await loc.evaluate((el, pos) => {
+            if (window.top !== window)
+                return null;
+            const r = el.getBoundingClientRect();
+            if (!r.width || !r.height)
+                return null;
+            // Playwright clicks the element's centre unless the caller named a
+            // point — which it takes relative to the PADDING box, so an element
+            // with a border (a plain `<button>` has 2px of it) sits that far off
+            // the rect we measured.
+            const cs = pos ? getComputedStyle(el) : null;
+            const x = cs ? r.left + parseFloat(cs.borderLeftWidth) + pos.x : r.left + r.width / 2;
+            const y = cs ? r.top + parseFloat(cs.borderTopWidth) + pos.y : r.top + r.height / 2;
+            const onScreen = x >= 0 && y >= 0 && x <= window.innerWidth && y <= window.innerHeight;
+            return onScreen ? { x, y } : null;
+        }, position, { timeout: POINT_PROBE_MS });
+        if (pt) {
+            rec.x = Math.round(pt.x);
+            rec.y = Math.round(pt.y);
+        }
+    }
+    catch {
+        /* Element not ready / gone / strict violation — the action reports it. */
+    }
+}
 // ────────────────────────────────────────────────────────────────────────
 // Factory
 // ────────────────────────────────────────────────────────────────────────
@@ -216,6 +275,14 @@ export function makeLocator(backend, strategy, chain) {
     const extend = (step) => makeLocator(backend, strategy, { steps: [...chain.steps, step] });
     // One recorded event, result NOT wrapped (void/action).
     const act = (action, fields, fn) => backend.pageOp(action, { selector: label, ...fields }, (page) => fn(lower(page, chain), page));
+    // One recorded event whose fields the action itself finishes filling in:
+    // `rec` is the very object the recorder spreads once `fn` resolves (the
+    // same mutate-in-flight seam `screenshot`'s artifact id rides), so the
+    // click family can stamp the point it acted on. See stampActionPoint.
+    const actAt = (action, fn) => {
+        const rec = { selector: label };
+        return backend.pageOp(action, rec, (page) => fn(lower(page, chain), rec));
+    };
     // One recorded event, result provenance-wrapped for expect().
     const read = (action, fn, fields = {}) => backend.pageOp(action, { selector: label, ...fields }, (page) => fn(lower(page, chain)), {
         wrap: true,
@@ -250,9 +317,15 @@ export function makeLocator(backend, strategy, chain) {
         last: () => extend({ m: "last", args: [] }),
         nth: (i) => extend({ m: "nth", args: [i] }),
         // actions
-        click: (opts) => act("click", {}, (l) => l.click(opts)),
-        dblclick: (opts) => act("dblclick", {}, (l) => l.dblclick(opts)),
-        tap: (opts) => act("tap", {}, (l) => strategy.tap(backend, l, opts)),
+        click: (opts) => actAt("click", async (l, rec) => {
+            await stampActionPoint(l, rec, opts?.position);
+            return l.click(opts);
+        }),
+        dblclick: (opts) => actAt("dblclick", async (l, rec) => {
+            await stampActionPoint(l, rec, opts?.position);
+            return l.dblclick(opts);
+        }),
+        tap: (opts) => actAt("tap", (l, rec) => strategy.tap(backend, l, opts, rec)),
         fill: (value, opts) => {
             const t = truncateUtf8(value);
             return act("fill", { text: t.value, textTruncated: t.truncated }, (l) => l.fill(value, { timeout: opts?.timeout }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@specific.dev/spectest",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Spectest SDK for defining test environments in TypeScript.",
   "type": "module",
   "main": "./dist/index.js",