Fix issue where click hangs if subject has a shadow root and shadow dom support is not enabled (#7692)

cli/schema/cypress.schema.json

@@ -237,7 +237,7 @@
     "experimentalShadowDomSupport": {
       "type": "boolean",
       "default": false,
-      "description": "Enables shadow DOM support. Adds the `cy.shadow()` command and the `ignoreShadowBoundaries` option to some DOM commands."
+      "description": "Enables shadow DOM support. Adds the `cy.shadow()` command and the `includeShadowDom` option to some DOM commands."
     }
   }
 }

cli/types/cypress.d.ts

@@ -2175,11 +2175,11 @@ declare namespace Cypress {
    */
   interface Shadow {
     /**
-     * Ignore shadow boundary and continue searching
+     * Include shadow DOM in search
      *
      * @default: false
      */
-    ignoreShadowBoundaries: boolean
+    includeShadowDom: boolean
   }
 
   /**
@@ -2456,7 +2456,7 @@ declare namespace Cypress {
     experimentalSourceRewriting: boolean
     /**
      * Enables shadow DOM support. Adds the `cy.shadow()` command and
-     * the `ignoreShadowBoundaries` option to some DOM commands.
+     * the `includeShadowDom` option to some DOM commands.
      */
     experimentalShadowDomSupport: boolean
   }

cli/types/tests/cypress-tests.ts

@@ -524,9 +524,9 @@ namespace CypressShadowTests {
   .find('.bar')
   .click()
 
-  cy.get('.foo', { ignoreShadowBoundaries: true }).click()
+  cy.get('.foo', { includeShadowDom: true }).click()
 
   cy
   .get('.foo')
-  .find('.bar', {ignoreShadowBoundaries: true})
+  .find('.bar', {includeShadowDom: true})
 }

packages/driver/cypress/integration/commands/actions/click_spec.js

@@ -3666,12 +3666,12 @@ describe('src/cy/commands/actions/click', () => {
   })
 })
 
-describe('composed events', () => {
+describe('shadow dom', () => {
   beforeEach(() => {
     cy.visit('/fixtures/shadow-dom.html')
   })
 
-  it('should compose click events', (done) => {
+  it('composes click events', (done) => {
     const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
 
     cy.$$('#parent-of-shadow-container-0').on('click', () => {
@@ -3683,7 +3683,7 @@ describe('composed events', () => {
     .click()
   })
 
-  it('should compose dblclick events', (done) => {
+  it('composes dblclick events', (done) => {
     const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
 
     cy.$$('#parent-of-shadow-container-0').on('dblclick', () => {
@@ -3695,7 +3695,7 @@ describe('composed events', () => {
     .dblclick()
   })
 
-  it('should compose right click events', (done) => {
+  it('composes right click events', (done) => {
     const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
 
     cy.$$('#parent-of-shadow-container-0').on('contextmenu', () => {
@@ -3706,6 +3706,15 @@ describe('composed events', () => {
     .get(el)
     .rightclick()
   })
+
+  // https://github.com/cypress-io/cypress/issues/7679
+  it('does not hang when experimentalShadowDomSupport is false and clicking on custom element', () => {
+    Cypress.config('experimentalShadowDomSupport', false)
+    // needs some size or it's considered invisible and click will fail its prerequisites
+    cy.$$('#shadow-element-1').css({ padding: 2 })
+
+    cy.get('#shadow-element-1').click()
+  })
 })
 
 describe('mouse state', () => {

packages/driver/src/dom/elements.ts

@@ -1220,8 +1220,10 @@ const elementFromPoint = (doc, x, y) => {
   // if the node has a shadow root, we must behave like
   // the browser and find the inner element of the shadow
   // root at that same point.
-  while (node?.shadowRoot) {
-    node = node.shadowRoot.elementFromPoint(x, y)
+  if (Cypress.config('experimentalShadowDomSupport')) {
+    while (node?.shadowRoot) {
+      node = node.shadowRoot.elementFromPoint(x, y)
+    }
   }
 
   // if we never found an inner/deep element, use the

packages/server/lib/experiments.ts

@@ -54,7 +54,7 @@ const _summaries: StringValues = {
   experimentalComponentTesting: 'Framework-specific component testing, uses `componentFolder` to load component specs',
   experimentalSourceRewriting: 'Enables AST-based JS/HTML rewriting. This may fix issues caused by the existing regex-based JS/HTML replacement algorithm.',
   experimentalGetCookiesSameSite: 'Adds `sameSite` values to the objects yielded from `cy.setCookie()`, `cy.getCookie()`, and `cy.getCookies()`. This will become the default behavior in Cypress 5.0.',
-  experimentalShadowDomSupport: 'Enables support for shadow DOM traversal, introduces the `shadow()` command and the `ignoreShadowBoundaries` option to traversal commands.',
+  experimentalShadowDomSupport: 'Enables support for shadow DOM traversal, introduces the `shadow()` command and the `includeShadowDom` option to traversal commands.',
 }
 
 /**