@specific.dev/spectest 0.17.0 → 0.18.0

package/src/daemon.ts

@@ -2967,6 +2967,13 @@ interface BrowserSessionRecord {
    * (phone bezel). Drives the dashboard's chrome; the rrweb events are
    * identical either way. */
   frame?: "browser" | "mobile";
+  /** Safe-area insets that were CDP-emulated during capture (mobile
+   * sessions on a Chromium that supports the override). The dashboard
+   * substitutes these for `env(safe-area-inset-*)` in the replayed CSS —
+   * the replay iframe evaluates env() to 0, which would collapse the
+   * app's own status-bar/home-indicator padding and shift every recorded
+   * touch coordinate. Absent on desktop sessions and legacy captures. */
+  safeAreaInsets?: { top: number; right: number; bottom: number; left: number };
   steps: BrowserSessionStep[];
 }
 
@@ -3810,6 +3817,9 @@ async function runOne(testCase: TestCase<unknown>): Promise<RunResult> {
       ...(opts ?? {}),
       recorder: session.recorder,
     });
+    if (browser.safeAreaInsets) {
+      session.record.safeAreaInsets = browser.safeAreaInsets;
+    }
     // An attached session starts mid-page (no navigate event will fire) —
     // stamp the inherited URL so the dashboard can still label the replay.
     if (attached && session.record.initialUrl === undefined) {
@@ -3837,10 +3847,11 @@ async function runOne(testCase: TestCase<unknown>): Promise<RunResult> {
     if (existing) return existing;
     const session = newBrowserSession(start, testCase.id, "mobile");
     sessions.push(session);
-    const { mobile, attached, detach } = await openPersistentMobile({
+    const { mobile, attached, detach, safeAreaInsets } = await openPersistentMobile({
       url: app.url,
       recorder: session.recorder,
     });
+    if (safeAreaInsets) session.record.safeAreaInsets = safeAreaInsets;
     if (attached && session.record.initialUrl === undefined) {
       session.record.initialUrl = mobile.url;
     }
@@ -4124,6 +4135,9 @@ async function evalCode(
       ...(opts ?? {}),
       recorder: session.recorder,
     });
+    if (browser.safeAreaInsets) {
+      session.record.safeAreaInsets = browser.safeAreaInsets;
+    }
     if (attached && session.record.initialUrl === undefined) {
       session.record.initialUrl = browser.url;
     }
@@ -4149,10 +4163,11 @@ async function evalCode(
     if (existing) return existing;
     const session = newBrowserSession(start, "eval", "mobile");
     sessions.push(session);
-    const { mobile, attached, detach } = await openPersistentMobile({
+    const { mobile, attached, detach, safeAreaInsets } = await openPersistentMobile({
       url: app.url,
       recorder: session.recorder,
     });
+    if (safeAreaInsets) session.record.safeAreaInsets = safeAreaInsets;
     if (attached && session.record.initialUrl === undefined) {
       session.record.initialUrl = mobile.url;
     }

package/src/mobile.ts

@@ -11,8 +11,12 @@
 // file only adds the locator/gesture ergonomics.
 //
 // React Native Web renders `testID="x"` to `data-testid="x"` and
-// `accessibilityLabel` to `aria-label`, so `getByTestId`/`getByLabel` map to
-// plain DOM attribute selectors with no shimming.
+// `accessibilityLabel` to `aria-label`, so `getByTestId`/`getByLabel` map
+// straight onto playwright's built-in locators (its `testIdAttribute`
+// default is `data-testid`). Locator resolution, waiting, and actionability
+// are playwright's; this file adds the descriptor plumbing, the recorder
+// events, and the CDP touch dispatch (playwright's `tap()` has no press
+// dwell, which RN Pressables need — see `rawTap` in browser.ts).
 
 import { acquirePersistentMobileBackend, openMobileBackend } from "./browser.js";
 import type {
@@ -21,6 +25,7 @@ import type {
   SafeAreaInsets,
   ScreenshotOptions,
 } from "./browser.js";
+import type { Locator, Page } from "playwright-core";
 import type { Wrapped } from "./inspect.js";
 
 /** Branded handle a mobile-app component (e.g. `expo()`) exposes on
@@ -82,80 +87,46 @@ export interface MobileLocator {
   waitFor(opts?: { timeoutMs?: number }): Promise<void>;
   /** Assert the element becomes visible within the timeout (throws otherwise). */
   assertVisible(opts?: { timeoutMs?: number }): Promise<void>;
-  /** Whether the element is currently present and visible. Wrapped so an
-   *  `expect(...)` on it nests under the read in the timeline. */
+  /** Whether the element is currently present and visible (no waiting).
+   *  Wrapped so an `expect(...)` on it nests under the read in the
+   *  timeline. */
   isVisible(): Promise<Wrapped<boolean>>;
-  /** The element's trimmed text content (or `null` if absent), wrapped. */
+  /** The element's text content, wrapped. Waits (default 5s) for the
+   *  element to become visible; throws if it never does. */
   textContent(): Promise<Wrapped<string | null>>;
 }
 
-/** Build the in-page resolver expression for a descriptor. Returns the
- *  matched element's center coords + visibility + text, or `{found:false}`.
- *  `scroll` centers the element first (so a tap can reach an offscreen
- *  target). Pure string ops — no regex literals — so it survives the
- *  template-literal escaping. */
-function resolveExpr(desc: LocatorDesc, scroll: boolean): string {
-  return `(function(){
-    var desc = ${JSON.stringify(desc)};
-    var doScroll = ${scroll ? "true" : "false"};
-    function visible(el){
-      if(!el) return false;
-      var cs = window.getComputedStyle(el);
-      if(cs.display==='none'||cs.visibility==='hidden') return false;
-      if(parseFloat(cs.opacity||'1')===0) return false;
-      var r = el.getBoundingClientRect();
-      return r.width>0 && r.height>0;
-    }
-    function txt(el){ return (el.textContent||'').split(/\\s+/).join(' ').trim(); }
-    function esc(v){ return String(v).split('"').join('\\\\"'); }
-    function matchesText(el){
-      var t = txt(el);
-      if(desc.regex){ try{ return new RegExp(desc.regex.source, desc.regex.flags).test(t); }catch(e){ return false; } }
-      if(desc.exact) return t === desc.value;
-      return t.indexOf(desc.value) >= 0;
-    }
-    function collect(){
-      if(desc.kind==='css') return [].slice.call(document.querySelectorAll(desc.value));
-      if(desc.kind==='testid') return [].slice.call(document.querySelectorAll('[data-testid="'+esc(desc.value)+'"]'));
-      if(desc.kind==='label') return [].slice.call(document.querySelectorAll('[aria-label="'+esc(desc.value)+'"]'));
-      if(desc.kind==='role'){
-        var implicit = { button:'button,[type=button],[type=submit]', link:'a[href]', heading:'h1,h2,h3,h4,h5,h6', textbox:'input,textarea', img:'img', list:'ul,ol', listitem:'li', checkbox:'[type=checkbox]' };
-        var sel = '[role="'+esc(desc.value)+'"]';
-        if(implicit[desc.value]) sel += ','+implicit[desc.value];
-        var cands = [].slice.call(document.querySelectorAll(sel));
-        if(desc.name){
-          cands = cands.filter(function(el){
-            var n = el.getAttribute('aria-label') || txt(el);
-            return desc.nameExact ? n===desc.name : n.indexOf(desc.name)>=0;
-          });
-        }
-        return cands;
-      }
-      if(desc.kind==='text'){
-        var all = [].slice.call(document.querySelectorAll('body *'));
-        var hits = all.filter(matchesText);
-        // Keep only the innermost matches (drop ancestors of another hit).
-        return hits.filter(function(el){ return !hits.some(function(o){ return o!==el && el.contains(o); }); });
-      }
-      return [];
-    }
-    var els = collect();
-    var el = null;
-    for(var i=0;i<els.length;i++){ if(visible(els[i])){ el = els[i]; break; } }
-    if(!el) el = els[0] || null;
-    if(!el) return { found:false };
-    if(doScroll){ try{ el.scrollIntoView({block:'center', inline:'center'}); }catch(e){} }
-    var r = el.getBoundingClientRect();
-    return { found:true, visible: visible(el), x: r.left + r.width/2, y: r.top + r.height/2, text: txt(el) };
-  })()`;
-}
-
-interface ResolveResult {
-  found: boolean;
-  visible?: boolean;
-  x?: number;
-  y?: number;
-  text?: string | null;
+/** Map a locator descriptor onto a playwright Locator. The trailing
+ *  `.filter({ visible: true }).first()` preserves the pre-Playwright
+ *  selection rule: the first VISIBLE match wins, and a hidden duplicate
+ *  (e.g. an offscreen menu item with the same label) neither gets picked
+ *  nor trips playwright's strict-mode multi-match error. */
+function pwLocator(page: Page, desc: LocatorDesc): Locator {
+  let base: Locator;
+  switch (desc.kind) {
+    case "css":
+      base = page.locator(desc.value);
+      break;
+    case "testid":
+      base = page.getByTestId(desc.value);
+      break;
+    case "label":
+      base = page.getByLabel(desc.value);
+      break;
+    case "role":
+      base = page.getByRole(
+        desc.value as Parameters<Page["getByRole"]>[0],
+        desc.name !== undefined ? { name: desc.name, exact: desc.nameExact } : {},
+      );
+      break;
+    default:
+      base = page.getByText(
+        desc.regex ? new RegExp(desc.regex.source, desc.regex.flags) : desc.value,
+        { exact: desc.exact },
+      );
+      break;
+  }
+  return base.filter({ visible: true }).first();
 }
 
 /** Short human label for a descriptor, used in event descriptions. */
@@ -177,79 +148,80 @@ const DEFAULT_ACTION_TIMEOUT_MS = 5_000;
 function makeLocator(backend: MobileBackend, desc: LocatorDesc): MobileLocator {
   const label = descLabel(desc);
 
-  // Poll the unrecorded resolver until the element is visible. Returns the
-  // tap coordinates. Throws a clear error on timeout.
-  async function waitCoords(timeoutMs: number): Promise<{ x: number; y: number }> {
-    const deadline = Date.now() + timeoutMs;
-    for (;;) {
-      const r = await backend.probe<ResolveResult>(resolveExpr(desc, true));
-      if (r.found && r.visible && typeof r.x === "number" && typeof r.y === "number") {
-        return { x: r.x, y: r.y };
-      }
-      if (Date.now() >= deadline) {
-        throw new Error(`mobile: ${label} not visible after ${timeoutMs}ms`);
-      }
-      await new Promise((res) => setTimeout(res, 100));
-    }
+  // Wait for the element to be visible (playwright auto-wait), center it,
+  // and return its tap coordinates.
+  async function centerOf(page: Page, timeout: number): Promise<{ x: number; y: number }> {
+    const loc = pwLocator(page, desc);
+    await loc.waitFor({ state: "visible", timeout });
+    await loc.scrollIntoViewIfNeeded({ timeout });
+    const box = await loc.boundingBox();
+    if (!box) throw new Error(`mobile: ${label} vanished before it could be tapped`);
+    return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+  }
+
+  async function tap(opts?: { timeoutMs?: number; durationMs?: number }): Promise<void> {
+    await backend.pageOp("click", { selector: label }, async (page) => {
+      const { x, y } = await centerOf(page, opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS);
+      // Manual CDP touch (not playwright's tap()): RN Pressables need the
+      // press dwell — see rawTap in browser.ts.
+      await backend.rawTap(x, y, opts?.durationMs);
+    });
+  }
+
+  async function waitForVisible(opts?: { timeoutMs?: number }): Promise<void> {
+    await backend.pageOp("waitFor", { description: `${label} visible` }, async (page) => {
+      await pwLocator(page, desc).waitFor({
+        state: "visible",
+        timeout: opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS,
+      });
+    });
   }
 
   return {
-    async tap(opts) {
-      const { x, y } = await waitCoords(opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS);
-      await backend.tapAt(x, y, { durationMs: opts?.durationMs });
-    },
+    tap,
     async typeText(text, opts) {
-      const { x, y } = await waitCoords(opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS);
-      await backend.tapAt(x, y);
+      // Two recorded events (click + type), same as a human: tap to focus,
+      // then insert the text.
+      await tap(opts);
       await backend.type(text);
     },
     async clearText(opts) {
-      await waitCoords(opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS);
-      // Native value-setter + input event so RN-Web's controlled TextInput
-      // sees the change (a plain `.value = ""` is swallowed by React).
-      await backend.evaluate(
-        `clear ${label}`,
-        `(function(){
-          var r = ${resolveExpr(desc, false)};
-          var el = document.activeElement;
-          if(!el || !('value' in el)) return false;
-          var proto = el.tagName==='TEXTAREA' ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
-          var setter = Object.getOwnPropertyDescriptor(proto,'value').set;
-          setter.call(el, '');
-          el.dispatchEvent(new Event('input', { bubbles: true }));
-          return true;
-        })()`,
-      );
+      await backend.pageOp("evaluate", { description: `clear ${label}` }, async (page) => {
+        // playwright fill("") is the canonical React-safe clear (native
+        // value setter + input event, so RN-Web's controlled TextInput
+        // sees the change).
+        await pwLocator(page, desc).fill("", {
+          timeout: opts?.timeoutMs ?? DEFAULT_ACTION_TIMEOUT_MS,
+        });
+      });
     },
     async scrollIntoView() {
-      // Routed through the recorded evaluate so the scroll lands in the replay.
-      await backend.evaluate(`scrollIntoView ${label}`, resolveExpr(desc, true));
-    },
-    async waitFor(opts) {
-      await backend.waitFor(
-        `${label} visible`,
-        `(function(){ var r = ${resolveExpr(desc, false)}; return (r.found && r.visible) ? r : null; })()`,
-        { timeoutMs: opts?.timeoutMs ?? 5_000 },
-      );
+      await backend.pageOp("scrollTo", { selector: label }, async (page) => {
+        const loc = pwLocator(page, desc);
+        await loc.waitFor({ state: "visible", timeout: DEFAULT_ACTION_TIMEOUT_MS });
+        await loc.scrollIntoViewIfNeeded({ timeout: DEFAULT_ACTION_TIMEOUT_MS });
+      });
     },
+    waitFor: waitForVisible,
     async assertVisible(opts) {
       try {
-        await this.waitFor(opts);
-      } catch {
-        throw new Error(`expected ${label} to be visible`);
+        await waitForVisible(opts);
+      } catch (e) {
+        const detail = e instanceof Error ? ` — ${e.message}` : "";
+        throw new Error(`expected ${label} to be visible${detail}`);
       }
     },
     isVisible() {
-      return backend.evaluate<boolean>(
-        `${label} visible?`,
-        `(function(){ var r = ${resolveExpr(desc, false)}; return !!(r.found && r.visible); })()`,
-      );
+      // pageOp("evaluate", …) provenance-wraps the value at runtime; the
+      // cast matches (same pattern as browser.ts's evaluate).
+      return backend.pageOp("evaluate", { description: `${label} visible?` }, (page) =>
+        pwLocator(page, desc).isVisible(),
+      ) as unknown as Promise<Wrapped<boolean>>;
     },
     textContent() {
-      return backend.evaluate<string | null>(
-        `${label} text`,
-        `(function(){ var r = ${resolveExpr(desc, false)}; return r.found ? r.text : null; })()`,
-      );
+      return backend.pageOp("evaluate", { description: `${label} text` }, (page) =>
+        pwLocator(page, desc).textContent({ timeout: DEFAULT_ACTION_TIMEOUT_MS }),
+      ) as Promise<Wrapped<string | null>>;
     },
   };
 }
@@ -267,7 +239,9 @@ export interface Mobile {
   readonly title: string;
   /** Select by `testID` (RN-Web `data-testid`). The primary mobile selector. */
   getByTestId(testId: string): MobileLocator;
-  /** Select by visible text (substring by default; pass a RegExp for patterns). */
+  /** Select by visible text (case-insensitive substring by default —
+   *  playwright semantics; `exact: true` for a case-sensitive whole-string
+   *  match, or pass a RegExp). */
   getByText(text: string | RegExp, opts?: { exact?: boolean }): MobileLocator;
   /** Select by ARIA role, optionally narrowed by accessible name. */
   getByRole(role: string, opts?: { name?: string; exact?: boolean }): MobileLocator;

package/src/vendor/rrweb-plugin-console-record.umd.js

@@ -16,6 +16,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+if (!/* @__PURE__ */ /[1-9][0-9]{12}/.test(Date.now().toString())) ;
 function patch(source, name, replacement) {
   try {
     if (!(name in source)) {