Skip to content

Commit a36e181

Browse files
cacieprinscacieprins
authored
refactor: modernizes visibility tests (#32833)
* migrate visibility tests to static fixtures * clean up the html a little bit, remove ref to experimentalFastVisibility * Delete packages/driver/cypress/e2e/dom/visibility-migration.md * Update visibility.ts * fix assertion * fix incomplete * add non-display-none html/body tests
1 parent e6e91a0 commit a36e181

File tree

10 files changed

+1057
-1249
lines changed

10 files changed

+1057
-1249
lines changed

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

Lines changed: 256 additions & 1249 deletions
Large diffs are not rendered by default.

‎packages/driver/cypress/fixtures/visibility/basic-css-properties.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Basic CSS Properties Visibility Tests</title>
5+
<link rel="stylesheet" href="./style.css">
6+
<script src="./ux.js"></script>
7+
</head>
8+
<body>
9+
<h1>Basic CSS Properties Visibility Tests</h1>
10+
11+
<div class="test-section" cy-section="visibility-property">
12+
<h3>Visibility Property</h3>
13+
<div class="testCase" cy-expect="hidden" cy-label="Hidden by visibility" style="visibility: hidden;">Hidden by visibility</div>
14+
<div class="testCase" cy-expect="visible" cy-label="Visible by visibility" style="visibility: visible;">Visible by visibility</div>
15+
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by visibility" style="visibility: hidden;">
16+
<button class="testCase" cy-expect="hidden" cy-label="Child of hidden parent">Child of hidden parent</button>
17+
</div>
18+
</div>
19+
20+
<div class="test-section" cy-section="display-property">
21+
<h3>Display Property</h3>
22+
<div class="testCase" cy-expect="hidden" cy-label="Hidden by display: none" style="display: none;">Hidden by display: none</div>
23+
<div class="testCase" cy-expect="visible" cy-label="Visible by display: block" style="display: block;">Visible by display: block</div>
24+
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by display: none" style="display: none;">
25+
<span class="testCase" cy-expect="hidden" cy-label="Child of display: none parent">Child of display: none parent</span>
26+
</div>
27+
</div>
28+
29+
<div class="test-section" cy-section="opacity-property">
30+
<h3>Opacity Property</h3>
31+
<div class="testCase" cy-expect="hidden" cy-label="Hidden by opacity: 0" style="opacity: 0;">Hidden by opacity: 0</div>
32+
<div class="testCase" cy-expect="visible" cy-label="Semi-transparent (opacity: 0.5)" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
33+
<div class="testCase" cy-expect="visible" cy-label="Fully opaque (opacity: 1)" style="opacity: 1;">Fully opaque (opacity: 1)</div>
34+
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by opacity: 0" style="opacity: 0;">
35+
<button class="testCase" cy-expect="hidden" cy-label="Child of opacity: 0 parent">Child of opacity: 0 parent</button>
36+
</div>
37+
</div>
38+
39+
<div class="test-section" cy-section="input-elements">
40+
<h3>Input Elements</h3>
41+
<input class="testCase" cy-expect="hidden" cy-label="Hidden input" type="hidden" value="hidden input">
42+
<input class="testCase" cy-expect="visible" cy-label="Visible input" type="text" value="visible input">
43+
</div>
44+
45+
<div class="test-section" cy-section="table-elements">
46+
<h3>Table Elements</h3>
47+
<table>
48+
<tr>
49+
<td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
50+
<td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
51+
<td class="testCase" cy-expect="hidden" cy-label="Cell by visibility: collapse" style="visibility: collapse;">Cell by visibility: collapse</td>
52+
</tr>
53+
54+
<tr class="testCase" cy-expect="hidden" cy-label="Row hidden by visibility: collapse" style="visibility: collapse;">
55+
<td class="testCase" cy-expect="hidden" cy-label="Cell hidden by row's visibility: collapse">Cell hidden by row's visibility: collapse</td>
56+
</tr>
57+
</table>
58+
</div>
59+
<div class="test-section" cy-section="box-interactions">
60+
<div>
61+
<span class="testCase" cy-expect="visible" cy-label="Span container for block element">
62+
<label class="testCase" cy-expect="visible" cy-label="Block element inside an inline element" style="display: block">Block element inside an inline element</label>
63+
</span>
64+
</div>
65+
</div>
66+
</body>
67+
</html>

‎packages/driver/cypress/fixtures/visibility/empty.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!DOCTYPE html>
2+
<body>
3+
<div />
4+
</body>

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Form Elements Visibility Tests</title>
5+
<link rel="stylesheet" href="./style.css">
6+
<script src="./ux.js"></script>
7+
</head>
8+
<body>
9+
<h1>Form Elements Visibility Tests</h1>
10+
11+
<div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
12+
<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>
16+
</select>
17+
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>
20+
</select>
21+
</div>
22+
23+
<div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
24+
<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>
29+
</optgroup>
30+
</select>
31+
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>
36+
</optgroup>
37+
</select>
38+
</div>
39+
40+
<div class="test-section" cy-section="options-outside-select">
41+
<h3>Options Outside Select</h3>
42+
<div class="testCase" cy-expect="hidden" style="display: none;">
43+
<option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
44+
</div>
45+
<div class="testCase" cy-expect="visible">
46+
<option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
47+
</div>
48+
</div>
49+
50+
<div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
51+
<h3>Hidden Options Within Visible Select</h3>
52+
<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>
55+
</select>
56+
</div>
57+
58+
<div class="test-section" cy-section="input-elements">
59+
<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;">
63+
</div>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)