Skip to content

Commit 14e13f3

Browse files
chrisbreidingpanzarino
chrisbreiding
and
panzarino
authored
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]>
1 parent cb19f77 commit 14e13f3

File tree

5 files changed

+844
-122
lines changed

5 files changed

+844
-122
lines changed

‎packages/driver/cypress/fixtures/shadow-dom.html‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,38 @@
33
<head>
44
<title>Shadow DOM Fixture</title>
55
</head>
6-
<body>
6+
<body class="filter-me">
77
<div id="non-shadow-element" class="in-and-out">Non Shadow</div>
88
<cy-test-element id="shadow-element-1" innerClass="shadow-1" content="Shadow Content 1"></cy-test-element>
99
<cy-test-element id="shadow-element-2" innerClass="shadow-2" content="Shadow Content 2"></cy-test-element>
1010
<div id="parent-of-shadow-container-0">
11-
<div id="parent-of-shadow-container-1">
11+
<div id="parent-of-shadow-container-1" class="filter-me">
1212
<cy-test-element id="shadow-element-3" innerClass="shadow-3" content="Shadow Content 3"></cy-test-element>
1313
</div>
1414
</div>
15-
<cy-test-element innerClass="shadow-4" content="Shadow Content 4">
16-
<cy-test-element innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
15+
<cy-test-element id="shadow-element-4" innerClass="shadow-4" content="Shadow Content 4">
16+
<cy-test-element id="shadow-element-5" innerClass="shadow-5" content="Shadow Content 5"></cy-test-element>
1717
</cy-test-element>
1818
<cy-test-element innerClass="shadow-6" content="Shadow Content 6">
1919
<div class="in-shadow-slot">In Shadow Slot</div>
2020
</cy-test-element>
2121
<cy-test-element id="shadow-element-7" innerClass="in-and-out" content="Shadow Content 7"></cy-test-element>
22+
<div id="parent-of-shadow-container-2">
23+
<div id="parent-of-shadow-container-3" class="filter-me">
24+
<cy-test-element id="shadow-element-8" content="
25+
<span class='shadow-8-nested-1 filter-me'>
26+
<span class='shadow-8-nested-2'>
27+
<span class='shadow-8-nested-3 shadow-8-nested'>Shadow </span>
28+
<span class='shadow-8-nested-4 shadow-8-nested'>Content </span>
29+
<span class='shadow-8-nested-5 shadow-8-nested'>8</span>
30+
</span>
31+
</span>
32+
"></cy-test-element>
33+
</div>
34+
</div>
35+
<cy-test-element id="shadow-element-9" content="Shadow Content 9" rootAddition="
36+
<div class='shadow-div'>Shadow Content 9</div>
37+
"></cy-test-element>
2238

2339
<script type="text/javascript">
2440
if (window.customElements) {
@@ -27,11 +43,11 @@
2743
super()
2844

2945
const root = this.attachShadow({ mode: 'open' })
30-
const para = document.createElement('p')
3146
const content = this.getAttribute('content')
3247
const className = this.hasAttribute('innerClass') ? this.getAttribute('innerClass') : 'shadow-content'
48+
const rootAddition = this.hasAttribute('rootAddition') ? this.getAttribute('rootAddition') : 'shadow-content'
3349

34-
root.innerHTML = `<p class="${className}">${content}</p><input /><slot></slot>`
50+
root.innerHTML = `<div class="shadow-div"><p class="${className}">${content}</p><input /><slot></slot></div>${rootAddition}`
3551
}
3652
})
3753
}

0 commit comments

Comments
 (0)