fix: Fix querying shadow dom in cy.within (#8505)

packages/driver/cypress/integration/commands/querying_spec.js

@@ -357,6 +357,38 @@ describe('src/cy/commands/querying', () => {
       })
     })
 
+    describe('shadow dom', () => {
+      beforeEach(() => {
+        cy.visit('/fixtures/shadow-dom.html')
+      })
+
+      it('finds element within shadow dom with includeShadowDom option', () => {
+        cy.get('#parent-of-shadow-container-0').within(() => {
+          cy
+          .get('p', { includeShadowDom: true })
+          .should('have.length', 1)
+          .should('have.text', 'Shadow Content 3')
+        })
+      })
+
+      it('when within subject is shadow root, finds element without needing includeShadowDom option', () => {
+        cy.get('#shadow-element-1').shadow().within(() => {
+          cy
+          .get('p')
+          .should('have.length', 1)
+          .should('have.text', 'Shadow Content 1')
+        })
+      })
+
+      it('when within subject is already in shadow dom, finds element without needing includeShadowDom option', () => {
+        cy.get('.shadow-8-nested-1', { includeShadowDom: true }).within(() => {
+          cy
+          .get('.shadow-8-nested-5')
+          .should('have.text', '8')
+        })
+      })
+    })
+
     describe('.log', () => {
       beforeEach(function () {
         this.logs = []

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

@@ -282,7 +282,7 @@ module.exports = (Commands, Cypress, cy, state) => {
           let scope = options.withinSubject
 
           if (options.includeShadowDom) {
-            const root = options.withinSubject || cy.state('document')
+            const root = options.withinSubject ? options.withinSubject[0] : cy.state('document')
             const elementsWithShadow = $dom.findAllShadowRoots(root)
 
             scope = elementsWithShadow.concat(root)
@@ -536,7 +536,7 @@ module.exports = (Commands, Cypress, cy, state) => {
     },
   })
 
-  Commands.addAll({ prevSubject: 'element' }, {
+  Commands.addAll({ prevSubject: ['element', 'document'] }, {
     within (subject, options, fn) {
       let userOptions = options
       const ctx = this