screenci 0.0.18 → 0.0.20

package/dist/src/instrument.js

@@ -1,6 +1,7 @@
 import { logger } from './logger.js';
-import { isInsideAutoZoom, getZoomDuration, getPostZoomInOutDelay, getLastZoomLocation, setLastZoomLocation, } from './autoZoom.js';
+import { isInsideAutoZoom, getZoomDuration, getZoomEasing, getPostZoomInOutDelay, getLastZoomLocation, setLastZoomLocation, } from './autoZoom.js';
 import { isInsideHide } from './hide.js';
+import { ZoomScrollHandler } from './scroll.js';
 let activeClickRecorder = null;
 export function setActiveClickRecorder(recorder) {
     activeClickRecorder = recorder;
@@ -106,6 +107,18 @@ const FRAME_LOCATOR_SELF_RETURN_METHODS = [
     'last',
     'nth',
 ];
+function canUseDirectMouseClickAfterScroll(options) {
+    if (!options)
+        return true;
+    const unsupported = [
+        'force',
+        'modifiers',
+        'noWaitAfter',
+        'timeout',
+        'trial',
+    ];
+    return unsupported.every((key) => options[key] === undefined);
+}
 // Per-page storage for the most recently captured DOM click event data.
 // Reset to null before each instrumented click; set by the exposeFunction callback.
 const pendingClickData = new WeakMap();
@@ -145,43 +158,10 @@ export function scrollIntoViewAsync(locator, options = {}) {
         }));
     }), { behavior, block, timeout, postScrollTimeout });
 }
-/**
- * Scrolls the locator into view only if it is at least partially outside the
- * viewport, then returns the (possibly updated) bounding box as an ElementRect.
- * Returns undefined if the bounding box cannot be determined.
- */
-async function scrollIntoViewIfNeeded(locator, block = 'center') {
-    const page = locator.page();
-    const bb = await locator.boundingBox();
-    if (!bb)
-        return undefined;
-    const viewportSize = page.viewportSize();
-    if (viewportSize) {
-        const isFullyInViewport = bb.x >= 0 &&
-            bb.y >= 0 &&
-            bb.x + bb.width <= viewportSize.width &&
-            bb.y + bb.height <= viewportSize.height;
-        if (!isFullyInViewport) {
-            await scrollIntoViewAsync(locator, { block });
-            const newBb = await locator.boundingBox();
-            if (newBb)
-                return {
-                    x: newBb.x,
-                    y: newBb.y,
-                    width: newBb.width,
-                    height: newBb.height,
-                };
-        }
-    }
-    else {
-        logger.warn('[screenci] Unable to determine viewport size; skipping auto-scroll check.');
-    }
-    return { x: bb.x, y: bb.y, width: bb.width, height: bb.height };
-}
 const CURSOR_STEP_MS = 1000 / 60;
 /**
  * Physically moves the mouse from its current tracked position to (targetX,
- * targetY) over `duration` ms using `easing`, then returns a MouseMoveEvent
+ * targetY) over `duration` ms using `easing`, then returns a FocusChangeEvent
  * whose startMs is `eventStartMs` (which may predate this call, e.g. when a
  * scroll consumed part of moveDuration).  When duration ≤ 0 the cursor is
  * snapped directly to the target with a single move call.
@@ -209,32 +189,40 @@ async function animateMouseMove(page, mouseMoveInternal, targetX, targetY, durat
     mousePositions.set(page, { x: targetX, y: targetY });
     const endMs = Date.now();
     return {
-        type: 'mouseMove',
+        type: 'focusChange',
         startMs: eventStartMs,
         endMs,
-        duration: Math.max(0, endMs - eventStartMs),
         x: targetX,
         y: targetY,
         easing,
         ...(elementRect !== undefined ? { elementRect } : {}),
     };
 }
+function resolveMoveStartMs(scrollResult, fallbackStartMs) {
+    return scrollResult.shouldScrollBeforeMouseMove
+        ? scrollResult.scrollEndMs
+        : fallbackStartMs;
+}
+function resolveMoveDuration(scrollResult, resolvedDuration) {
+    return scrollResult.shouldScrollBeforeMouseMove
+        ? resolvedDuration
+        : Math.max(0, resolvedDuration - scrollResult.scrollElapsedMs);
+}
 /**
  * Performs all click mechanics (scroll-check, zoom handling, cursor animation,
  * click, post-click move) and returns the collected timing/position data.
  * Returns null if coordinates could not be determined (no DOM event and no
  * locator bounding box).
  */
-async function performClickActions(locator, doClick, clickOptions, position, moveDuration, moveSpeed, beforeClickPause = CLICK_DURATION_MS / 2, moveEasing = 'ease-in-out', postClickPause = CLICK_DURATION_MS / 2, postClickMove) {
+async function performClickActions(locator, doClick, clickOptions, autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause = CLICK_DURATION_MS / 2, moveEasing = 'ease-in-out', postClickPause = CLICK_DURATION_MS / 2, postClickMove) {
     const page = locator.page();
     pendingClickData.set(page, null);
     const halfClickDuration = CLICK_DURATION_MS / 2;
     const mouseMoveInternal = originalMouseMoves.get(page) ?? page.mouse.move.bind(page.mouse);
-    // Capture before any setLastZoomLocation call changes the state.
-    const isFirstAutoZoomEvent = isInsideAutoZoom() && getLastZoomLocation() === null;
     const moveStartTime = Date.now();
-    const locatorRect = await scrollIntoViewIfNeeded(locator, isInsideAutoZoom() && getLastZoomLocation() !== null ? 'nearest' : 'center');
-    const scrollElapsedMs = Date.now() - moveStartTime;
+    const scrollResult = await new ZoomScrollHandler(autoZoomOptions).scroll(locator);
+    const { locatorRect, scrollElapsedMs } = scrollResult;
+    const isFirstAutoZoomEvent = scrollResult.isFirstAutoZoomInteraction;
     if (!locatorRect) {
         logger.warn('[screenci] Unable to get locator bounding box; skipping auto-scroll check.');
     }
@@ -270,11 +258,6 @@ async function performClickActions(locator, doClick, clickOptions, position, mov
                 y: locatorRect.height / 2,
             }
             : undefined;
-    // No physical mouse movement happens during the scroll.  moveStartTime is
-    // captured before the scroll so the recorded event spans scroll-start →
-    // animation-end, making the cursor appear to move during the scroll in the
-    // video.  After the scroll, the remaining duration drives the physical easing
-    // animation via the shared helper.
     if (targetPos && locatorRect) {
         const targetX = locatorRect.x + targetPos.x;
         const targetY = locatorRect.y + targetPos.y;
@@ -284,19 +267,40 @@ async function performClickActions(locator, doClick, clickOptions, position, mov
             defaultDuration: 1000,
             context: 'click move',
         });
-        const effectiveDuration = Math.max(0, resolvedDuration - scrollElapsedMs);
-        innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, effectiveDuration, moveEasing, moveStartTime, locatorRect));
+        if (scrollElapsedMs > 0 && !scrollResult.shouldScrollBeforeMouseMove) {
+            await mouseMoveInternal(targetX, targetY);
+            mousePositions.set(page, { x: targetX, y: targetY });
+            const remainingDuration = Math.max(0, resolvedDuration - scrollElapsedMs);
+            if (remainingDuration > 0) {
+                await new Promise((resolve) => setTimeout(resolve, remainingDuration));
+            }
+            const moveEndTime = Date.now();
+            innerEvents.push({
+                type: 'focusChange',
+                startMs: moveStartTime,
+                endMs: moveEndTime,
+                x: targetX,
+                y: targetY,
+                easing: moveEasing,
+                focusOnly: false,
+                elementRect: locatorRect,
+            });
+        }
+        else {
+            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, resolveMoveDuration(scrollResult, resolvedDuration), moveEasing, resolveMoveStartMs(scrollResult, moveStartTime), locatorRect));
+        }
     }
     else {
         assertDurationOrSpeed(moveDuration, moveSpeed, 'click move');
-        const remainingMs = Math.max(0, (moveSpeed === undefined ? (moveDuration ?? 1000) : 0) - scrollElapsedMs);
+        const remainingMs = Math.max(0, moveSpeed === undefined ? (moveDuration ?? 1000) : 0);
         if (remainingMs > 0) {
             await new Promise((resolve) => setTimeout(resolve, remainingMs));
         }
     }
+    const zoomDur = isInsideAutoZoom() && locatorRect ? (getZoomDuration() ?? 0) : 0;
     const effectiveBeforeClickPause = isFirstAutoZoomEvent
-        ? Math.max(beforeClickPause, getPostZoomInOutDelay() ?? 0)
-        : beforeClickPause;
+        ? Math.max(beforeClickPause, getPostZoomInOutDelay() ?? 0, zoomDur)
+        : Math.max(beforeClickPause, zoomDur);
     await new Promise((resolve) => setTimeout(resolve, effectiveBeforeClickPause));
     await new Promise((resolve) => setTimeout(resolve, halfClickDuration));
     // Note click can take some time, but better to show it before than after
@@ -308,11 +312,47 @@ async function performClickActions(locator, doClick, clickOptions, position, mov
         endMs: clickTime,
         easing: 'ease-in-out',
     });
-    await doClick({
-        ...clickOptions,
-        ...(targetPos ? { position: targetPos } : {}),
-    });
+    if (scrollElapsedMs > 0 &&
+        targetPos &&
+        locatorRect &&
+        canUseDirectMouseClickAfterScroll(clickOptions)) {
+        const mouseClickOptions = {
+            ...(clickOptions?.button !== undefined
+                ? { button: clickOptions.button }
+                : {}),
+            ...(clickOptions?.clickCount !== undefined
+                ? { clickCount: clickOptions.clickCount }
+                : {}),
+        };
+        await page.mouse.down(mouseClickOptions);
+        if (clickOptions?.delay) {
+            await new Promise((resolve) => setTimeout(resolve, clickOptions.delay));
+        }
+        await page.mouse.up(mouseClickOptions);
+    }
+    else {
+        await doClick({
+            ...clickOptions,
+            ...(targetPos ? { position: targetPos } : {}),
+        });
+    }
     const domClickData = pendingClickData.get(page);
+    if (domClickData) {
+        const lastMouseMoveIndex = innerEvents.findIndex((e) => e.type === 'focusChange' || e.type === 'mouseMove');
+        if (lastMouseMoveIndex !== -1) {
+            const existingMove = innerEvents[lastMouseMoveIndex];
+            if (existingMove?.type === 'focusChange' ||
+                existingMove?.type === 'mouseMove') {
+                innerEvents[lastMouseMoveIndex] = {
+                    ...existingMove,
+                    x: domClickData.x,
+                    y: domClickData.y,
+                    elementRect: domClickData.targetRect,
+                };
+            }
+        }
+        mousePositions.set(page, { x: domClickData.x, y: domClickData.y });
+    }
     const mouseUpEnd = Date.now() + halfClickDuration;
     innerEvents.push({
         type: 'mouseUp',
@@ -386,26 +426,23 @@ async function performClickActions(locator, doClick, clickOptions, position, mov
             }
             const postClickMoveEndMs = Date.now();
             innerEvents.push({
-                type: 'mouseMove',
+                type: 'focusChange',
                 startMs: postClickMoveStartMs,
                 endMs: postClickMoveEndMs,
-                duration: Math.max(0, postClickMoveEndMs - postClickMoveStartMs),
                 x: targetX,
                 y: targetY,
                 easing,
-                zoomFollow: false,
             });
             mousePositions.set(page, { x: targetX, y: targetY });
         }
     }
     let elementRect;
-    if (locatorRect) {
-        elementRect = locatorRect;
-    }
-    else if (domClickData) {
-        console.warn('[screenci] using DOM click data as fallback for elementRect');
+    if (domClickData) {
         elementRect = domClickData.targetRect;
     }
+    else if (locatorRect) {
+        elementRect = locatorRect ?? undefined;
+    }
     if (elementRect) {
         return {
             elementRect,
@@ -417,15 +454,17 @@ async function performClickActions(locator, doClick, clickOptions, position, mov
         return null;
     }
 }
-async function prepareAutoZoomForLocator(locator, eventType) {
-    const hadPreviousZoomLocation = getLastZoomLocation() !== null;
-    const zoomDur = isInsideAutoZoom() ? (getZoomDuration() ?? 0) : 0;
-    if (isInsideAutoZoom() && hadPreviousZoomLocation && zoomDur > 0) {
+async function prepareAutoZoomForLocator(locator, eventType, autoZoomOptions) {
+    const scrollHandler = new ZoomScrollHandler(autoZoomOptions);
+    const zoomDur = scrollHandler.isInsideAutoZoom ? (getZoomDuration() ?? 0) : 0;
+    if (scrollHandler.isInsideAutoZoom &&
+        scrollHandler.hadPreviousZoomLocation &&
+        zoomDur > 0) {
         await sleep(zoomDur);
     }
-    const locatorRect = await scrollIntoViewIfNeeded(locator, hadPreviousZoomLocation ? 'nearest' : 'center');
-    if (isInsideAutoZoom() && locatorRect) {
-        if (!hadPreviousZoomLocation && zoomDur > 0) {
+    const { locatorRect, isFirstAutoZoomInteraction } = await scrollHandler.scroll(locator);
+    if (scrollHandler.isInsideAutoZoom && locatorRect) {
+        if (isFirstAutoZoomInteraction && zoomDur > 0) {
             await sleep(zoomDur);
         }
         setLastZoomLocation({
@@ -435,25 +474,36 @@ async function prepareAutoZoomForLocator(locator, eventType) {
             eventType,
         });
     }
-    return locatorRect;
+    return { locatorRect, isFirstAutoZoomInteraction };
 }
-async function performSimpleAction(locator, doAction, options, subType, clickOpt, position, recordMousePress = subType === 'tap') {
+async function performSimpleAction(locator, doAction, options, subType, clickOpt, autoZoomOptions, position, recordMousePress = subType === 'tap') {
     await sleep(PRE_ACTION_SLEEP);
     let innerEvents = [];
     let elementRect;
     if (clickOpt !== undefined) {
         const { moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove, } = clickOpt;
-        const clickActionResult = await performClickActions(locator, doAction, {}, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
+        const clickActionResult = await performClickActions(locator, doAction, {}, autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
         innerEvents = clickActionResult?.innerEvents ?? [];
         elementRect = clickActionResult?.elementRect;
     }
     else {
-        const isFirstAutoZoomEvent = isInsideAutoZoom() && getLastZoomLocation() === null;
-        const locatorRect = await prepareAutoZoomForLocator(locator, 'fill');
-        if (isFirstAutoZoomEvent) {
-            const postDelay = getPostZoomInOutDelay() ?? 0;
-            if (postDelay > 0)
-                await sleep(postDelay);
+        const locatorRect = await locator.boundingBox();
+        if (isInsideAutoZoom() && locatorRect) {
+            const focusStart = Date.now();
+            const zoomDur = getZoomDuration() ?? 0;
+            if (zoomDur > 0)
+                await sleep(zoomDur);
+            const focusEnd = Date.now();
+            innerEvents.push({
+                type: 'focusChange',
+                startMs: focusStart,
+                endMs: focusEnd,
+                x: locatorRect.x + locatorRect.width / 2,
+                y: locatorRect.y + locatorRect.height / 2,
+                easing: getZoomEasing() ?? 'ease-in-out',
+                focusOnly: true,
+                elementRect: locatorRect,
+            });
         }
         const targetPosition = locatorRect
             ? {
@@ -467,7 +517,7 @@ async function performSimpleAction(locator, doAction, options, subType, clickOpt
             ...(targetPosition ? { position: targetPosition } : {}),
         });
         const endTime = Date.now();
-        elementRect = locatorRect;
+        elementRect = locatorRect ?? undefined;
         if (recordMousePress) {
             const midTime = (startTime + endTime) / 2;
             innerEvents.push({
@@ -494,9 +544,9 @@ async function performSimpleAction(locator, doAction, options, subType, clickOpt
         activeClickRecorder.addInput(subType, elementRect, innerEvents);
     }
 }
-async function recordedClick(locator, doClick, clickOptions, position, moveDuration, moveSpeed, beforeClickPause = CLICK_DURATION_MS / 2, moveEasing = 'ease-in-out', postClickPause = CLICK_DURATION_MS / 2, postClickMove) {
+async function recordedClick(locator, doClick, clickOptions, autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause = CLICK_DURATION_MS / 2, moveEasing = 'ease-in-out', postClickPause = CLICK_DURATION_MS / 2, postClickMove) {
     await sleep(PRE_ACTION_SLEEP);
-    const result = await performClickActions(locator, doClick, clickOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
+    const result = await performClickActions(locator, doClick, clickOptions, autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
     const clickWaitStart = Date.now();
     await sleep(POST_ACTION_SLEEP);
     const clickWaitEnd = Date.now();
@@ -536,7 +586,7 @@ export function instrumentLocator(locator) {
     instrumented.add(locator);
     const originalClick = locator.click.bind(locator);
     locator.click = async (options) => {
-        const { moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove, position, steps: _steps, ...clickOptions } = options ?? {};
+        const { moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove, autoZoomOptions, position, steps: _steps, ...clickOptions } = options ?? {};
         if (isInsideHide()) {
             return originalClick({
                 ...clickOptions,
@@ -544,11 +594,11 @@ export function instrumentLocator(locator) {
             });
         }
         assertDurationOrSpeed(moveDuration, moveSpeed, 'click move');
-        return recordedClick(locator, (options) => originalClick(options), clickOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
+        return recordedClick(locator, (options) => originalClick(options), clickOptions, autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
     };
     const originalPressSequentially = locator.pressSequentially.bind(locator);
     locator.pressSequentially = async (text, options) => {
-        const { click: _click, hideMouse: _hideMouse, position: _position, ...pressOptions } = options ?? {};
+        const { click: _click, autoZoomOptions, hideMouse: _hideMouse, position: _position, ...pressOptions } = options ?? {};
         if (isInsideHide()) {
             return originalPressSequentially(text, pressOptions);
         }
@@ -560,19 +610,24 @@ export function instrumentLocator(locator) {
             const clickOpt = options.click;
             const position = options.position;
             const { moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove, ...clickOptions } = clickOpt;
-            const clickActionResult = await performClickActions(locator, (options) => originalClick(options), clickOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
+            const clickActionResult = await performClickActions(locator, (options) => originalClick(options), clickOptions, options.autoZoomOptions, position, moveDuration, moveSpeed, beforeClickPause, moveEasing, postClickPause, postClickMove);
             innerEvents.push(...(clickActionResult?.innerEvents ?? []));
             elementRect = clickActionResult?.elementRect;
         }
         else {
-            const isFirstAutoZoomEvent = isInsideAutoZoom() && getLastZoomLocation() === null;
-            const locatorRect = await prepareAutoZoomForLocator(locator, 'fill');
-            if (isFirstAutoZoomEvent) {
+            const { locatorRect, isFirstAutoZoomInteraction } = await prepareAutoZoomForLocator(locator, 'fill', options?.autoZoomOptions);
+            if (isFirstAutoZoomInteraction) {
                 const postDelay = getPostZoomInOutDelay() ?? 0;
                 if (postDelay > 0)
                     await sleep(postDelay);
             }
             elementRect = locatorRect;
+            if (isInsideAutoZoom() && locatorRect) {
+                const zoomDur = getZoomDuration() ?? 0;
+                if (zoomDur > 0) {
+                    await sleep(zoomDur);
+                }
+            }
         }
         // Hide cursor while typing (will be shown again on next mouse move)
         const page = locator.page();
@@ -605,47 +660,176 @@ export function instrumentLocator(locator) {
     const originalFill = locator.fill.bind(locator);
     locator.fill = async (value, options) => {
         if (isInsideHide()) {
-            const { duration: _duration, click: _click, position: _position, hideMouse: _hideMouse, ...fillOptions } = options ?? {};
+            const { duration: _duration, click: _click, position: _position, hideMouse: _hideMouse, autoZoomOptions: _autoZoomOptions, ...fillOptions } = options ?? {};
             return originalFill(value, fillOptions);
         }
-        const duration = options?.duration ?? 1000;
+        if (options?.click !== undefined) {
+            await sleep(PRE_ACTION_SLEEP);
+            const clickActionResult = await performClickActions(locator, (clickOptions) => originalClick(clickOptions), {}, options.autoZoomOptions, options.position, options.click.moveDuration, options.click.moveSpeed, options.click.beforeClickPause, options.click.moveEasing, options.click.postClickPause, options.click.postClickMove);
+            const innerEvents = [...(clickActionResult?.innerEvents ?? [])];
+            const elementRect = clickActionResult?.elementRect;
+            const page = locator.page();
+            if (options.hideMouse === true) {
+                const cursorVisible = mouseVisibilities.get(page) ?? true;
+                if (cursorVisible) {
+                    mouseVisibilities.set(page, false);
+                    const hideMs = Date.now();
+                    innerEvents.push({
+                        type: 'mouseHide',
+                        startMs: hideMs,
+                        endMs: hideMs,
+                    });
+                }
+            }
+            await locator.evaluate((element) => {
+                if (element instanceof HTMLInputElement ||
+                    element instanceof HTMLTextAreaElement) {
+                    element.focus();
+                    element.select();
+                    return;
+                }
+                if (element instanceof HTMLElement && element.isContentEditable) {
+                    element.focus();
+                    const selection = element.ownerDocument.getSelection();
+                    if (!selection)
+                        return;
+                    const range = element.ownerDocument.createRange();
+                    range.selectNodeContents(element);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            });
+            const duration = options.duration ?? 1000;
+            const delay = value.length > 0 ? duration / value.length : 0;
+            await page.keyboard.type(value, { delay });
+            const fillWaitStart = Date.now();
+            await sleep(POST_ACTION_SLEEP);
+            const fillWaitEnd = Date.now();
+            innerEvents.push({
+                type: 'mouseWait',
+                startMs: fillWaitStart,
+                endMs: fillWaitEnd,
+            });
+            if (activeClickRecorder) {
+                activeClickRecorder.addInput('pressSequentially', elementRect, innerEvents);
+            }
+            return;
+        }
+        await sleep(PRE_ACTION_SLEEP);
+        const page = locator.page();
+        const innerEvents = [];
+        const fillOptions = options ?? {};
+        const locatorRect = await locator.boundingBox();
+        let elementRect = locatorRect ?? undefined;
+        if (fillOptions.hideMouse === true) {
+            const cursorVisible = mouseVisibilities.get(page) ?? true;
+            if (cursorVisible) {
+                mouseVisibilities.set(page, false);
+                const hideMs = Date.now();
+                innerEvents.push({
+                    type: 'mouseHide',
+                    startMs: hideMs,
+                    endMs: hideMs,
+                });
+            }
+        }
+        if (isInsideAutoZoom() && locatorRect) {
+            const correctedScrollResult = await new ZoomScrollHandler(options?.autoZoomOptions).scroll(locator);
+            const correctedRect = correctedScrollResult.locatorRect ?? locatorRect;
+            const focusStart = Date.now();
+            await locator.evaluate((element) => {
+                if (element instanceof HTMLInputElement ||
+                    element instanceof HTMLTextAreaElement) {
+                    element.focus();
+                    element.select();
+                    return;
+                }
+                if (element instanceof HTMLElement && element.isContentEditable) {
+                    element.focus();
+                    const selection = element.ownerDocument.getSelection();
+                    if (!selection)
+                        return;
+                    const range = element.ownerDocument.createRange();
+                    range.selectNodeContents(element);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            });
+            const focusEnd = Date.now();
+            innerEvents.push({
+                type: 'focusChange',
+                startMs: focusStart,
+                endMs: focusEnd,
+                x: correctedRect.x + correctedRect.width / 2,
+                y: correctedRect.y + correctedRect.height / 2,
+                easing: getZoomEasing() ?? 'ease-in-out',
+                focusOnly: true,
+                elementRect: correctedRect,
+            });
+            elementRect = correctedRect;
+        }
+        else {
+            await locator.evaluate((element) => {
+                if (element instanceof HTMLInputElement ||
+                    element instanceof HTMLTextAreaElement) {
+                    element.focus();
+                    element.select();
+                    return;
+                }
+                if (element instanceof HTMLElement && element.isContentEditable) {
+                    element.focus();
+                    const selection = element.ownerDocument.getSelection();
+                    if (!selection)
+                        return;
+                    const range = element.ownerDocument.createRange();
+                    range.selectNodeContents(element);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+            });
+        }
+        const duration = fillOptions.duration ?? 1000;
         const delay = value.length > 0 ? duration / value.length : 0;
-        const pressOptions = { delay };
-        if (options?.timeout !== undefined)
-            pressOptions.timeout = options.timeout;
-        if (options?.click !== undefined)
-            pressOptions.click = options.click;
-        if (options?.position !== undefined)
-            pressOptions.position = options.position;
-        if (options?.hideMouse !== undefined)
-            pressOptions.hideMouse = options.hideMouse;
-        return locator.pressSequentially(value, pressOptions);
+        await page.keyboard.type(value, { delay });
+        const fillWaitStart = Date.now();
+        await sleep(POST_ACTION_SLEEP);
+        const fillWaitEnd = Date.now();
+        innerEvents.push({
+            type: 'mouseWait',
+            startMs: fillWaitStart,
+            endMs: fillWaitEnd,
+        });
+        if (activeClickRecorder &&
+            (isInsideAutoZoom() || fillOptions.hideMouse === true)) {
+            activeClickRecorder.addInput('pressSequentially', elementRect, innerEvents);
+        }
+        return;
     };
     const originalTap = locator.tap.bind(locator);
     locator.tap = async (options) => {
         const clickOpt = options?.click;
-        const { click: _click, position, ...tapOpts } = options ?? {};
-        return performSimpleAction(locator, (options) => originalTap(options), tapOpts, 'tap', clickOpt, position);
+        const { click: _click, position, autoZoomOptions, ...tapOpts } = options ?? {};
+        return performSimpleAction(locator, (options) => originalTap(options), tapOpts, 'tap', clickOpt, autoZoomOptions, position);
     };
     const originalCheck = locator.check.bind(locator);
     locator.check = async (options) => {
         const clickOpt = options?.click;
         const position = options?.position;
-        const { click: _click, ...checkOpts } = options ?? {};
+        const { click: _click, autoZoomOptions, ...checkOpts } = options ?? {};
         if (isInsideHide()) {
             return originalCheck(checkOpts);
         }
-        return performSimpleAction(locator, (options) => originalCheck(options), checkOpts, 'check', clickOpt, position, false);
+        return performSimpleAction(locator, (options) => originalCheck(options), checkOpts, 'check', clickOpt, autoZoomOptions, position, false);
     };
     const originalUncheck = locator.uncheck.bind(locator);
     locator.uncheck = async (options) => {
         const clickOpt = options?.click;
         const position = options?.position;
-        const { click: _click, ...uncheckOpts } = options ?? {};
+        const { click: _click, autoZoomOptions, ...uncheckOpts } = options ?? {};
         if (isInsideHide()) {
             return originalUncheck(uncheckOpts);
         }
-        return performSimpleAction(locator, (options) => originalUncheck(options), uncheckOpts, 'uncheck', clickOpt, position, false);
+        return performSimpleAction(locator, (options) => originalUncheck(options), uncheckOpts, 'uncheck', clickOpt, autoZoomOptions, position, false);
     };
     locator.setChecked = async (checked, options) => {
         if (checked) {
@@ -658,14 +842,14 @@ export function instrumentLocator(locator) {
     const originalSelectOption = locator.selectOption.bind(locator);
     locator.selectOption = async (values, options) => {
         const clickOpt = options?.click;
-        const { click: _click, position, ...selectOpts } = options ?? {};
+        const { click: _click, position, autoZoomOptions, ...selectOpts } = options ?? {};
         if (isInsideHide()) {
             return originalSelectOption(values, selectOpts);
         }
         let result = [];
         await performSimpleAction(locator, (options) => originalSelectOption(values, options).then((res) => {
             result = res;
-        }), selectOpts, 'select', clickOpt, position, false);
+        }), selectOpts, 'select', clickOpt, autoZoomOptions, position, false);
         return result;
     };
     const originalHover = locator.hover.bind(locator);
@@ -675,10 +859,8 @@ export function instrumentLocator(locator) {
         const page = locator.page();
         const mouseMoveInternal = originalMouseMoves.get(page) ?? page.mouse.move.bind(page.mouse);
         const moveStartTime = Date.now();
-        const locatorRect = await scrollIntoViewIfNeeded(locator, isInsideAutoZoom() && getLastZoomLocation() !== null
-            ? 'nearest'
-            : 'center');
-        const scrollElapsedMs = Date.now() - moveStartTime;
+        const scrollResult = await new ZoomScrollHandler().scroll(locator);
+        const { locatorRect } = scrollResult;
         const innerEvents = [];
         const targetPos = position ??
             (locatorRect
@@ -693,8 +875,7 @@ export function instrumentLocator(locator) {
                 defaultDuration: 1000,
                 context: 'hover move',
             });
-            const effectiveDuration = Math.max(0, resolvedDuration - scrollElapsedMs);
-            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, effectiveDuration, moveEasing, moveStartTime, locatorRect));
+            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, resolveMoveDuration(scrollResult, resolvedDuration), moveEasing, resolveMoveStartMs(scrollResult, moveStartTime), locatorRect));
         }
         const waitStartMs = Date.now();
         await originalHover({
@@ -721,10 +902,8 @@ export function instrumentLocator(locator) {
         const page = locator.page();
         const mouseMoveInternal = originalMouseMoves.get(page) ?? page.mouse.move.bind(page.mouse);
         const moveStartTime = Date.now();
-        const locatorRect = await scrollIntoViewIfNeeded(locator, isInsideAutoZoom() && getLastZoomLocation() !== null
-            ? 'nearest'
-            : 'center');
-        const scrollElapsedMs = Date.now() - moveStartTime;
+        const scrollResult = await new ZoomScrollHandler().scroll(locator);
+        const { locatorRect } = scrollResult;
         const innerEvents = [];
         const targetPos = locatorRect
             ? { x: locatorRect.width / 2, y: locatorRect.height / 2 }
@@ -738,8 +917,7 @@ export function instrumentLocator(locator) {
                 defaultDuration: 1000,
                 context: 'selectText move',
             });
-            const effectiveDuration = Math.max(0, resolvedDuration - scrollElapsedMs);
-            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, effectiveDuration, moveEasing, moveStartTime, locatorRect));
+            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, targetX, targetY, resolveMoveDuration(scrollResult, resolvedDuration), moveEasing, resolveMoveStartMs(scrollResult, moveStartTime), locatorRect));
         }
         await sleep(beforeClickPause);
         await originalSelectText(selectOpts);
@@ -778,10 +956,8 @@ export function instrumentLocator(locator) {
         const page = locator.page();
         const mouseMoveInternal = originalMouseMoves.get(page) ?? page.mouse.move.bind(page.mouse);
         const moveStartTime = Date.now();
-        const sourceRect = await scrollIntoViewIfNeeded(locator, isInsideAutoZoom() && getLastZoomLocation() !== null
-            ? 'nearest'
-            : 'center');
-        const scrollElapsedMs = Date.now() - moveStartTime;
+        const scrollResult = await new ZoomScrollHandler().scroll(locator);
+        const { locatorRect: sourceRect } = scrollResult;
         const targetBb = await target.boundingBox();
         const targetRect = targetBb
             ? {
@@ -810,8 +986,7 @@ export function instrumentLocator(locator) {
                 defaultDuration: 1000,
                 context: 'dragTo move',
             });
-            const effectiveDuration = Math.max(0, resolvedDuration - scrollElapsedMs);
-            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, toX, toY, effectiveDuration, moveEasing, moveStartTime, sourceRect));
+            innerEvents.push(await animateMouseMove(page, mouseMoveInternal, toX, toY, resolveMoveDuration(scrollResult, resolvedDuration), moveEasing, resolveMoveStartMs(scrollResult, moveStartTime), sourceRect));
         }
         // 2. preDragPause + mouseDown
         await sleep(preDragPause);
@@ -953,15 +1128,14 @@ export async function instrumentPage(page) {
                 activeClickRecorder.addInput('mouseShow', undefined, [showEvent]);
             }
             const moveEvent = {
-                type: 'mouseMove',
+                type: 'focusChange',
                 startMs,
                 endMs,
-                duration,
                 x,
                 y,
                 ...(duration > 0 ? { easing } : {}),
             };
-            activeClickRecorder.addInput('mouseMove', undefined, [moveEvent]);
+            activeClickRecorder.addInput('focusChange', undefined, [moveEvent]);
         }
     };
     mouseVisibilities.set(page, true);