chore: Deprecate experimentalShadowDomSupport flag and remove its usa…

…ge (#8548)

cli/schema/cypress.schema.json

@@ -239,11 +239,6 @@
       "default": false,
       "description": "Enables `cy.route2`, which can be used to dynamically intercept/stub/await any HTTP request or response (XHRs, fetch, beacons, etc.)"
     },
-    "experimentalShadowDomSupport": {
-      "type": "boolean",
-      "default": false,
-      "description": "Enables shadow DOM support. Adds the `cy.shadow()` command and the `ignoreShadowBoundaries` option to some DOM commands."
-    },
     "experimentalFetchPolyfill": {
       "type": "boolean",
       "default": false,

cli/types/cypress.d.ts

@@ -1607,7 +1607,6 @@ declare namespace Cypress {
 
     /**
      * Traverse into an element's shadow root.
-     * Requires `experimentalShadowDomSupport: true` config option
      *
      * @example
      *    cy.get('my-component')
@@ -2582,12 +2581,6 @@ declare namespace Cypress {
      * @default false
      */
     experimentalNetworkStubbing: boolean
-    /**
-     * Enables shadow DOM support. Adds the `cy.shadow()` command and
-     * the `includeShadowDom` option to some DOM commands.
-     * @default false
-     */
-    experimentalShadowDomSupport: boolean
     /**
      * Number of times to retry a failed test.
      * If a number is set, tests will retry in both runMode and openMode.

packages/driver/cypress.json

@@ -8,6 +8,5 @@
   "reporterOptions": {
     "configFile": "../../mocha-reporter-config.json"
   },
-  "experimentalNetworkStubbing": true,
-  "experimentalShadowDomSupport": true
+  "experimentalNetworkStubbing": true
 }

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

@@ -3780,8 +3780,7 @@ describe('shadow dom', () => {
   })
 
   // 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)
+  it('does not hang when clicking on custom element', () => {
     // needs some size or it's considered invisible and click will fail its prerequisites
     // so we make it display: block so its getClientRects() contains only a single
     cy.$$('#shadow-element-1').css({ display: 'block' })

packages/driver/cypress/integration/cypress/shadow_dom_utils_spec.ts

@@ -10,47 +10,29 @@ describe('src/cypress/shadow_dom_utils', () => {
       }
     })
 
-    describe('when experimental flag is false', () => {
-      beforeEach(() => {
-        CypressMock.config.withArgs('experimentalShadowDomSupport').returns(false)
-      })
-
-      it('returns false', () => {
-        CypressMock.config.withArgs('includeShadowDom').returns(true)
+    it('returns true if command value is true', () => {
+      CypressMock.config.withArgs('includeShadowDom').returns(false)
 
-        expect(resolveShadowDomInclusion(CypressMock, true)).to.be.false
-      })
+      expect(resolveShadowDomInclusion(CypressMock, true)).to.be.true
     })
 
-    describe('when experimental flag is true', () => {
-      beforeEach(() => {
-        CypressMock.config.withArgs('experimentalShadowDomSupport').returns(true)
-      })
-
-      it('returns true if command value is true', () => {
-        CypressMock.config.withArgs('includeShadowDom').returns(false)
+    it('returns false if command value is false', () => {
+      CypressMock.config.withArgs('includeShadowDom').returns(true)
 
-        expect(resolveShadowDomInclusion(CypressMock, true)).to.be.true
-      })
+      expect(resolveShadowDomInclusion(CypressMock, false)).to.be.false
+    })
 
-      it('returns false if command value is false', () => {
+    describe('when command value is undefined', () => {
+      it('returns true if config value is true', () => {
         CypressMock.config.withArgs('includeShadowDom').returns(true)
 
-        expect(resolveShadowDomInclusion(CypressMock, false)).to.be.false
+        expect(resolveShadowDomInclusion(CypressMock)).to.be.true
       })
 
-      describe('when command value is undefined', () => {
-        it('returns true if config value is true', () => {
-          CypressMock.config.withArgs('includeShadowDom').returns(true)
-
-          expect(resolveShadowDomInclusion(CypressMock)).to.be.true
-        })
-
-        it('returns false if config value is false', () => {
-          CypressMock.config.withArgs('includeShadowDom').returns(false)
+      it('returns false if config value is false', () => {
+        CypressMock.config.withArgs('includeShadowDom').returns(false)
 
-          expect(resolveShadowDomInclusion(CypressMock)).to.be.false
-        })
+        expect(resolveShadowDomInclusion(CypressMock)).to.be.false
       })
     })
   })

packages/driver/cypress/integration/dom/elements_spec.ts

@@ -270,64 +270,52 @@ describe('src/dom/elements', () => {
     let node
 
     beforeEach(() => {
-      Cypress.config('experimentalShadowDomSupport', false)
-
       node = {}
       doc = {
         elementFromPoint: cy.stub().returns(node),
       }
     })
 
-    it('returns native element at point', () => {
+    it('returns original node if node has no shadow root', () => {
       expect(elementFromPoint(doc, 1, 2)).to.equal(node)
     })
 
-    describe('with shadow dom support enabled', () => {
-      beforeEach(() => {
-        Cypress.config('experimentalShadowDomSupport', true)
-      })
-
-      it('returns original node if node has no shadow root', () => {
-        expect(elementFromPoint(doc, 1, 2)).to.equal(node)
-      })
-
-      it('returns shadow dom element at point', () => {
-        const shadowNode = {}
-        const shadowHostNode = {
-          shadowRoot: {
-            elementFromPoint: cy.stub().returns(shadowNode),
-          },
-        }
+    it('returns shadow dom element at point', () => {
+      const shadowNode = {}
+      const shadowHostNode = {
+        shadowRoot: {
+          elementFromPoint: cy.stub().returns(shadowNode),
+        },
+      }
 
-        doc.elementFromPoint.returns(shadowHostNode)
+      doc.elementFromPoint.returns(shadowHostNode)
 
-        expect(elementFromPoint(doc, 1, 2)).to.equal(shadowNode)
-      })
+      expect(elementFromPoint(doc, 1, 2)).to.equal(shadowNode)
+    })
 
-      it('returns original node if no element at point in shadow dom', () => {
-        const shadowHostNode = {
-          shadowRoot: {
-            elementFromPoint: cy.stub().returns(node),
-          },
-        }
+    it('returns original node if no element at point in shadow dom', () => {
+      const shadowHostNode = {
+        shadowRoot: {
+          elementFromPoint: cy.stub().returns(node),
+        },
+      }
 
-        doc.elementFromPoint.returns(shadowHostNode)
+      doc.elementFromPoint.returns(shadowHostNode)
 
-        expect(elementFromPoint(doc, 1, 2)).to.equal(node)
-      })
+      expect(elementFromPoint(doc, 1, 2)).to.equal(node)
+    })
 
-      // https://github.com/cypress-io/cypress/issues/7794
-      it('returns shadow host if its element at point is itself', () => {
-        const shadowHostNode = {} as any
+    // https://github.com/cypress-io/cypress/issues/7794
+    it('returns shadow host if its element at point is itself', () => {
+      const shadowHostNode = {} as any
 
-        shadowHostNode.shadowRoot = {
-          elementFromPoint: cy.stub().returns(shadowHostNode),
-        }
+      shadowHostNode.shadowRoot = {
+        elementFromPoint: cy.stub().returns(shadowHostNode),
+      }
 
-        doc.elementFromPoint.returns(shadowHostNode)
+      doc.elementFromPoint.returns(shadowHostNode)
 
-        expect(elementFromPoint(doc, 1, 2)).to.equal(shadowHostNode)
-      })
+      expect(elementFromPoint(doc, 1, 2)).to.equal(shadowHostNode)
     })
   })
 })

packages/driver/src/cy/commands/querying.js

@@ -623,60 +623,58 @@ module.exports = (Commands, Cypress, cy, state) => {
     },
   })
 
-  if (Cypress.config('experimentalShadowDomSupport')) {
-    Commands.add('shadow', { prevSubject: 'element' }, (subject, options) => {
-      const userOptions = options || {}
+  Commands.add('shadow', { prevSubject: 'element' }, (subject, options) => {
+    const userOptions = options || {}
 
-      options = _.defaults({}, userOptions, { log: true })
+    options = _.defaults({}, userOptions, { log: true })
 
-      const consoleProps = {
-        'Applied To': $dom.getElements(subject),
-      }
+    const consoleProps = {
+      'Applied To': $dom.getElements(subject),
+    }
 
-      if (options.log !== false) {
-        options._log = Cypress.log({
-          timeout: options.timeout,
-          consoleProps () {
-            return consoleProps
-          },
-        })
-      }
+    if (options.log !== false) {
+      options._log = Cypress.log({
+        timeout: options.timeout,
+        consoleProps () {
+          return consoleProps
+        },
+      })
+    }
 
-      const setEl = ($el) => {
-        if (options.log === false) {
-          return
-        }
+    const setEl = ($el) => {
+      if (options.log === false) {
+        return
+      }
 
-        consoleProps.Yielded = $dom.getElements($el)
-        consoleProps.Elements = $el?.length
+      consoleProps.Yielded = $dom.getElements($el)
+      consoleProps.Elements = $el?.length
 
-        return options._log.set({ $el })
-      }
+      return options._log.set({ $el })
+    }
 
-      const getShadowRoots = () => {
-        // find all shadow roots of the subject(s), if any exist
-        const $el = subject
-        .map((i, node) => node.shadowRoot)
-        .filter((i, node) => node !== undefined && node !== null)
+    const getShadowRoots = () => {
+      // find all shadow roots of the subject(s), if any exist
+      const $el = subject
+      .map((i, node) => node.shadowRoot)
+      .filter((i, node) => node !== undefined && node !== null)
 
-        setEl($el)
+      setEl($el)
 
-        return cy.verifyUpcomingAssertions($el, options, {
-          onRetry: getShadowRoots,
-          onFail (err) {
-            if (err.type !== 'existence') {
-              return
-            }
+      return cy.verifyUpcomingAssertions($el, options, {
+        onRetry: getShadowRoots,
+        onFail (err) {
+          if (err.type !== 'existence') {
+            return
+          }
 
-            const { message, docsUrl } = $errUtils.cypressErrByPath('shadow.no_shadow_root')
+          const { message, docsUrl } = $errUtils.cypressErrByPath('shadow.no_shadow_root')
 
-            err.message = message
-            err.docsUrl = docsUrl
-          },
-        })
-      }
+          err.message = message
+          err.docsUrl = docsUrl
+        },
+      })
+    }
 
-      return getShadowRoots()
-    })
-  }
+    return getShadowRoots()
+  })
 }

packages/driver/src/cy/commands/traversals.js

@@ -126,7 +126,6 @@ module.exports = (Commands, Cypress, cy) => {
       }
 
       const getEl = () => {
-        const shadowDomSupportEnabled = Cypress.config('experimentalShadowDomSupport')
         const includeShadowDom = resolveShadowDomInclusion(Cypress, userOptions.includeShadowDom)
         const optInShadowTraversal = optInShadowTraversals[traversal]
         const autoShadowTraversal = autoShadowTraversals[traversal]
@@ -138,7 +137,7 @@ module.exports = (Commands, Cypress, cy) => {
           return optInShadowTraversal(cy, subject, arg1, arg2)
         }
 
-        if (shadowDomSupportEnabled && autoShadowTraversal && $dom.isWithinShadowRoot(subject[0])) {
+        if (autoShadowTraversal && $dom.isWithinShadowRoot(subject[0])) {
           // if we detect the element is within a shadow root and we're using
           // .closest() or .parents(), automatically cross shadow boundaries
           return autoShadowTraversal(cy, subject, arg1, arg2)

packages/driver/src/cypress/shadow_dom_utils.ts

@@ -1,10 +1,8 @@
 /**
 * Order of preference for including shadow dom:
-* experimental flag > command-level > programmatic config > test-level > suite-level > cypress.json
+* command-level > programmatic config > test-level > suite-level > cypress.json
 */
 export const resolveShadowDomInclusion = (Cypress: Cypress.Cypress, commandValue?: boolean): boolean => {
-  if (!Cypress.config('experimentalShadowDomSupport')) return false
-
   if (commandValue != null) return commandValue
 
   return Cypress.config('includeShadowDom')

packages/driver/src/dom/elements.ts

@@ -420,7 +420,7 @@ const isFocused = (el) => {
   try {
     let doc
 
-    if (Cypress.config('experimentalShadowDomSupport') && isWithinShadowRoot(el)) {
+    if (isWithinShadowRoot(el)) {
       doc = el.getRootNode()
     } else {
       doc = $document.getDocumentFromElement(el)
@@ -946,7 +946,7 @@ const getFirstFocusableEl = ($el: JQuery<HTMLElement>) => {
 const getActiveElByDocument = ($el: JQuery<HTMLElement>): HTMLElement | null => {
   let activeElement
 
-  if (Cypress.config('experimentalShadowDomSupport') && isWithinShadowRoot($el[0])) {
+  if (isWithinShadowRoot($el[0])) {
     activeElement = ($el[0].getRootNode() as ShadowRoot).activeElement
   } else {
     activeElement = getNativeProp($el[0].ownerDocument as Document, 'activeElement')
@@ -1231,26 +1231,22 @@ const stringify = (el, form = 'long') => {
   })
 }
 
-const elementFromPoint = (doc, x, y) => {
-  // first try the native elementFromPoint method
-  let elFromPoint = doc.elementFromPoint(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.
+const getShadowElementFromPoint = (node, x, y) => {
+  const nodeFromPoint = node?.shadowRoot?.elementFromPoint(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.
-  if (Cypress.config('experimentalShadowDomSupport')) {
-    const getShadowElementFromPoint = (node) => {
-      const nodeFromPoint = node?.shadowRoot?.elementFromPoint(x, y)
+  if (!nodeFromPoint || nodeFromPoint === node) return node
 
-      if (!nodeFromPoint || nodeFromPoint === node) return node
-
-      return getShadowElementFromPoint(nodeFromPoint)
-    }
+  return getShadowElementFromPoint(nodeFromPoint, x, y)
+}
 
-    elFromPoint = getShadowElementFromPoint(elFromPoint)
-  }
+const elementFromPoint = (doc, x, y) => {
+  // first try the native elementFromPoint method
+  let elFromPoint = doc.elementFromPoint(x, y)
 
-  return elFromPoint
+  return getShadowElementFromPoint(elFromPoint, x, y)
 }
 
 const getShadowRoot = ($el: JQuery): JQuery<Node> => {