move logic out from dispatcher

Author: yury-s

packages/playwright-core/src/server/dispatchers/pageDispatcher.ts

@@ -28,14 +28,9 @@ import { WebSocketRouteDispatcher } from './webSocketRouteDispatcher';
 import { SdkObject } from '../instrumentation';
 import { deserializeURLMatch, urlMatches } from '../../utils/isomorphic/urlMatch';
 import { PageAgentDispatcher } from './pageAgentDispatcher';
-import { Recorder, RecorderEvent } from '../recorder';
-import { ManualPromise } from '../../utils/isomorphic/manualPromise';
-import { eventsHelper } from '../utils/eventsHelper';
+import { Recorder } from '../recorder';
 import { isUnderTest } from '../utils/debug';
 
-import type { ElementInfo } from '@recorder/recorderTypes';
-import type { RegisteredListener } from '../utils/eventsHelper';
-
 import type { Artifact } from '../artifact';
 import type { BrowserContext } from '../browserContext';
 import type { CRCoverage } from '../chromium/crCoverage';
@@ -355,33 +350,8 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
     if (!this._page.browserContext._browser.options.headful && !isUnderTest())
       throw new Error('pickLocator() is only available in headed mode');
     const recorder = await Recorder.forContext(this._page.browserContext, { omitCallTracking: true, hideToolbar: true });
-    const selectorPromise = new ManualPromise<string>();
-    let recorderChangedState = false;
-    const onElementPicked = (elementInfo: ElementInfo) => {
-      selectorPromise.resolve(elementInfo.selector);
-    };
-    const onModeChanged = () => {
-      recorderChangedState = true;
-      selectorPromise.reject(new Error('Locator picking was cancelled'));
-    };
-    const onContextClosed = () => {
-      recorderChangedState = true;
-      selectorPromise.reject(new Error('Context was closed'));
-    };
-    recorder.setMode('inspecting');
-    const listeners: RegisteredListener[] = [
-      eventsHelper.addEventListener(recorder, RecorderEvent.ElementPicked, onElementPicked),
-      eventsHelper.addEventListener(recorder, RecorderEvent.ModeChanged, onModeChanged),
-      eventsHelper.addEventListener(recorder, RecorderEvent.ContextClosed, onContextClosed),
-    ];
-    try {
-      const selector = await progress.race(selectorPromise);
-      return { selector };
-    } finally {
-      eventsHelper.removeEventListeners(listeners);
-      if (!recorderChangedState)
-        recorder.setMode('none');
-    }
+    const selector = await recorder.pickLocator(progress);
+    return { selector };
   }
 
   async videoStart(params: channels.PageVideoStartParams, progress: Progress): Promise<channels.PageVideoStartResult> {

packages/playwright-core/src/server/recorder.ts

@@ -24,6 +24,8 @@ import { buildFullSelector, generateFrameSelector, metadataToCallLog } from './r
 import { locatorOrSelectorAsSelector } from '../utils/isomorphic/locatorParser';
 import { stringifySelector } from '../utils/isomorphic/selectorParser';
 import { ProgressController } from './progress';
+import { ManualPromise } from '../utils/isomorphic/manualPromise';
+
 import { RecorderSignalProcessor } from './recorder/recorderSignalProcessor';
 import * as rawRecorderSource from './../generated/pollingRecorderSource';
 import { eventsHelper, monotonicTime } from './../utils';
@@ -35,6 +37,7 @@ import type { Language } from './codegen/types';
 import type { CallMetadata, InstrumentationListener, SdkObject } from './instrumentation';
 import type { Point } from '../utils/isomorphic/types';
 import type { AriaTemplateNode } from '@isomorphic/ariaSnapshot';
+import type { Progress } from './progress';
 import type * as channels from '@protocol/channels';
 import type * as actions from '@recorder/actions';
 import type { CallLog, CallLogStatus, ElementInfo, Mode, OverlayState, Source, UIState } from '@recorder/recorderTypes';
@@ -262,6 +265,38 @@ export class Recorder extends EventEmitter<RecorderEventMap> implements Instrume
     this._refreshOverlay();
   }
 
+  async pickLocator(progress: Progress): Promise<string> {
+    const selectorPromise = new ManualPromise<string>();
+    let recorderChangedState = false;
+    const onElementPicked = (elementInfo: ElementInfo) => {
+      selectorPromise.resolve(elementInfo.selector);
+    };
+    const onModeChanged = () => {
+      recorderChangedState = true;
+      selectorPromise.reject(new Error('Locator picking was cancelled'));
+    };
+    const onContextClosed = () => {
+      recorderChangedState = true;
+      selectorPromise.reject(new Error('Context was closed'));
+    };
+    // Register listeners after setMode() to avoid consuming the ModeChanged
+    // event that fires synchronously from our own setMode('inspecting') call.
+    this.setMode('inspecting');
+    const listeners: RegisteredListener[] = [
+      eventsHelper.addEventListener(this, RecorderEvent.ElementPicked, onElementPicked),
+      eventsHelper.addEventListener(this, RecorderEvent.ModeChanged, onModeChanged),
+      eventsHelper.addEventListener(this, RecorderEvent.ContextClosed, onContextClosed),
+    ];
+    try {
+      return await progress.race(selectorPromise);
+    } finally {
+      // Remove listeners before setMode('none') to avoid triggering onModeChanged.
+      eventsHelper.removeEventListeners(listeners);
+      if (!recorderChangedState)
+        this.setMode('none');
+    }
+  }
+
   url(): string | undefined {
     const page = this._context.pages()[0];
     return page?.mainFrame().url();