diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index ecb3ed20eeef..c4c1f240542c 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -3,22 +3,38 @@
   <head>
     <title>Shadow DOM Fixture</title>
   </head>
-  <body>
+  <body class="filter-me">
     <div id="non-shadow-element" class="in-and-out">Non Shadow</div>
     <cy-test-element id="shadow-element-1" innerClass="shadow-1" content="Shadow Content 1"></cy-test-element>
     <cy-test-element id="shadow-element-2" innerClass="shadow-2" content="Shadow Content 2"></cy-test-element>
     <div id="parent-of-shadow-container-0">
-      <div id="parent-of-shadow-container-1">
+      <div id="parent-of-shadow-container-1" class="filter-me">
         <cy-test-element id="shadow-element-3" innerClass="shadow-3" content="Shadow Content 3"></cy-test-element>
       </div>
     </div>
-    <cy-test-element innerClass="shadow-4" content="Shadow Content 4">
-      <cy-test-element innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
+    <cy-test-element id="shadow-element-4" innerClass="shadow-4" content="Shadow Content 4">
+      <cy-test-element id="shadow-element-5" innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
     </cy-test-element>
     <cy-test-element innerClass="shadow-6" content="Shadow Content 6">
       <div class="in-shadow-slot">In Shadow Slot</div>
     </cy-test-element>
     <cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
+    <div id="parent-of-shadow-container-2">
+      <div id="parent-of-shadow-container-3" class="filter-me">
+        <cy-test-element id="shadow-element-8" content="
+          <span class='shadow-8-nested-1 filter-me'>
+            <span class='shadow-8-nested-2'>
+              <span class='shadow-8-nested-3 shadow-8-nested'>Shadow </span>
+              <span class='shadow-8-nested-4 shadow-8-nested'>Content </span>
+              <span class='shadow-8-nested-5 shadow-8-nested'>8</span>
+            </span>
+          </span>
+          "></cy-test-element>
+      </div>
+    </div>
+    <cy-test-element id="shadow-element-9" content="Shadow Content 9" rootAddition="
+      <div class='shadow-div'>Shadow Content 9</div>
+    "></cy-test-element>
 
     <script type="text/javascript">
       if (window.customElements) {
@@ -27,11 +43,11 @@
             super()
 
             const root = this.attachShadow({ mode: 'open' })
-            const para = document.createElement('p')
             const content = this.getAttribute('content')
             const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
+            const rootAddition = this.hasAttribute('rootAddition') ? this.getAttribute('rootAddition') : 'shadow-content'
 
-            root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
+            root.innerHTML = `<div class="shadow-div"><p class="${className}">${content}</p><input /><slot></slot></div>${rootAddition}`
           }
         })
       }
diff --git a/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js b/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
new file mode 100644
index 000000000000..d0e58307268a
--- /dev/null
+++ b/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
@@ -0,0 +1,770 @@
+describe('src/cy/commands/traversals - shadow dom', () => {
+  beforeEach(() => {
+    cy.visit('/fixtures/shadow-dom.html')
+  })
+
+  context('#closest', () => {
+    it('retrieves itself when it is the closest matching element within shadow dom', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .closest('p')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.class('shadow-3')
+      })
+    })
+
+    it('retrieves the closest element beyond shadow boundaries', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .closest('#parent-of-shadow-container-0')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.id('parent-of-shadow-container-0')
+      })
+    })
+
+    it('retrieves closest elements normally when no shadow roots', () => {
+      cy
+      .get('#shadow-element-3')
+      .closest('#parent-of-shadow-container-0')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.id('parent-of-shadow-container-0')
+      })
+    })
+
+    it('retrieves closest element when element is the shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .closest('#shadow-element-3')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.id('shadow-element-3')
+      })
+    })
+
+    it('retrieves closest element when element is within the same shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .closest('div')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.class('shadow-div')
+      })
+    })
+
+    it('retrieves closest element when element is a nested shadow root parent', () => {
+      cy
+      .get('#shadow-element-5')
+      .find('p', { includeShadowDom: true })
+      .closest('#shadow-element-4')
+      .then(($parent) => {
+        expect($parent.length).to.eq(1)
+        expect($parent[0]).to.have.id('shadow-element-4')
+      })
+    })
+
+    it('handles multiple elements in subject when parents are different', () => {
+      cy
+      .get('#shadow-element-1, #shadow-element-2')
+      .find('div', { includeShadowDom: true })
+      .closest('cy-test-element')
+      .then(($parents) => {
+        expect($parents.length).to.eq(2)
+        expect($parents[0]).to.have.id('shadow-element-1')
+        expect($parents[1]).to.have.id('shadow-element-2')
+      })
+    })
+
+    it('handles multiple elements in subject when parents are same', () => {
+      cy
+      .get('#shadow-element-9')
+      .find('.shadow-div', { includeShadowDom: true })
+      .closest('cy-test-element')
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('shadow-element-9')
+      })
+    })
+  })
+
+  context('#find', () => {
+    it('retrieves a matching element beyond shadow boundaries', () => {
+      const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
+
+      cy
+      .get('#parent-of-shadow-container-0')
+      .find('p', { includeShadowDom: true })
+      .then(($element) => {
+        expect($element.length).to.eq(1)
+        expect($element[0]).to.eq(el)
+      })
+    })
+
+    it('retrieves a matching element when no shadow roots', () => {
+      const el = cy.$$('#shadow-element-3')[0]
+
+      cy
+      .get('#parent-of-shadow-container-0')
+      .find('#shadow-element-3', { includeShadowDom: true })
+      .then(($element) => {
+        expect($element.length).to.eq(1)
+        expect($element[0]).to.eq(el)
+      })
+    })
+
+    it('allows traversal when already within a shadow root', () => {
+      const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
+
+      cy
+      .get('#shadow-element-3')
+      .shadow()
+      .find('p')
+      .then(($element) => {
+        expect($element.length).to.eq(1)
+        expect($element[0]).to.eq(el)
+      })
+    })
+
+    // https://github.com/cypress-io/cypress/issues/7676
+    it('does not error when querySelectorAll is wrapped and snapshots are off', () => {
+      cy.visit('/fixtures/shadow-dom.html?wrap-qsa=true')
+      cy.get('#shadow-element-1').find('.shadow-1', { includeShadowDom: true })
+    })
+  })
+
+  context('#parent', () => {
+    it('retrieves parent within shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .parent()
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.class('shadow-div')
+      })
+    })
+
+    it('retrieves parent by selector within shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('p', { includeShadowDom: true })
+      .parent('.shadow-div')
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.class('shadow-div')
+      })
+    })
+
+    it('retrieves parent when parent is shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('div', { includeShadowDom: true })
+      .parent()
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('shadow-element-3')
+      })
+    })
+
+    it('retrieves parent by selector when parent is shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .find('div', { includeShadowDom: true })
+      .parent('#shadow-element-3')
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('shadow-element-3')
+      })
+    })
+
+    it('retrieves parent when element is shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .parent()
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+      })
+    })
+
+    it('retrieves parent by selector when element is shadow root', () => {
+      cy
+      .get('#shadow-element-3')
+      .parent('#parent-of-shadow-container-1')
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+      })
+    })
+
+    it('handles multiple elements in subject when parents are different', () => {
+      cy
+      .get('#shadow-element-1, #shadow-element-2')
+      .find('div', { includeShadowDom: true })
+      .parent()
+      .then(($parents) => {
+        expect($parents.length).to.eq(2)
+        expect($parents[0]).to.have.id('shadow-element-1')
+        expect($parents[1]).to.have.id('shadow-element-2')
+      })
+    })
+
+    it('handles multiple elements in subject when parents are same', () => {
+      cy
+      .get('#shadow-element-9')
+      .find('.shadow-div', { includeShadowDom: true })
+      .parent()
+      .then(($parents) => {
+        expect($parents.length).to.eq(1)
+        expect($parents[0]).to.have.id('shadow-element-9')
+      })
+    })
+  })
+
+  context('#parents', () => {
+    describe('parents()', () => {
+      it('retrieves all parents, including those beyond shadow boundaries', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parents()
+        .then(($parents) => {
+          expect($parents.length).to.eq(6)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.match('body')
+          expect($parents[5]).to.match('html')
+        })
+      })
+
+      it('retrieves parents normally when no shadow roots exist', () => {
+        cy
+        .get('#shadow-element-3')
+        .parents()
+        .then(($parents) => {
+          expect($parents.length).to.eq(4)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[2]).to.match('body')
+          expect($parents[3]).to.match('html')
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('#shadow-element-3, #shadow-element-8')
+        .find('p', { includeShadowDom: true })
+        .parents()
+        .then(($parents) => {
+          expect($parents.length).to.eq(10)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.have.class('shadow-div')
+          expect($parents[5]).to.have.id('shadow-element-8')
+          expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+          expect($parents[8]).to.match('body')
+          expect($parents[9]).to.match('html')
+        })
+      })
+    })
+
+    describe('parents(selector) - ', () => {
+      it('retrieves parents by selector within shadow root', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parents('.shadow-div')
+        .then(($parents) => {
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.class('shadow-div')
+        })
+      })
+
+      it('retrieves parents by selector within and outside of shadow root', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parents('div')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-0')
+        })
+      })
+
+      it('retrieves parents by selector outside of shadow root', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parents('#parent-of-shadow-container-0')
+        .then(($parents) => {
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-0')
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('#shadow-element-3, #shadow-element-8')
+        .find('p', { includeShadowDom: true })
+        .parents('.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[2]).to.match('body')
+        })
+      })
+    })
+  })
+
+  context('#parentsUntil', () => {
+    describe('parentsUntil()', () => {
+      it('retrieves all parents, including those beyond shadow boundaries', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parentsUntil()
+        .then(($parents) => {
+          expect($parents.length).to.eq(6)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.match('body')
+          expect($parents[5]).to.match('html')
+        })
+      })
+
+      it('retrieves parents normally when no shadow roots exist', () => {
+        cy
+        .get('#shadow-element-3')
+        .parentsUntil()
+        .then(($parents) => {
+          expect($parents.length).to.eq(4)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[2]).to.match('body')
+          expect($parents[3]).to.match('html')
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('#shadow-element-3, #shadow-element-8')
+        .find('p', { includeShadowDom: true })
+        .parentsUntil()
+        .then(($parents) => {
+          expect($parents.length).to.eq(10)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.have.class('shadow-div')
+          expect($parents[5]).to.have.id('shadow-element-8')
+          expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+          expect($parents[8]).to.match('body')
+          expect($parents[9]).to.match('html')
+        })
+      })
+    })
+
+    describe('parentsUntil(selector)', () => {
+      it('retrieves parents until selector within shadow root', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-8-nested-3', { includeShadowDom: true })
+        .parentsUntil('.shadow-div')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.class('shadow-8-nested-2')
+          expect($parents[1]).to.have.class('shadow-8-nested-1')
+          expect($parents[2]).to.have.class('shadow-content')
+        })
+      })
+
+      it('retrieves parents until selector within and outside of shadow root', () => {
+        cy
+        .get('#shadow-element-3')
+        .find('p', { includeShadowDom: true })
+        .parentsUntil('#parent-of-shadow-container-0')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+        })
+      })
+
+      it('retrieves parents until selector normally when no shadow roots exist', () => {
+        cy
+        .get('#shadow-element-3')
+        .parentsUntil('#parent-of-shadow-container-0')
+        .then(($parents) => {
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('#shadow-element-3, #shadow-element-8')
+        .find('p', { includeShadowDom: true })
+        .parentsUntil('body')
+        .then(($parents) => {
+          expect($parents.length).to.eq(8)
+          expect($parents[0]).to.have.class('shadow-div')
+          expect($parents[1]).to.have.id('shadow-element-3')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.have.class('shadow-div')
+          expect($parents[5]).to.have.id('shadow-element-8')
+          expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+        })
+      })
+    })
+
+    describe('parentsUntil(selector, filter)', () => {
+      it('retrieves parents until selector within shadow root and filters result', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-8-nested-3', { includeShadowDom: true })
+        .parentsUntil('.shadow-div', '.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.class('shadow-8-nested-1')
+        })
+      })
+
+      it('retrieves parents until selector within and outside of shadow root and filters result', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-8-nested-3', { includeShadowDom: true })
+        .parentsUntil('#parent-of-shadow-container-0', '.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.class('shadow-8-nested-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[2]).to.match('body')
+        })
+      })
+
+      it('retrieves parents until selector normally when no shadow roots exist and filters result', () => {
+        cy
+        .get('#shadow-element-3')
+        .parentsUntil('body', '.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('#shadow-element-3, #shadow-element-8')
+        .find('p', { includeShadowDom: true })
+        .parentsUntil('html', '.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(3)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[2]).to.match('body')
+        })
+      })
+    })
+
+    describe('parentsUntil(element)', () => {
+      it('retrieves parents until element within shadow root', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl[0])
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-8-nested-2')
+            expect($parents[1]).to.have.class('shadow-8-nested-1')
+            expect($parents[2]).to.have.class('shadow-content')
+          })
+        })
+      })
+
+      it('retrieves parents until element within and outside of shadow root', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl[0])
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-div')
+            expect($parents[1]).to.have.id('shadow-element-3')
+            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('retrieves parents until element normally when no shadow roots exist', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .parentsUntil($untilEl[0])
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('html')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl[0])
+          .then(($parents) => {
+            expect($parents.length).to.eq(9)
+            expect($parents[0]).to.have.class('shadow-div')
+            expect($parents[1]).to.have.id('shadow-element-3')
+            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+            expect($parents[4]).to.have.class('shadow-div')
+            expect($parents[5]).to.have.id('shadow-element-8')
+            expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+            expect($parents[8]).to.match('body')
+          })
+        })
+      })
+    })
+
+    describe('parentsUntil(element, filter)', () => {
+      it('retrieves parents until element within shadow root and filters result', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl[0], '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+          })
+        })
+      })
+
+      it('retrieves parents until element within and outside of shadow root and filters result', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl[0], '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[2]).to.match('body')
+          })
+        })
+      })
+
+      it('retrieves parents until element normally when no shadow roots exist and filters result', () => {
+        cy
+        .get('body')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .parentsUntil($untilEl[0], '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('html')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl[0], '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[2]).to.match('body')
+          })
+        })
+      })
+    })
+
+    describe('parentsUntil(jQueryElement)', () => {
+      it('retrieves parents until jquery element within shadow root', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl)
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-8-nested-2')
+            expect($parents[1]).to.have.class('shadow-8-nested-1')
+            expect($parents[2]).to.have.class('shadow-content')
+          })
+        })
+      })
+
+      it('retrieves parents until jquery element within and outside of shadow root', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl)
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-div')
+            expect($parents[1]).to.have.id('shadow-element-3')
+            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('retrieves parents until jquery element normally when no shadow roots exist', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .parentsUntil($untilEl)
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('html')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl)
+          .then(($parents) => {
+            expect($parents.length).to.eq(9)
+            expect($parents[0]).to.have.class('shadow-div')
+            expect($parents[1]).to.have.id('shadow-element-3')
+            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+            expect($parents[4]).to.have.class('shadow-div')
+            expect($parents[5]).to.have.id('shadow-element-8')
+            expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+            expect($parents[8]).to.match('body')
+          })
+        })
+      })
+    })
+
+    describe('parentsUntil(jQueryElement, filter)', () => {
+      it('retrieves parents until jquery element within shadow root and filters result', () => {
+        cy
+        .get('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl, '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+          })
+        })
+      })
+
+      it('retrieves parents until jquery element within and outside of shadow root and filters result', () => {
+        cy
+        .get('#parent-of-shadow-container-0')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-8')
+          .find('.shadow-8-nested-3', { includeShadowDom: true })
+          .parentsUntil($untilEl, '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[2]).to.match('body')
+          })
+        })
+      })
+
+      it('retrieves parents until jquery element normally when no shadow roots exist and filters result', () => {
+        cy
+        .get('body')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3')
+          .parentsUntil($untilEl, '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          })
+        })
+      })
+
+      it('handles multiple elements in subject', () => {
+        cy
+        .get('html')
+        .then(($untilEl) => {
+          cy
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
+          .parentsUntil($untilEl, '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[2]).to.match('body')
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index 7d6e8e8a4b27..405857217d4c 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -362,108 +362,4 @@ describe('src/cy/commands/traversals', () => {
       cy.get('#dom').find('#button').should('be.visible')
     })
   })
-
-  describe('shadow dom', () => {
-    beforeEach(() => {
-      cy.visit('/fixtures/shadow-dom.html')
-    })
-
-    describe('find', () => {
-      it('retrieves a matching element beyond shadow boundaries', () => {
-        const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
-
-        cy
-        .get('#parent-of-shadow-container-0')
-        .find('p', { includeShadowDom: true })
-        .then(($element) => {
-          expect($element.length).to.eq(1)
-          expect($element[0]).to.eq(el)
-        })
-      })
-
-      it('retrieves a matching element when no shadow roots', () => {
-        const el = cy.$$('#shadow-element-3')[0]
-
-        cy
-        .get('#parent-of-shadow-container-0')
-        .find('#shadow-element-3', { includeShadowDom: true })
-        .then(($element) => {
-          expect($element.length).to.eq(1)
-          expect($element[0]).to.eq(el)
-        })
-      })
-
-      it('allows traversal when already within a shadow root', () => {
-        const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
-
-        cy
-        .get('#shadow-element-3')
-        .shadow()
-        .find('p')
-        .then(($element) => {
-          expect($element.length).to.eq(1)
-          expect($element[0]).to.eq(el)
-        })
-      })
-
-      // https://github.com/cypress-io/cypress/issues/7676
-      it('does not error when querySelectorAll is wrapped and snapshots are off', () => {
-        cy.visit('/fixtures/shadow-dom.html?wrap-qsa=true')
-        cy.get('#shadow-element-1').find('.shadow-1', { includeShadowDom: true })
-      })
-    })
-
-    describe('closest', () => {
-      it('retrieves the closest element beyond shadow boundaries', () => {
-        cy
-        .get('#shadow-element-3')
-        .find('p', { includeShadowDom: true })
-        .closest('#parent-of-shadow-container-0')
-        .then(($parent) => {
-          expect($parent.length).to.eq(1)
-          expect($parent[0].id).to.eq('parent-of-shadow-container-0')
-        })
-      })
-
-      it('retrieves closest elements normally when no shadow roots', () => {
-        cy
-        .get('#shadow-element-3')
-        .closest('#parent-of-shadow-container-0')
-        .then(($parent) => {
-          expect($parent.length).to.eq(1)
-          expect($parent[0].id).to.eq('parent-of-shadow-container-0')
-        })
-      })
-    })
-
-    describe('parents', () => {
-      it('retrieves all parents, including those beyond shadow boundaries', () => {
-        cy
-        .get('#shadow-element-3')
-        .find('p', { includeShadowDom: true })
-        .parents()
-        .then(($parents) => {
-          expect($parents.length).to.eq(5)
-          expect($parents[0].id).to.eq('shadow-element-3')
-          expect($parents[1].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-0')
-          expect($parents[3].nodeName).to.eq('BODY')
-          expect($parents[4].nodeName).to.eq('HTML')
-        })
-      })
-
-      it('retrieves parents normally when no shadow roots exist', () => {
-        cy
-        .get('#shadow-element-3')
-        .parents()
-        .then(($parents) => {
-          expect($parents.length).to.eq(4)
-          expect($parents[0].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[1].id).to.eq('parent-of-shadow-container-0')
-          expect($parents[2].nodeName).to.eq('BODY')
-          expect($parents[3].nodeName).to.eq('HTML')
-        })
-      })
-    })
-  })
 })
diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index cfcca6c8aa09..82e7145d4085 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -19,18 +19,19 @@ const optInShadowTraversals = {
   },
 }
 
-const autoShadowTraversals = {
-  parents: (cy, $el, arg1) => {
-    const parents = $el.map((i, el) => {
-      return $elements.getAllParents(el)
-    })
+const sortedUnique = (cy, $el) => {
+  // we want _.uniq() to keep the elements with higher indexes instead of lower
+  // so we reverse, uniq, then reverse again
+  // so [div1, body, html, div2, body, html]
+  // becomes [div1, div2, body, html] and not [div1, body, html, div2]
+  return cy.$$(_($el).reverse().uniq().reverse().value())
+}
 
-    return cy.$$(parents)
-  },
-  closest: (cy, $el, arg1) => {
+const autoShadowTraversals = {
+  closest: (cy, $el, selector) => {
     const nodes = _.reduce($el, (nodes, el) => {
       const getClosest = (node) => {
-        const closestNode = node.closest(arg1)
+        const closestNode = node.closest(selector)
 
         if (closestNode) return nodes.concat(closestNode)
 
@@ -44,7 +45,44 @@ const autoShadowTraversals = {
       return getClosest(el)
     }, [])
 
-    return cy.$$(nodes)
+    return sortedUnique(cy, nodes)
+  },
+  parent: (cy, $el) => {
+    const parents = $el.map((i, el) => {
+      return $elements.getParent(el)
+    })
+
+    return sortedUnique(cy, parents)
+  },
+  parents: (cy, $el, selector) => {
+    let $parents = $el.map((i, el) => {
+      return $elements.getAllParents(el)
+    })
+
+    if ($el.length > 1) {
+      $parents = sortedUnique(cy, $parents)
+    }
+
+    if (!selector) {
+      return $parents
+    }
+
+    return $parents.filter(selector)
+  },
+  parentsUntil: (cy, $el, selector, filter) => {
+    let $parents = $el.map((i, el) => {
+      return $elements.getAllParents(el, selector)
+    })
+
+    if ($el.length > 1) {
+      $parents = sortedUnique(cy, $parents)
+    }
+
+    if (!filter) {
+      return $parents
+    }
+
+    return $parents.filter(filter)
   },
 }
 
diff --git a/packages/driver/src/dom/elements.ts b/packages/driver/src/dom/elements.ts
index 8dd7ea532471..1b581ba3679c 100644
--- a/packages/driver/src/dom/elements.ts
+++ b/packages/driver/src/dom/elements.ts
@@ -629,11 +629,13 @@ const getParent = (el) => {
   return null
 }
 
-const getAllParents = (el) => {
+const getAllParents = (el: HTMLElement, untilSelector?: string) => {
   const collectParents = (parents, node) => {
     const parent = getParent(node)
 
-    if (!parent) return parents
+    if (!parent || untilSelector && $(parent).is(untilSelector)) {
+      return parents
+    }
 
     return collectParents(parents.concat(parent), parent)
   }
