Optionally highlighted element's shadow root

Author: simenbrekken

packages/runner-shared/src/iframe/aut-iframe.js

@@ -7,6 +7,7 @@ import { eventManager } from '../event-manager'
 import { dom } from '../dom'
 import { logger } from '../logger'
 import { studioRecorder } from '../studio'
+import { getShadowElementFromPoint } from '@packages/driver/src/dom/elements/shadow'
 
 const $ = $Cypress.$
 
@@ -291,7 +292,7 @@ export class AutIframe {
       const $highlight = $el
 
       $highlight.css('display', 'none')
-      el = this._document().elementFromPoint(e.clientX, e.clientY)
+      el = getShadowElementFromPoint(this._document().elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY)
       $el = $(el)
       $highlight.css('display', 'block')
     }

packages/runner/cypress/fixtures/issues/issue-20989.html

@@ -0,0 +1,20 @@
+<my-custom-element></my-custom-element>
+<button data-testid="outside-button">Outside button (data-testid="outside-button")</button>
+
+<script type="module">
+  window.customElements.define(
+    'my-custom-element',
+    class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+      }
+
+      connectedCallback() {
+        this.shadowRoot.innerHTML = `
+        <button data-testid="inside-button">Inside button (data-testid="inside-button")</button>
+        `;
+      }
+    }
+  );
+</script>

packages/runner/cypress/integration/issues/issue-20989.spec.js

@@ -0,0 +1,16 @@
+// https://github.com/cypress-io/cypress/issues/20989
+describe('issue 20989', { baseUrl: null, includeShadowDom: true }, () => {
+  it('highlights elements inside shadow roots', () => {
+    Cypress.SelectorPlayground.defaults({
+      onElement: ($el) => {
+        const testId = $el.attr('data-testid')
+
+        if (testId) {
+          return `[data-testid=${testId}]`
+        }
+      },
+    })
+
+    cy.visit('/cypress/fixtures/issues/issue-20989.html')
+  })
+})