fix(recorder): coalesce highlight resolutions and update highlights atomically (#43897)

Author: dgozman

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

@@ -40,6 +40,7 @@ export class HighlightController {
   private _entries = new Map<string, HighlightEntry>();
   private _resolutionTimer: NodeJS.Timeout | undefined;
   private _resolutionChain: Promise<void> = Promise.resolve();
+  private _pendingResolution: Promise<void> | undefined;
 
   constructor(page: Page) {
     this._page = page;
@@ -90,8 +91,15 @@ export class HighlightController {
       clearTimeout(this._resolutionTimer);
       this._resolutionTimer = undefined;
     }
-    this._resolutionChain = this._resolutionChain.then(() => this._resolve()).catch(() => {});
-    return this._resolutionChain;
+    // Coalesce multiple queued highlights.
+    if (!this._pendingResolution) {
+      this._pendingResolution = this._resolutionChain.then(() => {
+        this._pendingResolution = undefined;
+        return this._resolve();
+      }).catch(() => {});
+      this._resolutionChain = this._pendingResolution;
+    }
+    return this._pendingResolution;
   }
 
   private async _resolve() {

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

@@ -370,11 +370,13 @@ export class Recorder extends EventEmitter<RecorderEventMap> implements Instrume
     if (previous && previous.selector === selector && previous.anyFrame === anyFrame)
       return;
     this._highlightedSelector = selector === undefined ? undefined : { selector, anyFrame };
-    await Promise.all(this._context.pages().map(async page => {
+    await Promise.all(this._context.pages().map(page => {
+      const promises: Promise<void>[] = [];
       if (previous)
-        await page.highlightController.removeHighlight(previous.selector).catch(() => {});
+        promises.push(page.highlightController.removeHighlight(previous.selector).catch(() => {}));
       if (selector)
-        await page.highlightController.addHighlight(selector, { anyFrame }).catch(() => {});
+        promises.push(page.highlightController.addHighlight(selector, { anyFrame }).catch(() => {}));
+      return Promise.all(promises);
     }));
   }
 

tests/library/inspector/cli-codegen-aria.spec.ts

@@ -109,6 +109,7 @@ test.describe(() => {
 
     {
       // No accessible name => two boxes.
+      await expect(recorder.page.locator('x-pw-highlight')).toHaveCount(2);
       const box11 = roundBox(await submitButton.boundingBox());
       const box12 = roundBox(await recorder.page.locator('x-pw-highlight').first().boundingBox());
       expect(box11).toEqual(box12);
@@ -121,7 +122,7 @@ test.describe(() => {
     {
       // Different button.
       await recorder.recorderPage.locator('.tab-aria .CodeMirror').pressSequentially('"Cancel"');
-      await expect(recorder.page.locator('x-pw-highlight')).toBeVisible();
+      await expect(recorder.page.locator('x-pw-highlight')).toHaveCount(1);
       const box1 = roundBox(await cancelButton.boundingBox());
       const box2 = roundBox(await recorder.page.locator('x-pw-highlight').boundingBox());
       expect(box1).toEqual(box2);