@checkly/playwright-core 1.48.22 → 1.51.11-beta.2

package/lib/server/recorder/recorderApp.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RecorderApp = exports.EmptyRecorderApp = void 0;
+var _events = require("events");
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
-var _progress = require("../progress");
-var _events = require("events");
-var _instrumentation = require("../instrumentation");
-var _utils = require("../../utils");
+var _debug = require("../utils/debug");
 var _utilsBundle = require("../../utilsBundle");
+var _instrumentation = require("../instrumentation");
 var _launchApp = require("../launchApp");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _progress = require("../progress");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -38,9 +38,9 @@ class EmptyRecorderApp extends _events.EventEmitter {
   async setPaused(paused) {}
   async setMode(mode) {}
   async setRunningFile(file) {}
-  async setSelector(selector, userGesture) {}
+  async elementPicked(elementInfo, userGesture) {}
   async updateCallLogs(callLogs) {}
-  async setSources(sources) {}
+  async setSources(sources, primaryPageURL) {}
   async setActions(actions, sources) {}
 }
 exports.EmptyRecorderApp = EmptyRecorderApp;
@@ -87,7 +87,7 @@ class RecorderApp extends _events.EventEmitter {
       }).catch(() => {});
     });
     const mainFrame = this._page.mainFrame();
-    await mainFrame.goto((0, _instrumentation.serverSideCallMetadata)(), 'https://playwright/index.html');
+    await mainFrame.goto((0, _instrumentation.serverSideCallMetadata)(), process.env.PW_HMR ? 'http://localhost:44225' : 'https://playwright/index.html');
   }
   static factory(context) {
     return async recorder => {
@@ -117,8 +117,8 @@ class RecorderApp extends _events.EventEmitter {
       },
       persistentContextOptions: {
         noDefaultViewport: true,
-        headless: !!process.env.PWTEST_CLI_HEADLESS || (0, _utils.isUnderTest)() && !headed,
-        useWebSocket: (0, _utils.isUnderTest)(),
+        headless: !!process.env.PWTEST_CLI_HEADLESS || (0, _debug.isUnderTest)() && !headed,
+        useWebSocket: (0, _debug.isUnderTest)(),
         handleSIGINT: recorder.handleSIGINT,
         executablePath: inspectedContext._browser.options.isChromium ? inspectedContext._browser.options.customExecutablePath : undefined
       }
@@ -152,12 +152,18 @@ class RecorderApp extends _events.EventEmitter {
       isFunction: true
     }, paused).catch(() => {});
   }
-  async setSources(sources) {
-    await this._page.mainFrame().evaluateExpression((sources => {
-      window.playwrightSetSources(sources);
+  async setSources(sources, primaryPageURL) {
+    await this._page.mainFrame().evaluateExpression((({
+      sources,
+      primaryPageURL
+    }) => {
+      window.playwrightSetSources(sources, primaryPageURL);
     }).toString(), {
       isFunction: true
-    }, sources).catch(() => {});
+    }, {
+      sources,
+      primaryPageURL
+    }).catch(() => {});
 
     // Testing harness for runCLI mode.
     if (process.env.PWTEST_CLI_IS_UNDER_TEST && sources.length) {
@@ -165,23 +171,14 @@ class RecorderApp extends _events.EventEmitter {
     }
   }
   async setActions(actions, sources) {}
-  async setSelector(selector, userGesture) {
-    if (userGesture) {
-      var _this$_recorder;
-      if (((_this$_recorder = this._recorder) === null || _this$_recorder === void 0 ? void 0 : _this$_recorder.mode()) === 'inspecting') {
-        this._recorder.setMode('standby');
-        this._page.bringToFront();
-      } else {
-        var _this$_recorder2;
-        (_this$_recorder2 = this._recorder) === null || _this$_recorder2 === void 0 || _this$_recorder2.setMode('recording');
-      }
-    }
-    await this._page.mainFrame().evaluateExpression((data => {
-      window.playwrightSetSelector(data.selector, data.userGesture);
+  async elementPicked(elementInfo, userGesture) {
+    if (userGesture) this._page.bringToFront();
+    await this._page.mainFrame().evaluateExpression((param => {
+      window.playwrightElementPicked(param.elementInfo, param.userGesture);
     }).toString(), {
       isFunction: true
     }, {
-      selector,
+      elementInfo,
       userGesture
     }).catch(() => {});
   }

package/lib/server/recorder/recorderCollection.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RecorderCollection = void 0;
 var _events = require("events");
-var _time = require("../../utils/time");
-var _recorderUtils = require("./recorderUtils");
-var _errors = require("../errors");
 var _recorderRunner = require("./recorderRunner");
-var _debug = require("../../utils/debug");
+var _recorderUtils = require("./recorderUtils");
+var _debug = require("../utils/debug");
+var _time = require("../../utils/isomorphic/time");
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -36,14 +35,14 @@ class RecorderCollection extends _events.EventEmitter {
   }
   restart() {
     this._actions = [];
-    this._fireChange();
+    this.emit('change', []);
   }
   setEnabled(enabled) {
     this._enabled = enabled;
   }
   async performAction(actionInContext) {
-    await this._addAction(actionInContext, async callMetadata => {
-      await (0, _recorderRunner.performAction)(callMetadata, this._pageAliases, actionInContext);
+    await this._addAction(actionInContext, async () => {
+      await (0, _recorderRunner.performAction)(this._pageAliases, actionInContext);
     });
   }
   addRecordedAction(actionInContext) {
@@ -61,21 +60,10 @@ class RecorderCollection extends _events.EventEmitter {
       this._fireChange();
       return;
     }
-    const {
-      callMetadata,
-      mainFrame
-    } = (0, _recorderUtils.callMetadataForAction)(this._pageAliases, actionInContext);
-    await mainFrame.instrumentation.onBeforeCall(mainFrame, callMetadata);
     this._actions.push(actionInContext);
     this._fireChange();
-    const error = await (callback === null || callback === void 0 ? void 0 : callback(callMetadata).catch(e => e));
-    callMetadata.endTime = (0, _time.monotonicTime)();
-    actionInContext.endTime = callMetadata.endTime;
-    callMetadata.error = error ? (0, _errors.serializeError)(error) : undefined;
-    // Do not wait for onAfterCall so that performAction returned immediately after the action.
-    mainFrame.instrumentation.onAfterCall(mainFrame, callMetadata).then(() => {
-      this._fireChange();
-    }).catch(() => {});
+    await (callback === null || callback === void 0 ? void 0 : callback().catch());
+    actionInContext.endTime = (0, _time.monotonicTime)();
   }
   signal(pageAlias, frame, signal) {
     if (!this._enabled) return;
@@ -84,7 +72,7 @@ class RecorderCollection extends _events.EventEmitter {
       const lastAction = this._actions[this._actions.length - 1];
       const signalThreshold = (0, _debug.isUnderTest)() ? 500 : 5000;
       let generateGoto = false;
-      if (!lastAction) generateGoto = true;else if (lastAction.action.name !== 'click' && lastAction.action.name !== 'press') generateGoto = true;else if (timestamp - lastAction.startTime > signalThreshold) generateGoto = true;
+      if (!lastAction) generateGoto = true;else if (lastAction.action.name !== 'click' && lastAction.action.name !== 'press' && lastAction.action.name !== 'fill') generateGoto = true;else if (timestamp - lastAction.startTime > signalThreshold) generateGoto = true;
       if (generateGoto) {
         this.addRecordedAction({
           frame: {

package/lib/server/recorder/recorderInTraceViewer.js

@@ -8,7 +8,7 @@ var _path = _interopRequireDefault(require("path"));
 var _events = require("events");
 var _traceViewer = require("../trace/viewer/traceViewer");
 var _manualPromise = require("../../utils/manualPromise");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) Microsoft Corporation.
  *

package/lib/server/recorder/recorderRunner.js

@@ -7,8 +7,8 @@ exports.performAction = performAction;
 exports.toClickOptions = toClickOptions;
 var _utils = require("../../utils");
 var _language = require("../codegen/language");
+var _instrumentation = require("../instrumentation");
 var _recorderUtils = require("./recorderUtils");
-var _recorderUtils2 = require("../../utils/isomorphic/recorderUtils");
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -25,7 +25,8 @@ var _recorderUtils2 = require("../../utils/isomorphic/recorderUtils");
  * limitations under the License.
  */
 
-async function performAction(callMetadata, pageAliases, actionInContext) {
+async function performAction(pageAliases, actionInContext) {
+  const callMetadata = (0, _instrumentation.serverSideCallMetadata)();
   const mainFrame = (0, _recorderUtils.mainFrameForAction)(pageAliases, actionInContext);
   const {
     action
@@ -42,7 +43,7 @@ async function performAction(callMetadata, pageAliases, actionInContext) {
     await mainFrame._page.close(callMetadata);
     return;
   }
-  const selector = (0, _recorderUtils2.buildFullSelector)(actionInContext.frame.framePath, action.selector);
+  const selector = (0, _recorderUtils.buildFullSelector)(actionInContext.frame.framePath, action.selector);
   if (action.name === 'click') {
     const options = toClickOptions(action);
     await mainFrame.click(callMetadata, selector, {
@@ -105,6 +106,9 @@ async function performAction(callMetadata, pageAliases, actionInContext) {
     await mainFrame.expect(callMetadata, selector, {
       selector,
       expression: 'to.be.checked',
+      expectedValue: {
+        checked: action.checked
+      },
       isNot: !action.checked,
       timeout: kActionTimeout
     });

package/lib/server/recorder/recorderUtils.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.callMetadataForAction = callMetadataForAction;
+exports.buildFullSelector = buildFullSelector;
 exports.collapseActions = collapseActions;
 exports.frameForAction = frameForAction;
 exports.mainFrameForAction = mainFrameForAction;
 exports.metadataToCallLog = metadataToCallLog;
-var _utils = require("../../utils");
-var _recorderUtils = require("../../utils/isomorphic/recorderUtils");
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -26,6 +24,9 @@ var _recorderUtils = require("../../utils/isomorphic/recorderUtils");
  * limitations under the License.
  */
 
+function buildFullSelector(framePath, selector) {
+  return [...framePath, selector].join(' >> internal:control=enter-frame >> ');
+}
 function metadataToCallLog(metadata, status) {
   var _metadata$params, _metadata$params2, _metadata$error;
   let title = metadata.apiName || metadata.method;
@@ -64,35 +65,11 @@ async function frameForAction(pageAliases, actionInContext, action) {
   const pageAlias = actionInContext.frame.pageAlias;
   const page = (_find2 = [...pageAliases.entries()].find(([, alias]) => pageAlias === alias)) === null || _find2 === void 0 ? void 0 : _find2[0];
   if (!page) throw new Error('Internal error: page not found');
-  const fullSelector = (0, _recorderUtils.buildFullSelector)(actionInContext.frame.framePath, action.selector);
+  const fullSelector = buildFullSelector(actionInContext.frame.framePath, action.selector);
   const result = await page.mainFrame().selectors.resolveFrameForSelector(fullSelector);
   if (!result) throw new Error('Internal error: frame not found');
   return result.frame;
 }
-function callMetadataForAction(pageAliases, actionInContext) {
-  const mainFrame = mainFrameForAction(pageAliases, actionInContext);
-  const {
-    method,
-    params
-  } = (0, _recorderUtils.traceParamsForAction)(actionInContext);
-  const callMetadata = {
-    id: `call@${(0, _utils.createGuid)()}`,
-    apiName: 'page.' + method,
-    objectId: mainFrame.guid,
-    pageId: mainFrame._page.guid,
-    frameId: mainFrame.guid,
-    startTime: actionInContext.startTime,
-    endTime: 0,
-    type: 'Frame',
-    method,
-    params,
-    log: []
-  };
-  return {
-    callMetadata,
-    mainFrame
-  };
-}
 function collapseActions(actions) {
   const result = [];
   for (const action of actions) {

package/lib/server/recorder/throttledFile.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ThrottledFile = void 0;
-var fs = _interopRequireWildcard(require("fs"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _fs = _interopRequireDefault(require("fs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -39,7 +38,7 @@ class ThrottledFile {
       clearTimeout(this._timer);
       this._timer = undefined;
     }
-    if (this._text) fs.writeFileSync(this._file, this._text);
+    if (this._text) _fs.default.writeFileSync(this._file, this._text);
     this._text = undefined;
   }
 }

package/lib/server/recorder/utils.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toClickOptions = toClickOptions;
+exports.toModifiers = toModifiers;
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function toClickOptions(action) {
+  let method = 'click';
+  if (action.clickCount === 2) method = 'dblclick';
+  const modifiers = toModifiers(action.modifiers);
+  const options = {};
+  if (action.button !== 'left') options.button = action.button;
+  if (modifiers.length) options.modifiers = modifiers;
+  if (action.clickCount > 2) options.clickCount = action.clickCount;
+  if (action.position) options.position = action.position;
+  return {
+    method,
+    options
+  };
+}
+function toModifiers(modifiers) {
+  const result = [];
+  if (modifiers & 1) result.push('Alt');
+  if (modifiers & 2) result.push('Control');
+  if (modifiers & 4) result.push('Meta');
+  if (modifiers & 8) result.push('Shift');
+  return result;
+}
+//# sourceMappingURL=utils.js.map

package/lib/server/recorder.js

@@ -4,17 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Recorder = void 0;
-var fs = _interopRequireWildcard(require("fs"));
+var _fs = _interopRequireDefault(require("fs"));
 var consoleApiSource = _interopRequireWildcard(require("../generated/consoleApiSource"));
 var _utils = require("../utils");
-var _locatorParser = require("../utils/isomorphic/locatorParser");
 var _browserContext = require("./browserContext");
 var _debugger = require("./debugger");
 var _contextRecorder = require("./recorder/contextRecorder");
 var _recorderUtils = require("./recorder/recorderUtils");
-var _recorderUtils2 = require("../utils/isomorphic/recorderUtils");
+var _locatorParser = require("../utils/isomorphic/locatorParser");
+var _selectorParser = require("../utils/isomorphic/selectorParser");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) Microsoft Corporation.
  *
@@ -35,30 +36,30 @@ const recorderSymbol = Symbol('recorderSymbol');
 class Recorder {
   static async showInspector(context, params, recorderAppFactory) {
     if ((0, _utils.isUnderTest)()) params.language = process.env.TEST_INSPECTOR_LANGUAGE;
-    return await Recorder.show('actions', context, recorderAppFactory, params);
+    return await Recorder.show(context, recorderAppFactory, params);
   }
   static showInspectorNoReply(context, recorderAppFactory) {
     Recorder.showInspector(context, {}, recorderAppFactory).catch(() => {});
   }
-  static show(codegenMode, context, recorderAppFactory, params) {
+  static show(context, recorderAppFactory, params) {
     let recorderPromise = context[recorderSymbol];
     if (!recorderPromise) {
-      recorderPromise = Recorder._create(codegenMode, context, recorderAppFactory, params);
+      recorderPromise = Recorder._create(context, recorderAppFactory, params);
       context[recorderSymbol] = recorderPromise;
     }
     return recorderPromise;
   }
-  static async _create(codegenMode, context, recorderAppFactory, params = {}) {
-    const recorder = new Recorder(codegenMode, context, params);
+  static async _create(context, recorderAppFactory, params = {}) {
+    const recorder = new Recorder(context, params);
     const recorderApp = await recorderAppFactory(recorder);
     await recorder._install(recorderApp);
     return recorder;
   }
-  constructor(codegenMode, context, params) {
+  constructor(context, params) {
     this.handleSIGINT = void 0;
     this._context = void 0;
     this._mode = void 0;
-    this._highlightedSelector = '';
+    this._highlightedElement = {};
     this._overlayState = {
       offsetX: 0
     };
@@ -72,7 +73,7 @@ class Recorder {
     this._currentLanguage = void 0;
     this._mode = params.mode || 'none';
     this.handleSIGINT = params.handleSIGINT;
-    this._contextRecorder = new _contextRecorder.ContextRecorder(codegenMode, context, params, {});
+    this._contextRecorder = new _contextRecorder.ContextRecorder(context, params, {});
     this._context = context;
     this._omitCallTracking = !!params.omitCallTracking;
     this._debugger = context.debugger();
@@ -94,8 +95,9 @@ class Recorder {
         this.setMode(data.params.mode);
         return;
       }
-      if (data.event === 'selectorUpdated') {
-        this.setHighlightedSelector(this._currentLanguage, data.params.selector);
+      if (data.event === 'highlightRequested') {
+        if (data.params.selector) this.setHighlightedSelector(this._currentLanguage, data.params.selector);
+        if (data.params.ariaTemplate) this.setHighlightedAriaTemplate(data.params.ariaTemplate);
         return;
       }
       if (data.event === 'step') {
@@ -119,6 +121,10 @@ class Recorder {
         this._contextRecorder.clearScript();
         return;
       }
+      if (data.event === 'runTask') {
+        this._contextRecorder.runTask(data.params.task);
+        return;
+      }
     });
     await Promise.all([recorderApp.setMode(this._mode), recorderApp.setPaused(this._debugger.isPaused()), this._pushAllSources()]);
     this._context.once(_browserContext.BrowserContext.Events.Close, () => {
@@ -133,12 +139,12 @@ class Recorder {
       recorderApp.setRunningFile(undefined);
       this._pushAllSources();
     });
-    await this._context.exposeBinding('__pw_recorderState', false, source => {
-      let actionSelector = '';
+    await this._context.exposeBinding('__pw_recorderState', false, async source => {
+      let actionSelector;
       let actionPoint;
       const hasActiveScreenshotCommand = [...this._currentCallsMetadata.keys()].some(isScreenshotCommand);
       if (!hasActiveScreenshotCommand) {
-        actionSelector = this._highlightedSelector;
+        actionSelector = await this._scopeHighlightedSelectorToFrame(source.frame);
         for (const [metadata, sdkObject] of this._currentCallsMetadata) {
           if (source.page === sdkObject.attribution.page) {
             actionPoint = metadata.point || actionPoint;
@@ -150,18 +156,22 @@ class Recorder {
         mode: this._mode,
         actionPoint,
         actionSelector,
+        ariaTemplate: this._highlightedElement.ariaTemplate,
         language: this._currentLanguage,
         testIdAttributeName: this._contextRecorder.testIdAttributeName(),
         overlay: this._overlayState
       };
       return uiState;
     });
-    await this._context.exposeBinding('__pw_recorderSetSelector', false, async ({
+    await this._context.exposeBinding('__pw_recorderElementPicked', false, async ({
       frame
-    }, selector) => {
+    }, elementInfo) => {
       var _this$_recorderApp2;
       const selectorChain = await (0, _contextRecorder.generateFrameSelector)(frame);
-      await ((_this$_recorderApp2 = this._recorderApp) === null || _this$_recorderApp2 === void 0 ? void 0 : _this$_recorderApp2.setSelector((0, _recorderUtils2.buildFullSelector)(selectorChain, selector), true));
+      await ((_this$_recorderApp2 = this._recorderApp) === null || _this$_recorderApp2 === void 0 ? void 0 : _this$_recorderApp2.elementPicked({
+        selector: (0, _recorderUtils.buildFullSelector)(selectorChain, elementInfo.selector),
+        ariaSnapshot: elementInfo.ariaSnapshot
+      }, true));
     });
     await this._context.exposeBinding('__pw_recorderSetMode', false, async ({
       frame
@@ -200,11 +210,11 @@ class Recorder {
   setMode(mode) {
     var _this$_recorderApp4;
     if (this._mode === mode) return;
-    this._highlightedSelector = '';
+    this._highlightedElement = {};
     this._mode = mode;
     (_this$_recorderApp4 = this._recorderApp) === null || _this$_recorderApp4 === void 0 || _this$_recorderApp4.setMode(this._mode);
-    this._contextRecorder.setEnabled(this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue');
-    this._debugger.setMuted(this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue');
+    this._contextRecorder.setEnabled(this._isRecording());
+    this._debugger.setMuted(this._isRecording());
     if (this._mode !== 'none' && this._mode !== 'standby' && this._context.pages().length === 1) this._context.pages()[0].bringToFront().catch(() => {});
     this._refreshOverlay();
   }
@@ -215,40 +225,66 @@ class Recorder {
     return this._mode;
   }
   setHighlightedSelector(language, selector) {
-    this._highlightedSelector = (0, _locatorParser.locatorOrSelectorAsSelector)(language, selector, this._context.selectors().testIdAttributeName());
+    this._highlightedElement = {
+      selector: (0, _locatorParser.locatorOrSelectorAsSelector)(language, selector, this._context.selectors().testIdAttributeName())
+    };
+    this._refreshOverlay();
+  }
+  setHighlightedAriaTemplate(ariaTemplate) {
+    this._highlightedElement = {
+      ariaTemplate
+    };
     this._refreshOverlay();
   }
   hideHighlightedSelector() {
-    this._highlightedSelector = '';
+    this._highlightedElement = {};
     this._refreshOverlay();
   }
+  async _scopeHighlightedSelectorToFrame(frame) {
+    if (!this._highlightedElement.selector) return;
+    try {
+      const mainFrame = frame._page.mainFrame();
+      const resolved = await mainFrame.selectors.resolveFrameForSelector(this._highlightedElement.selector);
+      // selector couldn't be found, don't highlight anything
+      if (!resolved) return '';
+
+      // selector points to no specific frame, highlight in all frames
+      if ((resolved === null || resolved === void 0 ? void 0 : resolved.frame) === mainFrame) return (0, _selectorParser.stringifySelector)(resolved.info.parsed);
+
+      // selector points to this frame, highlight it
+      if ((resolved === null || resolved === void 0 ? void 0 : resolved.frame) === frame) return (0, _selectorParser.stringifySelector)(resolved.info.parsed);
+
+      // selector points to a different frame, highlight nothing
+      return '';
+    } catch {
+      return '';
+    }
+  }
   setOutput(codegenId, outputFile) {
     this._contextRecorder.setOutput(codegenId, outputFile);
   }
   _refreshOverlay() {
-    for (const page of this._context.pages()) page.mainFrame().evaluateExpression('window.__pw_refreshOverlay()').catch(() => {});
+    for (const page of this._context.pages()) {
+      for (const frame of page.frames()) frame.evaluateExpression('window.__pw_refreshOverlay()').catch(() => {});
+    }
   }
   async onBeforeCall(sdkObject, metadata) {
-    if (this._omitCallTracking || this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue') return;
+    if (this._omitCallTracking || this._isRecording()) return;
     this._currentCallsMetadata.set(metadata, sdkObject);
     this._updateUserSources();
     this.updateCallLog([metadata]);
-    if (isScreenshotCommand(metadata)) {
-      this.hideHighlightedSelector();
-    } else if (metadata.params && metadata.params.selector) {
-      var _this$_recorderApp5;
-      this._highlightedSelector = metadata.params.selector;
-      (_this$_recorderApp5 = this._recorderApp) === null || _this$_recorderApp5 === void 0 || _this$_recorderApp5.setSelector(this._highlightedSelector).catch(() => {});
-    }
+    if (isScreenshotCommand(metadata)) this.hideHighlightedSelector();else if (metadata.params && metadata.params.selector) this._highlightedElement = {
+      selector: metadata.params.selector
+    };
   }
   async onAfterCall(sdkObject, metadata) {
-    if (this._omitCallTracking || this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue') return;
+    if (this._omitCallTracking || this._isRecording()) return;
     if (!metadata.error) this._currentCallsMetadata.delete(metadata);
     this._updateUserSources();
     this.updateCallLog([metadata]);
   }
   _updateUserSources() {
-    var _this$_recorderApp6;
+    var _this$_recorderApp5;
     // Remove old decorations.
     for (const source of this._userSources.values()) {
       source.highlight = [];
@@ -286,19 +322,20 @@ class Recorder {
       }
     }
     this._pushAllSources();
-    if (fileToSelect) (_this$_recorderApp6 = this._recorderApp) === null || _this$_recorderApp6 === void 0 || _this$_recorderApp6.setRunningFile(fileToSelect);
+    if (fileToSelect) (_this$_recorderApp5 = this._recorderApp) === null || _this$_recorderApp5 === void 0 || _this$_recorderApp5.setRunningFile(fileToSelect);
   }
   _pushAllSources() {
-    var _this$_recorderApp7;
-    (_this$_recorderApp7 = this._recorderApp) === null || _this$_recorderApp7 === void 0 || _this$_recorderApp7.setSources([...this._recorderSources, ...this._userSources.values()]);
+    var _this$_recorderApp6;
+    const primaryPage = this._context.pages()[0];
+    (_this$_recorderApp6 = this._recorderApp) === null || _this$_recorderApp6 === void 0 || _this$_recorderApp6.setSources([...this._recorderSources, ...this._userSources.values()], primaryPage === null || primaryPage === void 0 ? void 0 : primaryPage.mainFrame().url());
   }
   async onBeforeInputAction(sdkObject, metadata) {}
   async onCallLog(sdkObject, metadata, logName, message) {
     this.updateCallLog([metadata]);
   }
   updateCallLog(metadatas) {
-    var _this$_recorderApp8;
-    if (this._mode === 'recording' || this._mode === 'assertingText' || this._mode === 'assertingVisibility' || this._mode === 'assertingValue') return;
+    var _this$_recorderApp7;
+    if (this._isRecording()) return;
     const logs = [];
     for (const metadata of metadatas) {
       if (!metadata.method || metadata.internal) continue;
@@ -307,11 +344,14 @@ class Recorder {
       if (this._debugger.isPaused(metadata)) status = 'paused';
       logs.push((0, _recorderUtils.metadataToCallLog)(metadata, status));
     }
-    (_this$_recorderApp8 = this._recorderApp) === null || _this$_recorderApp8 === void 0 || _this$_recorderApp8.updateCallLogs(logs);
+    (_this$_recorderApp7 = this._recorderApp) === null || _this$_recorderApp7 === void 0 || _this$_recorderApp7.updateCallLogs(logs);
+  }
+  _isRecording() {
+    return ['recording', 'assertingText', 'assertingVisibility', 'assertingValue', 'assertingSnapshot'].includes(this._mode);
   }
   _readSource(fileName) {
     try {
-      return fs.readFileSync(fileName, 'utf-8');
+      return _fs.default.readFileSync(fileName, 'utf-8');
     } catch (e) {
       return '// No source available';
     }