Skip to content

Commit f550346

Browse files
cacieprinscacieprins
committed
fix select option/optgroup delegation
1 parent 90db05f commit f550346

File tree

3 files changed

+38
-32
lines changed

3 files changed

+38
-32
lines changed

‎packages/driver/cypress/e2e/dom/visibility.cy.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ describe('src/cypress/dom/visibility', {
77
function assertVisibilityForEl (el: HTMLElement) {
88
// once experimentalFastVisibility is added, switch based on the config value
99
// and use `cy-fast-expect` instead of `cy-legacy-expect` when it is enabled.
10-
const expected = el.getAttribute('cy-expect') ?? el.getAttribute('cy-legacy-expect')
10+
const expected = el.getAttribute('cy-expect') ?? (Cypress.config('experimentalFastVisibility') ?
11+
el.getAttribute('cy-fast-expect') :
12+
el.getAttribute('cy-legacy-expect'))
1113

1214
if (!expected) {
1315
throw new Error(`Expected attribute 'cy-expect' or 'cy-legacy-expect' not found on test case_ element ${el.outerHTML}`)

‎packages/driver/cypress/fixtures/visibility/form-elements.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,56 +10,56 @@ <h1>Form Elements Visibility Tests</h1>
1010

1111
<div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
1212
<h3>Select and Option Elements</h3>
13-
<select class="testCase" cy-expect="visible" id="visible-select">
14-
<option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option" cy-label="first option">Visible Option</option>
15-
<option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option-2">Another Visible Option</option>
13+
<select class="testCase" cy-expect="visible">
14+
<option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 1">Visible Option</option>
15+
<option class="testCase" cy-expect="visible" cy-label="Visible Select > Opt 2">Another Visible Option</option>
1616
</select>
1717

18-
<select class="testCase" cy-expect="hidden" id="hidden-select" style="display: none;">
19-
<option class="testCase" cy-expect="hidden" id="hidden-option">Hidden Option</option>
18+
<select class="testCase" cy-expect="hidden" style="display: none;">
19+
<option class="testCase" cy-expect="hidden" id="hidden-option" cy-label="Hidden Select > Opt 1">Hidden Option</option>
2020
</select>
2121
</div>
2222

2323
<div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
2424
<h3>Optgroup Elements</h3>
25-
<select class="testCase" cy-expect="visible" id="select-with-optgroup" cy-label="select with optgroup">
26-
<optgroup class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-optgroup" cy-label="Visible opt Group">
27-
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 1</option>
28-
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 2</option>
25+
<select class="testCase" cy-expect="visible" cy-label="select with optgroup">
26+
<optgroup class="testCase" cy-expect="visible" cy-label="Visible opt Group">
27+
<option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 1">Option 1</option>
28+
<option class="testCase" cy-expect="visible" cy-label="Visible opt Group > Opt 2">Option 2</option>
2929
</optgroup>
3030
</select>
3131

32-
<select class="testCase" cy-expect="hidden" id="hidden-select-with-optgroup" style="display: none;">
33-
<optgroup class="testCase" cy-expect="hidden" id="hidden-optgroup" label="Hidden Group">
34-
<option class="testCase" cy-expect="hidden">Hidden Option 1</option>
35-
<option class="testCase" cy-expect="hidden">Hidden Option 2</option>
32+
<select class="testCase" cy-expect="hidden" style="display: none;">
33+
<optgroup class="testCase" cy-expect="hidden" label="Hidden Group">
34+
<option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 1">Hidden Option 1</option>
35+
<option class="testCase" cy-expect="hidden" cy-label="Hidden opt Group > Opt 2">Hidden Option 2</option>
3636
</optgroup>
3737
</select>
3838
</div>
3939

4040
<div class="test-section" cy-section="options-outside-select">
4141
<h3>Options Outside Select</h3>
4242
<div class="testCase" cy-expect="hidden" style="display: none;">
43-
<option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
43+
<option class="testCase" cy-expect="hidden" id="detached-option" cy-label="Detached Option">Detached Option</option>
4444
</div>
4545
<div class="testCase" cy-expect="visible">
46-
<option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
46+
<option class="testCase" cy-expect="visible" id="standalone-option" cy-label="Standalone Option">Standalone Option</option>
4747
</div>
4848
</div>
4949

50-
<div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
50+
<div class="test-section" cy-section="hidden-options-within-visible-select">
5151
<h3>Hidden Options Within Visible Select</h3>
5252
<select class="testCase" cy-expect="visible" id="select-with-hidden-option">
53-
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-option-in-select">Visible Option</option>
54-
<option class="testCase" cy-expect="hidden" id="hidden-option-in-select" style="display: none;">Hidden Option</option>
53+
<option class="testCase" cy-expect="visible" id="visible-option-in-select" cy-label="Visible Select > Visible Option">Visible Option</option>
54+
<option class="testCase" cy-expect="hidden" style="display: none;" cy-label="Visible Select > Hidden Option">Hidden Option</option>
5555
</select>
5656
</div>
5757

5858
<div class="test-section" cy-section="input-elements">
5959
<h3>Input Elements</h3>
60-
<input class="testCase" cy-expect="hidden" id="input-hidden" type="hidden" value="hidden input">
61-
<input class="testCase" cy-expect="visible" id="input-visible" type="text" value="visible input">
62-
<input class="testCase" cy-expect="hidden" id="input-display-none" type="text" value="display none input" style="display: none;">
60+
<input class="testCase" cy-expect="hidden" type="hidden" value="hidden input">
61+
<input class="testCase" cy-expect="visible" type="text" value="visible input">
62+
<input class="testCase" cy-expect="hidden" type="text" value="display none input" style="display: none;">
6363
</div>
6464
</body>
6565
</html>

‎packages/driver/src/dom/visibility/fastIsHidden.ts‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -112,28 +112,32 @@ export function fastIsHidden (subject: JQuery<HTMLElement> | HTMLElement, option
112112
const subjects = unwrap(subject) as HTMLElement | HTMLElement[]
113113

114114
if (Array.isArray(subjects)) {
115-
return subjects.some((subject: HTMLElement) => fastIsHidden(wrap(subject), options))
115+
return subjects.some((subject: HTMLElement) => fastIsHidden(subject, options))
116116
}
117117

118-
return fastIsHidden(subject, options)
119-
}
120-
121-
if (!subject.checkVisibility({
122-
contentVisibilityAuto: true,
123-
opacityProperty: options.checkOpacity,
124-
visibilityProperty: true,
125-
})) {
126-
return true
118+
return fastIsHidden(subjects, options)
127119
}
128120

129121
if (isOption(subject) || isOptgroup(subject)) {
122+
if (subject.hasAttribute('style') && subject.style.display === 'none') {
123+
return true
124+
}
125+
130126
const select = subject.closest('select')
131127

132128
if (select) {
133129
return fastIsHidden(wrap(select), options)
134130
}
135131
}
136132

133+
if (!subject.checkVisibility({
134+
contentVisibilityAuto: true,
135+
opacityProperty: options.checkOpacity,
136+
visibilityProperty: true,
137+
})) {
138+
return true
139+
}
140+
137141
const boundingRect = getBoundingClientRect(subject)
138142

139143
if (visibleToUser(subject, boundingRect)) {

0 commit comments

Comments
 (0)