fix: Improve support for shadow dom traversal methods (#8202)

* add tests for shadow dom parents with selector Co-authored-by: Zach Panzarino <[email protected]> * fix cy.parents(<selector>) shadow dom implementation * add support for .parent() in shadow dom * reorder alphabetically * add support for parentsUntil and multiple elements in subject * move shadow traversals tests into own file * fix traversal unique sorting $.uniqueSort was failing the unique part in firefox. also had the ordering wrong. Co-authored-by: Zach Panzarino <[email protected]>
cypress-io · Aug 13, 2020 · 14e13f3 · 14e13f3 · cypress-bot · Aug 13, 2020
1 parent cb19f77
commit 14e13f3
Show file tree

Hide file tree

Showing 5 changed files with 844 additions and 122 deletions.
diff --git a/packages/driver/cypress/fixtures/shadow-dom.html b/packages/driver/cypress/fixtures/shadow-dom.html
@@ -3,22 +3,38 @@
   <head>
     <title>Shadow DOM Fixture</title>
   </head>
-  <body>
+  <body class="filter-me">
     <div id="non-shadow-element" class="in-and-out">Non Shadow</div>
     <cy-test-element id="shadow-element-1" innerClass="shadow-1" content="Shadow Content 1"></cy-test-element>
     <cy-test-element id="shadow-element-2" innerClass="shadow-2" content="Shadow Content 2"></cy-test-element>
     <div id="parent-of-shadow-container-0">
-      <div id="parent-of-shadow-container-1">
+      <div id="parent-of-shadow-container-1" class="filter-me">
         <cy-test-element id="shadow-element-3" innerClass="shadow-3" content="Shadow Content 3"></cy-test-element>
       </div>
     </div>
-    <cy-test-element innerClass="shadow-4" content="Shadow Content 4">
-      <cy-test-element innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
+    <cy-test-element id="shadow-element-4" innerClass="shadow-4" content="Shadow Content 4">
+      <cy-test-element id="shadow-element-5" innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
     </cy-test-element>
     <cy-test-element innerClass="shadow-6" content="Shadow Content 6">
       <div class="in-shadow-slot">In Shadow Slot</div>
     </cy-test-element>
     <cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
+    <div id="parent-of-shadow-container-2">
+      <div id="parent-of-shadow-container-3" class="filter-me">
+        <cy-test-element id="shadow-element-8" content="
+          <span class='shadow-8-nested-1 filter-me'>
+            <span class='shadow-8-nested-2'>
+              <span class='shadow-8-nested-3 shadow-8-nested'>Shadow </span>
+              <span class='shadow-8-nested-4 shadow-8-nested'>Content </span>
+              <span class='shadow-8-nested-5 shadow-8-nested'>8</span>
+            </span>
+          </span>
+          "></cy-test-element>
+      </div>
+    </div>
+    <cy-test-element id="shadow-element-9" content="Shadow Content 9" rootAddition="
+      <div class='shadow-div'>Shadow Content 9</div>
+    "></cy-test-element>
 
     <script type="text/javascript">
       if (window.customElements) {
@@ -27,11 +43,11 @@
             super()
 
             const root = this.attachShadow({ mode: 'open' })
-            const para = document.createElement('p')
             const content = this.getAttribute('content')
             const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
+            const rootAddition = this.hasAttribute('rootAddition') ? this.getAttribute('rootAddition') : 'shadow-content'
 
-            root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
+            root.innerHTML = `<div class="shadow-div"><p class="${className}">${content}</p><input /><slot></slot></div>${rootAddition}`
           }
         })
       }