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;