From eac5cc98df8700d653cc4fef8a0c0b5479c87b94 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 3 Nov 2022 09:55:45 -0700
Subject: [PATCH] fix: compare selector when validating highlight (#18530)

---
 .../playwright-core/src/server/injected/highlight.ts  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts
index a584adfd6e..aaf7f422e8 100644
--- a/packages/playwright-core/src/server/injected/highlight.ts
+++ b/packages/playwright-core/src/server/injected/highlight.ts
@@ -26,7 +26,8 @@ type HighlightEntry = {
   tooltipElement?: HTMLElement,
   box?: DOMRect,
   tooltipTop?: number,
-  tooltipLeft?: number
+  tooltipLeft?: number,
+  tooltipText?: string,
 };
 
 export class Highlight {
@@ -160,7 +161,7 @@ export class Highlight {
     // Code below should trigger one layout and leave with the
     // destroyed layout.
 
-    if (this._highlightIsUpToDate(elements))
+    if (this._highlightIsUpToDate(elements, options.tooltipText))
       return;
 
     // 1. Destroy the layout
@@ -180,7 +181,7 @@ export class Highlight {
         tooltipElement.style.left = '0';
         tooltipElement.style.display = 'flex';
       }
-      this._highlightEntries.push({ targetElement: elements[i], tooltipElement, highlightElement });
+      this._highlightEntries.push({ targetElement: elements[i], tooltipElement, highlightElement, tooltipText: options.tooltipText });
     }
 
     // 2. Trigger layout while positioning tooltips and computing bounding boxes.
@@ -232,10 +233,12 @@ export class Highlight {
         console.error('Highlight box for test: ' + JSON.stringify({ x: box.x, y: box.y, width: box.width, height: box.height })); // eslint-disable-line no-console
     }
   }
-  private _highlightIsUpToDate(elements: Element[]): boolean {
+  private _highlightIsUpToDate(elements: Element[], tooltipText: string | undefined): boolean {
     if (elements.length !== this._highlightEntries.length)
       return false;
     for (let i = 0; i < this._highlightEntries.length; ++i) {
+      if (tooltipText !== this._highlightEntries[i].tooltipText)
+        return false;
       if (elements[i] !== this._highlightEntries[i].targetElement)
         return false;
       const oldBox = this._highlightEntries[i].box;