Skip to content

refactor: modernizes visibility tests #32833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from
+1,057 −1,249
Open

refactor: modernizes visibility tests #32833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0aef8dc
migrate visibility tests to static fixtures
cacieprins Oct 27, 2025
f1c8f3d
clean up the html a little bit, remove ref to experimentalFastVisibility
cacieprins Oct 27, 2025
6115697
Delete packages/driver/cypress/e2e/dom/visibility-migration.md
cacieprins Oct 27, 2025
35defae
Update visibility.ts
cacieprins Oct 27, 2025
a3c5abb
fix assertion
cacieprins Oct 27, 2025
70e4ad9
Merge branch 'develop' into refactor/visibility-tests
cacieprins Oct 27, 2025
eb84c4b
fix incomplete
cacieprins Oct 27, 2025
42c14d0
Merge branch 'develop' into refactor/visibility-tests
cacieprins Oct 29, 2025
4573e14
add non-display-none html/body tests
cacieprins Oct 29, 2025
92f7b8e
Merge branch 'develop' into refactor/visibility-tests
cacieprins Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,505 changes: 256 additions & 1,249 deletions packages/driver/cypress/e2e/dom/visibility.cy.ts
View file
Open in desktop

Large diffs are not rendered by default.

67 changes: 67 additions & 0 deletions packages/driver/cypress/fixtures/visibility/basic-css-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Properties Visibility Tests</title>
<link rel="stylesheet" href="./style.css">
<script src="./ux.js"></script>
</head>
<body>
<h1>Basic CSS Properties Visibility Tests</h1>

<div class="test-section" cy-section="visibility-property">
<h3>Visibility Property</h3>
<div class="testCase" cy-expect="hidden" cy-label="Hidden by visibility" style="visibility: hidden;">Hidden by visibility</div>
<div class="testCase" cy-expect="visible" cy-label="Visible by visibility" style="visibility: visible;">Visible by visibility</div>
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by visibility" style="visibility: hidden;">
<button class="testCase" cy-expect="hidden" cy-label="Child of hidden parent">Child of hidden parent</button>
</div>
</div>

<div class="test-section" cy-section="display-property">
<h3>Display Property</h3>
<div class="testCase" cy-expect="hidden" cy-label="Hidden by display: none" style="display: none;">Hidden by display: none</div>
<div class="testCase" cy-expect="visible" cy-label="Visible by display: block" style="display: block;">Visible by display: block</div>
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by display: none" style="display: none;">
<span class="testCase" cy-expect="hidden" cy-label="Child of display: none parent">Child of display: none parent</span>
</div>
</div>

<div class="test-section" cy-section="opacity-property">
<h3>Opacity Property</h3>
<div class="testCase" cy-expect="hidden" cy-label="Hidden by opacity: 0" style="opacity: 0;">Hidden by opacity: 0</div>
<div class="testCase" cy-expect="visible" cy-label="Semi-transparent (opacity: 0.5)" style="opacity: 0.5;">Semi-transparent (opacity: 0.5)</div>
<div class="testCase" cy-expect="visible" cy-label="Fully opaque (opacity: 1)" style="opacity: 1;">Fully opaque (opacity: 1)</div>
<div class="testCase" cy-expect="hidden" cy-label="Parent hidden by opacity: 0" style="opacity: 0;">
<button class="testCase" cy-expect="hidden" cy-label="Child of opacity: 0 parent">Child of opacity: 0 parent</button>
</div>
</div>

<div class="test-section" cy-section="input-elements">
<h3>Input Elements</h3>
<input class="testCase" cy-expect="hidden" cy-label="Hidden input" type="hidden" value="hidden input">
<input class="testCase" cy-expect="visible" cy-label="Visible input" type="text" value="visible input">
</div>

<div class="test-section" cy-section="table-elements">
<h3>Table Elements</h3>
<table>
<tr>
<td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
<td class="testCase" cy-expect="visible" cy-label="Normal Cell">Normal Cell</td>
<td class="testCase" cy-expect="hidden" cy-label="Cell by visibility: collapse" style="visibility: collapse;">Cell by visibility: collapse</td>
</tr>

<tr class="testCase" cy-expect="hidden" cy-label="Row hidden by visibility: collapse" style="visibility: collapse;">
<td class="testCase" cy-expect="hidden" cy-label="Cell hidden by row's visibility: collapse">Cell hidden by row's visibility: collapse</td>
</tr>
</table>
</div>
<div class="test-section" cy-section="box-interactions">
<div>
<span class="testCase" cy-expect="visible" cy-label="Span container for block element">
<label class="testCase" cy-expect="visible" cy-label="Block element inside an inline element" style="display: block">Block element inside an inline element</label>
</span>
</div>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions packages/driver/cypress/fixtures/visibility/empty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<!DOCTYPE html>
<body>
<div />
</body>
65 changes: 65 additions & 0 deletions packages/driver/cypress/fixtures/visibility/form-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<title>Form Elements Visibility Tests</title>
<link rel="stylesheet" href="./style.css">
<script src="./ux.js"></script>
</head>
<body>
<h1>Form Elements Visibility Tests</h1>

<div class="test-section" cy-section="select-and-option-elements" cy-has-conflicts="true">
<h3>Select and Option Elements</h3>
<select class="testCase" cy-expect="visible" id="visible-select">
<option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option" cy-label="first option">Visible Option</option>
<option class="testCase" cy-fast-expect="hidden" cy-legacy-expect="visible" id="visible-option-2">Another Visible Option</option>
</select>

<select class="testCase" cy-expect="hidden" id="hidden-select" style="display: none;">
<option class="testCase" cy-expect="hidden" id="hidden-option">Hidden Option</option>
</select>
</div>

<div class="test-section" cy-section="optgroup-elements" cy-has-conflicts="true">
<h3>Optgroup Elements</h3>
<select class="testCase" cy-expect="visible" id="select-with-optgroup" cy-label="select with optgroup">
<optgroup class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-optgroup" cy-label="Visible opt Group">
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 1</option>
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden">Option 2</option>
</optgroup>
</select>

<select class="testCase" cy-expect="hidden" id="hidden-select-with-optgroup" style="display: none;">
<optgroup class="testCase" cy-expect="hidden" id="hidden-optgroup" label="Hidden Group">
<option class="testCase" cy-expect="hidden">Hidden Option 1</option>
<option class="testCase" cy-expect="hidden">Hidden Option 2</option>
</optgroup>
</select>
</div>

<div class="test-section" cy-section="options-outside-select">
<h3>Options Outside Select</h3>
<div class="testCase" cy-expect="hidden" style="display: none;">
<option class="testCase" cy-expect="hidden" id="detached-option">Detached Option</option>
</div>
<div class="testCase" cy-expect="visible">
<option class="testCase" cy-expect="visible" id="standalone-option">Standalone Option</option>
</div>
</div>

<div class="test-section" cy-section="hidden-options-within-visible-select" cy-has-conflicts="true">
<h3>Hidden Options Within Visible Select</h3>
<select class="testCase" cy-expect="visible" id="select-with-hidden-option">
<option class="testCase" cy-legacy-expect="visible" cy-fast-expect="hidden" id="visible-option-in-select">Visible Option</option>
<option class="testCase" cy-expect="hidden" id="hidden-option-in-select" style="display: none;">Hidden Option</option>
</select>
</div>

<div class="test-section" cy-section="input-elements">
<h3>Input Elements</h3>
<input class="testCase" cy-expect="hidden" id="input-hidden" type="hidden" value="hidden input">
<input class="testCase" cy-expect="visible" id="input-visible" type="text" value="visible input">
<input class="testCase" cy-expect="hidden" id="input-display-none" type="text" value="display none input" style="display: none;">
</div>
</body>
</html>
Loading
Loading