From c2fb0fbd0afc2ee9f6344a0ec24efa90da79285b Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Thu, 6 Aug 2020 10:55:03 -0400
Subject: [PATCH 1/7] add tests for shadow dom parents with selector

Co-authored-by: Zach Panzarino <zach@panz.io>
---
 .../driver/cypress/fixtures/shadow-dom.html   |   7 +-
 .../integration/commands/traversals_spec.js   | 159 +++++++++++++++++-
 2 files changed, 156 insertions(+), 10 deletions(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index ecb3ed20eeef..219f4e94b5a0 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -12,8 +12,8 @@
         <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>
@@ -27,11 +27,10 @@
             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'
 
-            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>`
           }
         })
       }
diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index 7d6e8e8a4b27..43ee45258d81 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -414,6 +414,17 @@ describe('src/cy/commands/traversals', () => {
     })
 
     describe('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].className).to.eq('shadow-3')
+        })
+      })
+
       it('retrieves the closest element beyond shadow boundaries', () => {
         cy
         .get('#shadow-element-3')
@@ -434,6 +445,39 @@ describe('src/cy/commands/traversals', () => {
           expect($parent[0].id).to.eq('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].id).to.eq('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].className).to.eq('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].id).to.eq('shadow-element-4')
+        })
+      })
     })
 
     describe('parents', () => {
@@ -443,12 +487,13 @@ describe('src/cy/commands/traversals', () => {
         .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')
+          expect($parents.length).to.eq(6)
+          expect($parents[0].className).to.eq('shadow-div')
+          expect($parents[1].id).to.eq('shadow-element-3')
+          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[3].id).to.eq('parent-of-shadow-container-0')
+          expect($parents[4].nodeName).to.eq('BODY')
+          expect($parents[5].nodeName).to.eq('HTML')
         })
       })
 
@@ -464,6 +509,108 @@ describe('src/cy/commands/traversals', () => {
           expect($parents[3].nodeName).to.eq('HTML')
         })
       })
+
+      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].className).to.eq('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(4)
+          expect($parents[0].className).to.eq('shadow-div')
+          expect($parents[1].id).to.eq('shadow-element-3')
+          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[3].id).to.eq('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].id).to.eq('parent-of-shadow-container-0')
+        })
+      })
+    })
+
+    describe('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].className).to.eq('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].className).to.eq('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].id).to.eq('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].id).to.eq('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].id).to.eq('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].id).to.eq('parent-of-shadow-container-1')
+        })
+      })
     })
   })
 })

From 4e2e933542d1a9145d57ac1f537a89a70d5f6d8d Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Thu, 6 Aug 2020 14:40:49 -0400
Subject: [PATCH 2/7] fix cy.parents(<selector>) shadow dom implementation

---
 .../cypress/integration/commands/traversals_spec.js      | 9 ++++-----
 packages/driver/src/cy/commands/traversals.js            | 8 ++++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index 43ee45258d81..c1b337d7f0f4 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -480,7 +480,7 @@ describe('src/cy/commands/traversals', () => {
       })
     })
 
-    describe('parents', () => {
+    describe('#parents', () => {
       it('retrieves all parents, including those beyond shadow boundaries', () => {
         cy
         .get('#shadow-element-3')
@@ -527,11 +527,10 @@ describe('src/cy/commands/traversals', () => {
         .find('p', { includeShadowDom: true })
         .parents('div')
         .then(($parents) => {
-          expect($parents.length).to.eq(4)
+          expect($parents.length).to.eq(3)
           expect($parents[0].className).to.eq('shadow-div')
-          expect($parents[1].id).to.eq('shadow-element-3')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[3].id).to.eq('parent-of-shadow-container-0')
+          expect($parents[1].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[2].id).to.eq('parent-of-shadow-container-0')
         })
       })
 
diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index cfcca6c8aa09..f68cf783e847 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -20,12 +20,16 @@ const optInShadowTraversals = {
 }
 
 const autoShadowTraversals = {
-  parents: (cy, $el, arg1) => {
+  parents: (cy, $el, selector) => {
     const parents = $el.map((i, el) => {
       return $elements.getAllParents(el)
     })
 
-    return cy.$$(parents)
+    if (!selector) {
+      return cy.$$(parents)
+    }
+
+    return cy.$$(parents).filter(selector)
   },
   closest: (cy, $el, arg1) => {
     const nodes = _.reduce($el, (nodes, el) => {

From c52ca01959912f9cbb22efc049b9f9e096c953ca Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Thu, 6 Aug 2020 14:48:40 -0400
Subject: [PATCH 3/7] add support for .parent() in shadow dom

---
 .../integration/commands/traversals_spec.js   |  6 ++---
 packages/driver/src/cy/commands/traversals.js | 27 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index c1b337d7f0f4..08f9a995d41b 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -368,7 +368,7 @@ describe('src/cy/commands/traversals', () => {
       cy.visit('/fixtures/shadow-dom.html')
     })
 
-    describe('find', () => {
+    describe('#find', () => {
       it('retrieves a matching element beyond shadow boundaries', () => {
         const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
 
@@ -413,7 +413,7 @@ describe('src/cy/commands/traversals', () => {
       })
     })
 
-    describe('closest', () => {
+    describe('#closest', () => {
       it('retrieves itself when it is the closest matching element within shadow dom', () => {
         cy
         .get('#shadow-element-3')
@@ -546,7 +546,7 @@ describe('src/cy/commands/traversals', () => {
       })
     })
 
-    describe('parent', () => {
+    describe('#parent', () => {
       it('retrieves parent within shadow root', () => {
         cy
         .get('#shadow-element-3')
diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index f68cf783e847..d80eaf0ae095 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -20,17 +20,6 @@ const optInShadowTraversals = {
 }
 
 const autoShadowTraversals = {
-  parents: (cy, $el, selector) => {
-    const parents = $el.map((i, el) => {
-      return $elements.getAllParents(el)
-    })
-
-    if (!selector) {
-      return cy.$$(parents)
-    }
-
-    return cy.$$(parents).filter(selector)
-  },
   closest: (cy, $el, arg1) => {
     const nodes = _.reduce($el, (nodes, el) => {
       const getClosest = (node) => {
@@ -50,6 +39,22 @@ const autoShadowTraversals = {
 
     return cy.$$(nodes)
   },
+  parent: (cy, $el) => {
+    const parent = $elements.getParent($el[0])
+
+    return cy.$$(parent)
+  },
+  parents: (cy, $el, selector) => {
+    const parents = $el.map((i, el) => {
+      return $elements.getAllParents(el)
+    })
+
+    if (!selector) {
+      return cy.$$(parents)
+    }
+
+    return cy.$$(parents).filter(selector)
+  },
 }
 
 module.exports = (Commands, Cypress, cy) => {

From b937d7f74c91d3daf86c12daf492f97cca100be5 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Thu, 6 Aug 2020 14:49:29 -0400
Subject: [PATCH 4/7] reorder alphabetically

---
 .../integration/commands/traversals_spec.js   | 186 +++++++++---------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index 08f9a995d41b..510f96a8a0e6 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -368,51 +368,6 @@ describe('src/cy/commands/traversals', () => {
       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 itself when it is the closest matching element within shadow dom', () => {
         cy
@@ -480,69 +435,48 @@ describe('src/cy/commands/traversals', () => {
       })
     })
 
-    describe('#parents', () => {
-      it('retrieves all parents, including those beyond shadow boundaries', () => {
+    describe('#find', () => {
+      it('retrieves a matching element beyond shadow boundaries', () => {
+        const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
+
         cy
-        .get('#shadow-element-3')
+        .get('#parent-of-shadow-container-0')
         .find('p', { includeShadowDom: true })
-        .parents()
-        .then(($parents) => {
-          expect($parents.length).to.eq(6)
-          expect($parents[0].className).to.eq('shadow-div')
-          expect($parents[1].id).to.eq('shadow-element-3')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[3].id).to.eq('parent-of-shadow-container-0')
-          expect($parents[4].nodeName).to.eq('BODY')
-          expect($parents[5].nodeName).to.eq('HTML')
+        .then(($element) => {
+          expect($element.length).to.eq(1)
+          expect($element[0]).to.eq(el)
         })
       })
 
-      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')
-        })
-      })
+      it('retrieves a matching element when no shadow roots', () => {
+        const el = cy.$$('#shadow-element-3')[0]
 
-      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].className).to.eq('shadow-div')
+        .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('retrieves parents by selector within and outside of shadow root', () => {
+      it('allows traversal when already within a shadow root', () => {
+        const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
+
         cy
         .get('#shadow-element-3')
-        .find('p', { includeShadowDom: true })
-        .parents('div')
-        .then(($parents) => {
-          expect($parents.length).to.eq(3)
-          expect($parents[0].className).to.eq('shadow-div')
-          expect($parents[1].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-0')
+        .shadow()
+        .find('p')
+        .then(($element) => {
+          expect($element.length).to.eq(1)
+          expect($element[0]).to.eq(el)
         })
       })
 
-      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].id).to.eq('parent-of-shadow-container-0')
-        })
+      // 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 })
       })
     })
 
@@ -611,5 +545,71 @@ describe('src/cy/commands/traversals', () => {
         })
       })
     })
+
+    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].className).to.eq('shadow-div')
+          expect($parents[1].id).to.eq('shadow-element-3')
+          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[3].id).to.eq('parent-of-shadow-container-0')
+          expect($parents[4].nodeName).to.eq('BODY')
+          expect($parents[5].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')
+        })
+      })
+
+      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].className).to.eq('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].className).to.eq('shadow-div')
+          expect($parents[1].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[2].id).to.eq('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].id).to.eq('parent-of-shadow-container-0')
+        })
+      })
+    })
   })
 })

From c6e951e6dc924375ab5a3c54cd3d645dcd688d42 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 11 Aug 2020 10:32:06 -0400
Subject: [PATCH 5/7] add support for parentsUntil and multiple elements in
 subject

---
 .../driver/cypress/fixtures/shadow-dom.html   |  21 +-
 .../integration/commands/traversals_spec.js   | 624 ++++++++++++++++--
 packages/driver/src/cy/commands/traversals.js |  38 +-
 packages/driver/src/dom/elements.ts           |   6 +-
 4 files changed, 615 insertions(+), 74 deletions(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index 219f4e94b5a0..c75e753632f8 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -8,7 +8,7 @@
     <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>
@@ -19,6 +19,22 @@
       <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) {
@@ -29,8 +45,9 @@
             const root = this.attachShadow({ mode: 'open' })
             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 = `<div class="shadow-div"><p class="${className}">${content}</p><input /><slot></slot></div>`
+            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_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index 510f96a8a0e6..b0d82df14f62 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -368,7 +368,7 @@ describe('src/cy/commands/traversals', () => {
       cy.visit('/fixtures/shadow-dom.html')
     })
 
-    describe('#closest', () => {
+    context('#closest', () => {
       it('retrieves itself when it is the closest matching element within shadow dom', () => {
         cy
         .get('#shadow-element-3')
@@ -376,7 +376,7 @@ describe('src/cy/commands/traversals', () => {
         .closest('p')
         .then(($parent) => {
           expect($parent.length).to.eq(1)
-          expect($parent[0].className).to.eq('shadow-3')
+          expect($parent[0]).to.have.class('shadow-3')
         })
       })
 
@@ -387,7 +387,7 @@ describe('src/cy/commands/traversals', () => {
         .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')
+          expect($parent[0]).to.have.id('parent-of-shadow-container-0')
         })
       })
 
@@ -397,7 +397,7 @@ describe('src/cy/commands/traversals', () => {
         .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')
+          expect($parent[0]).to.have.id('parent-of-shadow-container-0')
         })
       })
 
@@ -408,7 +408,7 @@ describe('src/cy/commands/traversals', () => {
         .closest('#shadow-element-3')
         .then(($parent) => {
           expect($parent.length).to.eq(1)
-          expect($parent[0].id).to.eq('shadow-element-3')
+          expect($parent[0]).to.have.id('shadow-element-3')
         })
       })
 
@@ -419,7 +419,7 @@ describe('src/cy/commands/traversals', () => {
         .closest('div')
         .then(($parent) => {
           expect($parent.length).to.eq(1)
-          expect($parent[0].className).to.eq('shadow-div')
+          expect($parent[0]).to.have.class('shadow-div')
         })
       })
 
@@ -430,12 +430,35 @@ describe('src/cy/commands/traversals', () => {
         .closest('#shadow-element-4')
         .then(($parent) => {
           expect($parent.length).to.eq(1)
-          expect($parent[0].id).to.eq('shadow-element-4')
+          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')
         })
       })
     })
 
-    describe('#find', () => {
+    context('#find', () => {
       it('retrieves a matching element beyond shadow boundaries', () => {
         const el = cy.$$('#shadow-element-3')[0].shadowRoot.querySelector('p')
 
@@ -480,7 +503,7 @@ describe('src/cy/commands/traversals', () => {
       })
     })
 
-    describe('#parent', () => {
+    context('#parent', () => {
       it('retrieves parent within shadow root', () => {
         cy
         .get('#shadow-element-3')
@@ -488,7 +511,7 @@ describe('src/cy/commands/traversals', () => {
         .parent()
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].className).to.eq('shadow-div')
+          expect($parents[0]).to.have.class('shadow-div')
         })
       })
 
@@ -499,7 +522,7 @@ describe('src/cy/commands/traversals', () => {
         .parent('.shadow-div')
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].className).to.eq('shadow-div')
+          expect($parents[0]).to.have.class('shadow-div')
         })
       })
 
@@ -510,7 +533,7 @@ describe('src/cy/commands/traversals', () => {
         .parent()
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].id).to.eq('shadow-element-3')
+          expect($parents[0]).to.have.id('shadow-element-3')
         })
       })
 
@@ -521,7 +544,7 @@ describe('src/cy/commands/traversals', () => {
         .parent('#shadow-element-3')
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].id).to.eq('shadow-element-3')
+          expect($parents[0]).to.have.id('shadow-element-3')
         })
       })
 
@@ -531,7 +554,7 @@ describe('src/cy/commands/traversals', () => {
         .parent()
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
         })
       })
 
@@ -541,73 +564,550 @@ describe('src/cy/commands/traversals', () => {
         .parent('#parent-of-shadow-container-1')
         .then(($parents) => {
           expect($parents.length).to.eq(1)
-          expect($parents[0].id).to.eq('parent-of-shadow-container-1')
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
         })
       })
-    })
 
-    describe('#parents', () => {
-      it('retrieves all parents, including those beyond shadow boundaries', () => {
+      it('handles multiple elements in subject when parents are different', () => {
         cy
-        .get('#shadow-element-3')
-        .find('p', { includeShadowDom: true })
-        .parents()
+        .get('#shadow-element-1, #shadow-element-2')
+        .find('div', { includeShadowDom: true })
+        .parent()
         .then(($parents) => {
-          expect($parents.length).to.eq(6)
-          expect($parents[0].className).to.eq('shadow-div')
-          expect($parents[1].id).to.eq('shadow-element-3')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[3].id).to.eq('parent-of-shadow-container-0')
-          expect($parents[4].nodeName).to.eq('BODY')
-          expect($parents[5].nodeName).to.eq('HTML')
+          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('retrieves parents normally when no shadow roots exist', () => {
+      it('handles multiple elements in subject when parents are same', () => {
         cy
-        .get('#shadow-element-3')
-        .parents()
+        .get('#shadow-element-9')
+        .find('.shadow-div', { includeShadowDom: true })
+        .parent()
         .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')
+          expect($parents.length).to.eq(1)
+          expect($parents[0]).to.have.id('shadow-element-9')
         })
       })
+    })
 
-      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].className).to.eq('shadow-div')
+    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.match('html')
+            expect($parents[2]).to.match('body')
+            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+            expect($parents[4]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[5]).to.have.id('shadow-element-3')
+            expect($parents[6]).to.have.class('shadow-div')
+            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+            expect($parents[8]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[9]).to.have.id('shadow-element-8')
+          })
         })
       })
 
-      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].className).to.eq('shadow-div')
-          expect($parents[1].id).to.eq('parent-of-shadow-container-1')
-          expect($parents[2].id).to.eq('parent-of-shadow-container-0')
+      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(2)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          })
         })
       })
+    })
 
-      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].id).to.eq('parent-of-shadow-container-0')
+    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.match('html')
+            expect($parents[2]).to.match('body')
+            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+            expect($parents[4]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[5]).to.have.id('shadow-element-3')
+            expect($parents[6]).to.have.class('shadow-div')
+            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+            expect($parents[8]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[9]).to.have.id('shadow-element-8')
+          })
+        })
+      })
+
+      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('parent-of-shadow-container-0')
+            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[3]).to.have.id('shadow-element-3')
+            expect($parents[4]).to.have.class('shadow-div')
+            expect($parents[5]).to.have.id('parent-of-shadow-container-2')
+            expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+            expect($parents[7]).to.have.id('shadow-element-8')
+          })
+        })
+      })
+
+      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(2)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          })
+        })
+
+        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('body', '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(2)
+            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          })
+        })
+      })
+
+      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('#shadow-element-8')
+          .find('.shadow-div', { includeShadowDom: true })
+          .then(($untilEl) => {
+            cy
+            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+            .parentsUntil($untilEl[0])
+            .then(($parents) => {
+              expect($parents.length).to.eq(3)
+              expect($parents[0]).to.have.class('shadow-content')
+              expect($parents[1]).to.have.class('shadow-8-nested-1')
+              expect($parents[2]).to.have.class('shadow-8-nested-2')
+            })
+          })
+        })
+      })
+
+      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(2)
+              expect($parents[0]).to.have.class('shadow-8-nested-1')
+              expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            })
+          })
+        })
+
+        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('#shadow-element-8')
+          .find('.shadow-div', { includeShadowDom: true })
+          .then(($untilEl) => {
+            cy
+            .get('.shadow-8-nested-3, .shadow-8-nested-4', { 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')
+            })
+          })
+        })
+      })
+
+      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('#shadow-element-8')
+          .find('.shadow-div', { includeShadowDom: true })
+          .then(($untilEl) => {
+            cy
+            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+            .parentsUntil($untilEl)
+            .then(($parents) => {
+              expect($parents.length).to.eq(3)
+              expect($parents[0]).to.have.class('shadow-content')
+              expect($parents[1]).to.have.class('shadow-8-nested-1')
+              expect($parents[2]).to.have.class('shadow-8-nested-2')
+            })
+          })
+        })
+      })
+
+      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(2)
+              expect($parents[0]).to.have.class('shadow-8-nested-1')
+              expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+            })
+          })
+        })
+
+        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('#shadow-element-8')
+          .find('.shadow-div', { includeShadowDom: true })
+          .then(($untilEl) => {
+            cy
+            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+            .parentsUntil($untilEl, '.filter-me')
+            .then(($parents) => {
+              expect($parents.length).to.eq(1)
+              expect($parents[0]).to.have.class('shadow-8-nested-1')
+            })
+          })
         })
       })
     })
diff --git a/packages/driver/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index d80eaf0ae095..cdbe60396b7a 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -1,3 +1,4 @@
+const $ = require('jquery')
 const _ = require('lodash')
 
 const $dom = require('../../dom')
@@ -20,10 +21,10 @@ const optInShadowTraversals = {
 }
 
 const autoShadowTraversals = {
-  closest: (cy, $el, arg1) => {
+  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)
 
@@ -37,23 +38,44 @@ const autoShadowTraversals = {
       return getClosest(el)
     }, [])
 
-    return cy.$$(nodes)
+    return $.uniqueSort(nodes)
   },
   parent: (cy, $el) => {
-    const parent = $elements.getParent($el[0])
+    const parents = $el.map((i, el) => {
+      return $elements.getParent(el)
+    })
 
-    return cy.$$(parent)
+    return $.uniqueSort(parents)
   },
   parents: (cy, $el, selector) => {
-    const parents = $el.map((i, el) => {
+    let $parents = $el.map((i, el) => {
       return $elements.getAllParents(el)
     })
 
+    if ($el.length > 1) {
+      $parents = $.uniqueSort($parents)
+    }
+
     if (!selector) {
-      return cy.$$(parents)
+      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 = $.uniqueSort($parents)
+    }
+
+    if (!filter) {
+      return $parents
     }
 
-    return cy.$$(parents).filter(selector)
+    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)
   }

From 106dbf4e7a4939f15e47e1de1ed3ce0d47fa15ba Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 11 Aug 2020 10:34:37 -0400
Subject: [PATCH 6/7] move shadow traversals tests into own file

---
 .../commands/traversals_shadow_dom_spec.js    | 749 +++++++++++++++++
 .../integration/commands/traversals_spec.js   | 750 ------------------
 2 files changed, 749 insertions(+), 750 deletions(-)
 create mode 100644 packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js

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..a8bfb9ca7397
--- /dev/null
+++ b/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
@@ -0,0 +1,749 @@
+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.match('html')
+          expect($parents[2]).to.match('body')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[5]).to.have.id('shadow-element-3')
+          expect($parents[6]).to.have.class('shadow-div')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+          expect($parents[8]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[9]).to.have.id('shadow-element-8')
+        })
+      })
+    })
+
+    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(2)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+        })
+      })
+    })
+  })
+
+  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.match('html')
+          expect($parents[2]).to.match('body')
+          expect($parents[3]).to.have.id('parent-of-shadow-container-0')
+          expect($parents[4]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[5]).to.have.id('shadow-element-3')
+          expect($parents[6]).to.have.class('shadow-div')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
+          expect($parents[8]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[9]).to.have.id('shadow-element-8')
+        })
+      })
+    })
+
+    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('parent-of-shadow-container-0')
+          expect($parents[2]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[3]).to.have.id('shadow-element-3')
+          expect($parents[4]).to.have.class('shadow-div')
+          expect($parents[5]).to.have.id('parent-of-shadow-container-2')
+          expect($parents[6]).to.have.id('parent-of-shadow-container-3')
+          expect($parents[7]).to.have.id('shadow-element-8')
+        })
+      })
+    })
+
+    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(2)
+          expect($parents[0]).to.have.class('shadow-8-nested-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+        })
+      })
+
+      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('body', '.filter-me')
+        .then(($parents) => {
+          expect($parents.length).to.eq(2)
+          expect($parents[0]).to.have.id('parent-of-shadow-container-1')
+          expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+        })
+      })
+    })
+
+    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('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .parentsUntil($untilEl[0])
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-content')
+            expect($parents[1]).to.have.class('shadow-8-nested-1')
+            expect($parents[2]).to.have.class('shadow-8-nested-2')
+          })
+        })
+      })
+    })
+
+    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(2)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          })
+        })
+      })
+
+      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('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('.shadow-8-nested-3, .shadow-8-nested-4', { 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')
+          })
+        })
+      })
+    })
+
+    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('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .parentsUntil($untilEl)
+          .then(($parents) => {
+            expect($parents.length).to.eq(3)
+            expect($parents[0]).to.have.class('shadow-content')
+            expect($parents[1]).to.have.class('shadow-8-nested-1')
+            expect($parents[2]).to.have.class('shadow-8-nested-2')
+          })
+        })
+      })
+    })
+
+    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(2)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
+          })
+        })
+      })
+
+      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('#shadow-element-8')
+        .find('.shadow-div', { includeShadowDom: true })
+        .then(($untilEl) => {
+          cy
+          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .parentsUntil($untilEl, '.filter-me')
+          .then(($parents) => {
+            expect($parents.length).to.eq(1)
+            expect($parents[0]).to.have.class('shadow-8-nested-1')
+          })
+        })
+      })
+    })
+  })
+})
diff --git a/packages/driver/cypress/integration/commands/traversals_spec.js b/packages/driver/cypress/integration/commands/traversals_spec.js
index b0d82df14f62..405857217d4c 100644
--- a/packages/driver/cypress/integration/commands/traversals_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_spec.js
@@ -362,754 +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')
-    })
-
-    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.match('html')
-            expect($parents[2]).to.match('body')
-            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
-            expect($parents[4]).to.have.id('parent-of-shadow-container-1')
-            expect($parents[5]).to.have.id('shadow-element-3')
-            expect($parents[6]).to.have.class('shadow-div')
-            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
-            expect($parents[8]).to.have.id('parent-of-shadow-container-3')
-            expect($parents[9]).to.have.id('shadow-element-8')
-          })
-        })
-      })
-
-      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(2)
-            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
-            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
-          })
-        })
-      })
-    })
-
-    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.match('html')
-            expect($parents[2]).to.match('body')
-            expect($parents[3]).to.have.id('parent-of-shadow-container-0')
-            expect($parents[4]).to.have.id('parent-of-shadow-container-1')
-            expect($parents[5]).to.have.id('shadow-element-3')
-            expect($parents[6]).to.have.class('shadow-div')
-            expect($parents[7]).to.have.id('parent-of-shadow-container-2')
-            expect($parents[8]).to.have.id('parent-of-shadow-container-3')
-            expect($parents[9]).to.have.id('shadow-element-8')
-          })
-        })
-      })
-
-      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('parent-of-shadow-container-0')
-            expect($parents[2]).to.have.id('parent-of-shadow-container-1')
-            expect($parents[3]).to.have.id('shadow-element-3')
-            expect($parents[4]).to.have.class('shadow-div')
-            expect($parents[5]).to.have.id('parent-of-shadow-container-2')
-            expect($parents[6]).to.have.id('parent-of-shadow-container-3')
-            expect($parents[7]).to.have.id('shadow-element-8')
-          })
-        })
-      })
-
-      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(2)
-            expect($parents[0]).to.have.class('shadow-8-nested-1')
-            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
-          })
-        })
-
-        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('body', '.filter-me')
-          .then(($parents) => {
-            expect($parents.length).to.eq(2)
-            expect($parents[0]).to.have.id('parent-of-shadow-container-1')
-            expect($parents[1]).to.have.id('parent-of-shadow-container-3')
-          })
-        })
-      })
-
-      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('#shadow-element-8')
-          .find('.shadow-div', { includeShadowDom: true })
-          .then(($untilEl) => {
-            cy
-            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
-            .parentsUntil($untilEl[0])
-            .then(($parents) => {
-              expect($parents.length).to.eq(3)
-              expect($parents[0]).to.have.class('shadow-content')
-              expect($parents[1]).to.have.class('shadow-8-nested-1')
-              expect($parents[2]).to.have.class('shadow-8-nested-2')
-            })
-          })
-        })
-      })
-
-      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(2)
-              expect($parents[0]).to.have.class('shadow-8-nested-1')
-              expect($parents[1]).to.have.id('parent-of-shadow-container-3')
-            })
-          })
-        })
-
-        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('#shadow-element-8')
-          .find('.shadow-div', { includeShadowDom: true })
-          .then(($untilEl) => {
-            cy
-            .get('.shadow-8-nested-3, .shadow-8-nested-4', { 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')
-            })
-          })
-        })
-      })
-
-      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('#shadow-element-8')
-          .find('.shadow-div', { includeShadowDom: true })
-          .then(($untilEl) => {
-            cy
-            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
-            .parentsUntil($untilEl)
-            .then(($parents) => {
-              expect($parents.length).to.eq(3)
-              expect($parents[0]).to.have.class('shadow-content')
-              expect($parents[1]).to.have.class('shadow-8-nested-1')
-              expect($parents[2]).to.have.class('shadow-8-nested-2')
-            })
-          })
-        })
-      })
-
-      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(2)
-              expect($parents[0]).to.have.class('shadow-8-nested-1')
-              expect($parents[1]).to.have.id('parent-of-shadow-container-3')
-            })
-          })
-        })
-
-        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('#shadow-element-8')
-          .find('.shadow-div', { includeShadowDom: true })
-          .then(($untilEl) => {
-            cy
-            .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
-            .parentsUntil($untilEl, '.filter-me')
-            .then(($parents) => {
-              expect($parents.length).to.eq(1)
-              expect($parents[0]).to.have.class('shadow-8-nested-1')
-            })
-          })
-        })
-      })
-    })
-  })
 })

From c8871d68aa6d41d61db8822248d282b6fc513812 Mon Sep 17 00:00:00 2001
From: Chris Breiding <chrisbreiding@gmail.com>
Date: Tue, 11 Aug 2020 14:45:11 -0400
Subject: [PATCH 7/7] fix traversal unique sorting

$.uniqueSort was failing the unique part in firefox. also had the ordering wrong.
---
 .../driver/cypress/fixtures/shadow-dom.html   |   2 +-
 .../commands/traversals_shadow_dom_spec.js    | 117 +++++++++++-------
 packages/driver/src/cy/commands/traversals.js |  17 ++-
 3 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
index c75e753632f8..c4c1f240542c 100644
--- a/packages/driver/cypress/fixtures/shadow-dom.html
+++ b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -3,7 +3,7 @@
   <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>
diff --git a/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js b/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
index a8bfb9ca7397..d0e58307268a 100644
--- a/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
+++ b/packages/driver/cypress/integration/commands/traversals_shadow_dom_spec.js
@@ -266,15 +266,15 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         .then(($parents) => {
           expect($parents.length).to.eq(10)
           expect($parents[0]).to.have.class('shadow-div')
-          expect($parents[1]).to.match('html')
-          expect($parents[2]).to.match('body')
+          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.id('parent-of-shadow-container-1')
-          expect($parents[5]).to.have.id('shadow-element-3')
-          expect($parents[6]).to.have.class('shadow-div')
+          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.have.id('parent-of-shadow-container-3')
-          expect($parents[9]).to.have.id('shadow-element-8')
+          expect($parents[8]).to.match('body')
+          expect($parents[9]).to.match('html')
         })
       })
     })
@@ -321,9 +321,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         .find('p', { includeShadowDom: true })
         .parents('.filter-me')
         .then(($parents) => {
-          expect($parents.length).to.eq(2)
+          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')
         })
       })
     })
@@ -368,15 +369,15 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         .then(($parents) => {
           expect($parents.length).to.eq(10)
           expect($parents[0]).to.have.class('shadow-div')
-          expect($parents[1]).to.match('html')
-          expect($parents[2]).to.match('body')
+          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.id('parent-of-shadow-container-1')
-          expect($parents[5]).to.have.id('shadow-element-3')
-          expect($parents[6]).to.have.class('shadow-div')
+          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.have.id('parent-of-shadow-container-3')
-          expect($parents[9]).to.have.id('shadow-element-8')
+          expect($parents[8]).to.match('body')
+          expect($parents[9]).to.match('html')
         })
       })
     })
@@ -426,13 +427,13 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         .then(($parents) => {
           expect($parents.length).to.eq(8)
           expect($parents[0]).to.have.class('shadow-div')
-          expect($parents[1]).to.have.id('parent-of-shadow-container-0')
+          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('shadow-element-3')
+          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('parent-of-shadow-container-2')
+          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('shadow-element-8')
+          expect($parents[7]).to.have.id('parent-of-shadow-container-2')
         })
       })
     })
@@ -455,9 +456,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         .find('.shadow-8-nested-3', { includeShadowDom: true })
         .parentsUntil('#parent-of-shadow-container-0', '.filter-me')
         .then(($parents) => {
-          expect($parents.length).to.eq(2)
+          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')
         })
       })
 
@@ -475,11 +477,12 @@ describe('src/cy/commands/traversals - shadow dom', () => {
         cy
         .get('#shadow-element-3, #shadow-element-8')
         .find('p', { includeShadowDom: true })
-        .parentsUntil('body', '.filter-me')
+        .parentsUntil('html', '.filter-me')
         .then(($parents) => {
-          expect($parents.length).to.eq(2)
+          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')
         })
       })
     })
@@ -536,17 +539,23 @@ describe('src/cy/commands/traversals - shadow dom', () => {
 
       it('handles multiple elements in subject', () => {
         cy
-        .get('#shadow-element-8')
-        .find('.shadow-div', { includeShadowDom: true })
+        .get('html')
         .then(($untilEl) => {
           cy
-          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
           .parentsUntil($untilEl[0])
           .then(($parents) => {
-            expect($parents.length).to.eq(3)
-            expect($parents[0]).to.have.class('shadow-content')
-            expect($parents[1]).to.have.class('shadow-8-nested-1')
-            expect($parents[2]).to.have.class('shadow-8-nested-2')
+            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')
           })
         })
       })
@@ -578,9 +587,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
           .find('.shadow-8-nested-3', { includeShadowDom: true })
           .parentsUntil($untilEl[0], '.filter-me')
           .then(($parents) => {
-            expect($parents.length).to.eq(2)
+            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')
           })
         })
       })
@@ -601,15 +611,17 @@ describe('src/cy/commands/traversals - shadow dom', () => {
 
       it('handles multiple elements in subject', () => {
         cy
-        .get('#shadow-element-8')
-        .find('.shadow-div', { includeShadowDom: true })
+        .get('html')
         .then(($untilEl) => {
           cy
-          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { 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')
+            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')
           })
         })
       })
@@ -667,17 +679,23 @@ describe('src/cy/commands/traversals - shadow dom', () => {
 
       it('handles multiple elements in subject', () => {
         cy
-        .get('#shadow-element-8')
-        .find('.shadow-div', { includeShadowDom: true })
+        .get('html')
         .then(($untilEl) => {
           cy
-          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
           .parentsUntil($untilEl)
           .then(($parents) => {
-            expect($parents.length).to.eq(3)
-            expect($parents[0]).to.have.class('shadow-content')
-            expect($parents[1]).to.have.class('shadow-8-nested-1')
-            expect($parents[2]).to.have.class('shadow-8-nested-2')
+            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')
           })
         })
       })
@@ -709,9 +727,10 @@ describe('src/cy/commands/traversals - shadow dom', () => {
           .find('.shadow-8-nested-3', { includeShadowDom: true })
           .parentsUntil($untilEl, '.filter-me')
           .then(($parents) => {
-            expect($parents.length).to.eq(2)
+            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')
           })
         })
       })
@@ -732,15 +751,17 @@ describe('src/cy/commands/traversals - shadow dom', () => {
 
       it('handles multiple elements in subject', () => {
         cy
-        .get('#shadow-element-8')
-        .find('.shadow-div', { includeShadowDom: true })
+        .get('html')
         .then(($untilEl) => {
           cy
-          .get('.shadow-8-nested-3, .shadow-8-nested-4', { includeShadowDom: true })
+          .get('#shadow-element-3, #shadow-element-8')
+          .find('p', { includeShadowDom: true })
           .parentsUntil($untilEl, '.filter-me')
           .then(($parents) => {
-            expect($parents.length).to.eq(1)
-            expect($parents[0]).to.have.class('shadow-8-nested-1')
+            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/src/cy/commands/traversals.js b/packages/driver/src/cy/commands/traversals.js
index cdbe60396b7a..82e7145d4085 100644
--- a/packages/driver/src/cy/commands/traversals.js
+++ b/packages/driver/src/cy/commands/traversals.js
@@ -1,4 +1,3 @@
-const $ = require('jquery')
 const _ = require('lodash')
 
 const $dom = require('../../dom')
@@ -20,6 +19,14 @@ const optInShadowTraversals = {
   },
 }
 
+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())
+}
+
 const autoShadowTraversals = {
   closest: (cy, $el, selector) => {
     const nodes = _.reduce($el, (nodes, el) => {
@@ -38,14 +45,14 @@ const autoShadowTraversals = {
       return getClosest(el)
     }, [])
 
-    return $.uniqueSort(nodes)
+    return sortedUnique(cy, nodes)
   },
   parent: (cy, $el) => {
     const parents = $el.map((i, el) => {
       return $elements.getParent(el)
     })
 
-    return $.uniqueSort(parents)
+    return sortedUnique(cy, parents)
   },
   parents: (cy, $el, selector) => {
     let $parents = $el.map((i, el) => {
@@ -53,7 +60,7 @@ const autoShadowTraversals = {
     })
 
     if ($el.length > 1) {
-      $parents = $.uniqueSort($parents)
+      $parents = sortedUnique(cy, $parents)
     }
 
     if (!selector) {
@@ -68,7 +75,7 @@ const autoShadowTraversals = {
     })
 
     if ($el.length > 1) {
-      $parents = $.uniqueSort($parents)
+      $parents = sortedUnique(cy, $parents)
     }
 
     if (!filter) {