@reticlehq/browser 3.9.0 → 3.10.0

package/dist/recorder/recorder.js

@@ -1,8 +1,9 @@
 import { readTestId } from '../dom/addressing/testid-attr.js';
-import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, FlowStepTool, RecorderPhase, PredicateKind, } from '@reticlehq/core';
+import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, ACT_STEP_TOOL, RecorderPhase, PredicateKind, } from '@reticlehq/core';
 import { REDACTED_VALUE } from '@reticlehq/core';
 import { sourceFromDom } from '../dom/addressing/source.js';
 import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
+import { positionAmongNamesakes } from '../actions/action-report.js';
 import { isReticleOverlay } from '../dom/dom-ignore.js';
 import { getCapabilities } from '../registry/capabilities.js';
 import { TOOLBAR_CSS, BTN_CSS, NAME_CSS, STATUS_CSS, MENU_CSS } from './recorder-styles.js';
@@ -10,7 +11,7 @@ export const RECORDER_EMPTY_MSG = 'recorded 0 steps';
 const STATUS_RECORDING = 'recording…';
 const STATUS_IDLE = 'ready';
 const STATUS_ANNOTATE = 'pick an annotation';
-const TOOL = FlowStepTool.ACT;
+const TOOL = ACT_STEP_TOOL;
 const BUTTON_LABEL = {
     record: 'Record',
     stop: 'Stop',
@@ -38,33 +39,45 @@ export function anchorFor(el) {
     const role = getRole(el);
     const name = getAccessibleName(el);
     if (role !== 'generic' && (role.length > 0 || name.length > 0)) {
-        const anchor = name.length > 0 ? { kind: AnchorKind.ROLE, role, name } : { kind: AnchorKind.ROLE, role };
+        const position = positionAmongNamesakes(el, role, name);
+        const anchor = {
+            kind: AnchorKind.ROLE,
+            role,
+            ...(name.length > 0 ? { name } : {}),
+            ...(null === position ? {} : position),
+        };
         return { anchor, degraded: false };
     }
     return { anchor: { kind: AnchorKind.ROLE, role: DEGRADED_ANCHOR_ROLE }, degraded: true };
 }
 function isTextbox(el) {
-    if (el instanceof HTMLTextAreaElement)
+    if (el instanceof HTMLTextAreaElement) {
         return true;
+    }
     return el instanceof HTMLInputElement && 'textbox' === inputRole(el);
 }
 function inputRole(el) {
     const type = el.type.toLowerCase();
-    if ('checkbox' === type)
+    if ('checkbox' === type) {
         return 'checkbox';
-    if ('radio' === type)
+    }
+    if ('radio' === type) {
         return 'radio';
-    if (['text', 'email', 'tel', 'url', 'search', 'password', ''].includes(type))
+    }
+    if (['text', 'email', 'tel', 'url', 'search', 'password', ''].includes(type)) {
         return 'textbox';
+    }
     return 'other';
 }
 function buildStep(el, action, args) {
     const { anchor, degraded } = anchorFor(el);
     const step = { tool: TOOL, anchor, action };
-    if (args !== undefined)
+    if (args !== undefined) {
         step.args = args;
-    if (degraded)
+    }
+    if (degraded) {
         step.degraded = true;
+    }
     const source = sourceFromDom(el);
     if (source !== undefined) {
         step.source =
@@ -82,13 +95,15 @@ export function compileRecording(name, steps, annotations, createdAt, startPath)
             continue;
         }
         if (ann.kind === AnnotationKind.SUCCESS_STATE) {
-            if (ann.signal !== undefined)
+            if (ann.signal !== undefined) {
                 success = { kind: PredicateKind.SIGNAL, name: ann.signal };
+            }
             continue;
         }
         const target = out.at(-1);
-        if (target === undefined)
+        if (target === undefined) {
             continue;
+        }
         if (ann.kind === AnnotationKind.ASSERT_SIGNAL && ann.signal !== undefined) {
             target.expect = alsoAssert(target.expect, { kind: PredicateKind.SIGNAL, name: ann.signal });
         }
@@ -100,25 +115,30 @@ export function compileRecording(name, steps, annotations, createdAt, startPath)
         }
     }
     const flow = { version: FLOW_FILE_VERSION, name, createdAt, steps: out };
-    if (startPath !== undefined && startPath.length > 0)
+    if (startPath !== undefined && startPath.length > 0) {
         flow.startPath = startPath;
-    if (dynamic.length > 0)
+    }
+    if (dynamic.length > 0) {
         flow.dynamic = dynamic;
-    if (success !== undefined)
+    }
+    if (success !== undefined) {
         flow.success = success;
+    }
     return flow;
 }
 function alsoAssert(existing, clause) {
-    if (existing === undefined)
+    if (existing === undefined) {
         return clause;
+    }
     if (existing.kind === PredicateKind.ALL_OF) {
         return { kind: PredicateKind.ALL_OF, predicates: [...existing.predicates, clause] };
     }
     return { kind: PredicateKind.ALL_OF, predicates: [existing, clause] };
 }
 function anchorToElement(anchor) {
-    if (anchor.kind === AnchorKind.TESTID)
+    if (anchor.kind === AnchorKind.TESTID) {
         return { testid: anchor.value };
+    }
     if (anchor.kind === AnchorKind.ROLE) {
         return anchor.name !== undefined
             ? { role: anchor.role, name: anchor.name }
@@ -148,10 +168,12 @@ class Recorder {
         return this.#steps.map((s) => ({ ...s }));
     }
     mount() {
-        if (this.#root !== undefined)
+        if (this.#root !== undefined) {
             return;
-        if ('undefined' === typeof document)
+        }
+        if ('undefined' === typeof document) {
             return;
+        }
         this.#buildToolbar();
         this.#installCapture();
     }
@@ -179,22 +201,26 @@ class Recorder {
     }
     #ignore(ev) {
         const target = ev.target;
-        if (!(target instanceof Element))
+        if (!(target instanceof Element)) {
             return undefined;
-        if (isReticleOverlay(target))
+        }
+        if (isReticleOverlay(target)) {
             return undefined;
+        }
         return target;
     }
     #onClick(ev) {
         const target = this.#ignore(ev);
-        if (target === undefined)
+        if (target === undefined) {
             return;
+        }
         if (this.#phase === RecorderPhase.ANNOTATING) {
             this.#captureAnnotationTarget(target);
             return;
         }
-        if (this.#phase !== RecorderPhase.RECORDING)
+        if (this.#phase !== RecorderPhase.RECORDING) {
             return;
+        }
         if ((target instanceof HTMLInputElement &&
             ('checkbox' === inputRole(target) || 'radio' === inputRole(target))) ||
             target instanceof HTMLSelectElement) {
@@ -204,19 +230,23 @@ class Recorder {
         this.#steps.push(buildStep(target, ActionType.CLICK));
     }
     #onInput(ev) {
-        if (this.#phase !== RecorderPhase.RECORDING)
+        if (this.#phase !== RecorderPhase.RECORDING) {
             return;
+        }
         const target = this.#ignore(ev);
-        if (target === undefined || !isTextbox(target))
+        if (target === undefined || !isTextbox(target)) {
             return;
+        }
         this.#pendingFill = { el: target, value: target.value };
     }
     #onChange(ev) {
-        if (this.#phase !== RecorderPhase.RECORDING)
+        if (this.#phase !== RecorderPhase.RECORDING) {
             return;
+        }
         const target = this.#ignore(ev);
-        if (target === undefined)
+        if (target === undefined) {
             return;
+        }
         if (target instanceof HTMLInputElement && 'checkbox' === inputRole(target)) {
             this.#flushPendingFill();
             this.#steps.push(buildStep(target, target.checked ? ActionType.CHECK : ActionType.UNCHECK));
@@ -238,31 +268,36 @@ class Recorder {
         }
     }
     #onSubmit(ev) {
-        if (this.#phase !== RecorderPhase.RECORDING)
+        if (this.#phase !== RecorderPhase.RECORDING) {
             return;
+        }
         const target = this.#ignore(ev);
-        if (target === undefined)
+        if (target === undefined) {
             return;
+        }
         this.#flushPendingFill();
         this.#steps.push(buildStep(target, ActionType.SUBMIT));
     }
     #flushPendingFill() {
         const pending = this.#pendingFill;
-        if (pending === undefined)
+        if (pending === undefined) {
             return;
+        }
         this.#pendingFill = undefined;
         const value = isSensitiveField(pending.el) ? REDACTED_VALUE : pending.value;
         this.#steps.push(buildStep(pending.el, ActionType.FILL, { value }));
     }
     #captureAnnotationTarget(target) {
         const draft = this.#draft;
-        if (draft === undefined)
+        if (draft === undefined) {
             return;
+        }
         const { anchor } = anchorFor(target);
         const ann = { kind: draft.kind, anchor };
         const signal = this.#selectedSignal();
-        if (signal !== undefined)
+        if (signal !== undefined) {
             ann.signal = signal;
+        }
         this.#annotations.push(ann);
         this.#draft = undefined;
         this.#setPhase(RecorderPhase.RECORDING);
@@ -270,8 +305,9 @@ class Recorder {
     }
     #confirmAnnotationOnPrior() {
         const draft = this.#draft;
-        if (draft === undefined)
+        if (draft === undefined) {
             return;
+        }
         const last = this.#steps.at(-1);
         if (last === undefined) {
             this.#draft = undefined;
@@ -281,8 +317,9 @@ class Recorder {
         }
         const ann = { kind: draft.kind, anchor: last.anchor };
         const signal = this.#selectedSignal();
-        if (signal !== undefined)
+        if (signal !== undefined) {
             ann.signal = signal;
+        }
         this.#annotations.push(ann);
         this.#draft = undefined;
         this.#setPhase(RecorderPhase.RECORDING);
@@ -312,8 +349,9 @@ class Recorder {
         this.#closeMenu();
     }
     #openAnnotateMenu() {
-        if (this.#phase !== RecorderPhase.RECORDING)
+        if (this.#phase !== RecorderPhase.RECORDING) {
             return;
+        }
         this.#setPhase(RecorderPhase.ANNOTATING);
         this.#setStatus(STATUS_ANNOTATE);
         this.#renderMenu();
@@ -357,12 +395,14 @@ class Recorder {
     }
     #renderMenu() {
         const menu = this.#menuEl;
-        if (menu === undefined)
+        if (menu === undefined) {
             return;
+        }
         menu.textContent = '';
         for (const kind of Object.values(AnnotationKind)) {
-            if (kind === AnnotationKind.INTENT)
+            if (kind === AnnotationKind.INTENT) {
                 continue;
+            }
             const item = document.createElement('button');
             item.setAttribute('data-reticle-annkind', kind);
             item.textContent = ANNOTATION_LABEL[kind];
@@ -374,8 +414,9 @@ class Recorder {
     #chooseKind(kind) {
         this.#draft = { kind };
         const menu = this.#menuEl;
-        if (menu === undefined)
+        if (menu === undefined) {
             return;
+        }
         if (NEEDS_SIGNAL.has(kind)) {
             const select = document.createElement('select');
             select.setAttribute('data-reticle-signal', '');
@@ -396,12 +437,14 @@ class Recorder {
         menu.appendChild(confirm);
     }
     #closeMenu() {
-        if (this.#menuEl !== undefined)
+        if (this.#menuEl !== undefined) {
             this.#menuEl.textContent = '';
+        }
     }
     #setStatus(text) {
-        if (this.#statusEl !== undefined)
+        if (this.#statusEl !== undefined) {
             this.#statusEl.textContent = text;
+        }
     }
     #nameField() {
         const input = this.#root?.querySelector('[data-reticle-name]');