fix(highlight): highlight Top Layer elements

Author: mxschmitt

packages/playwright-core/src/server/injected/consoleApi.ts

@@ -61,6 +61,7 @@ class Locator {
     self.nth = (index: number): Locator => self.locator(`nth=${index}`);
     self.and = (locator: Locator): Locator => new Locator(injectedScript, selectorBase + ` >> internal:and=` + JSON.stringify(locator[selectorSymbol]));
     self.or = (locator: Locator): Locator => new Locator(injectedScript, selectorBase + ` >> internal:or=` + JSON.stringify(locator[selectorSymbol]));
+    self.highlight = () => injectedScript.highlight(injectedScript.parseSelector(selectorBase));
   }
 }
 

packages/playwright-core/src/server/injected/highlight.ts

@@ -40,6 +40,8 @@ export type HighlightOptions = {
 };
 
 export class Highlight {
+  private _dialogElement: HTMLDialogElement;
+  private _dialogStyles: HTMLStyleElement;
   private _glassPaneElement: HTMLElement;
   private _glassPaneShadow: ShadowRoot;
   private _highlightEntries: HighlightEntry[] = [];
@@ -54,6 +56,19 @@ export class Highlight {
     this._injectedScript = injectedScript;
     const document = injectedScript.document;
     this._isUnderTest = injectedScript.isUnderTest;
+    this._dialogStyles = document.createElement('style');
+    this._dialogStyles.textContent = `
+      dialog#pw-dialog::backdrop {
+        background-color: transparent;
+      }
+    `;
+    this._dialogElement = document.createElement('dialog');
+    this._dialogElement.id = 'pw-dialog';
+    this._dialogElement.style.padding = '0';
+    this._dialogElement.style.margin = '0';
+    this._dialogElement.style.border = 'none';
+    this._dialogElement.style.maxWidth = 'inherit';
+    this._dialogElement.style.maxHeight = 'inherit';
     this._glassPaneElement = document.createElement('x-pw-glass');
     this._glassPaneElement.style.position = 'fixed';
     this._glassPaneElement.style.top = '0';
@@ -64,6 +79,7 @@ export class Highlight {
     this._glassPaneElement.style.pointerEvents = 'none';
     this._glassPaneElement.style.display = 'flex';
     this._glassPaneElement.style.backgroundColor = 'transparent';
+    this._dialogElement.appendChild(this._glassPaneElement);
     for (const eventName of ['click', 'auxclick', 'dragstart', 'input', 'keydown', 'keyup', 'pointerdown', 'pointerup', 'mousedown', 'mouseup', 'mouseleave', 'focus', 'scroll']) {
       this._glassPaneElement.addEventListener(eventName, e => {
         e.stopPropagation();
@@ -82,7 +98,9 @@ export class Highlight {
   }
 
   install() {
-    this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
+    this._injectedScript.document.documentElement.appendChild(this._dialogStyles);
+    this._injectedScript.document.documentElement.appendChild(this._dialogElement);
+    this._dialogElement.showModal();
   }
 
   setLanguage(language: Language) {
@@ -99,7 +117,9 @@ export class Highlight {
   uninstall() {
     if (this._rafRequest)
       cancelAnimationFrame(this._rafRequest);
-    this._glassPaneElement.remove();
+    this._dialogElement.close();
+    this._dialogElement.remove();
+    this._dialogStyles.remove();
   }
 
   showActionPoint(x: number, y: number) {
@@ -127,7 +147,7 @@ export class Highlight {
   }
 
   maskElements(elements: Element[], color: string) {
-    this._innerUpdateHighlight(elements, { color: color });
+    this._innerUpdateHighlight(elements, { color });
   }
 
   private _innerUpdateHighlight(elements: Element[], options: HighlightOptions) {

tests/page/page-screenshot.spec.ts

@@ -482,6 +482,33 @@ it.describe('page screenshot', () => {
       })).toMatchSnapshot('should-mask-inside-iframe.png');
     });
 
+    it('should mask inside <dialog />', async ({ page, server }) => {
+      await page.setViewportSize({ width: 500, height: 500 });
+      await page.goto(server.PREFIX + '/grid.html');
+      page.on('console', msg => console.log(msg.text()));
+      await page.evaluate(() => {
+        const elements = document.body.innerHTML;
+        document.body.innerHTML = '';
+        // Move all the elements of the body (grid elements) into a <dialog /> which lives on the Top-Layer.
+        const dialog = document.createElement('dialog');
+        dialog.style.padding = '0';
+        dialog.style.margin = '0';
+        dialog.style.border = 'none';
+        dialog.style.maxWidth = 'inherit';
+        dialog.style.maxHeight = 'inherit';
+        dialog.style.outline = 'none';
+        document.body.appendChild(dialog);
+        dialog.innerHTML = elements;
+        dialog.showModal();
+      });
+      expect(await page.screenshot({
+        mask: [
+          page.locator('div').nth(5),
+          page.frameLocator('#frame1').locator('div').nth(12),
+        ],
+      })).toMatchSnapshot('should-mask-inside-iframe.png');
+    });
+
     it('should mask in parallel', async ({ page, server }) => {
       await page.setViewportSize({ width: 500, height: 500 });
       await attachFrame(page, 'frame1', server.PREFIX + '/grid.html');