add tests for other isDisplayed cases

+ chnages following feedback
webdriverio · May 20, 2024 · 5e84abf · 5e84abf
1 parent 7e0f12e
commit 5e84abf
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 52 deletions.
diff --git a/e2e/browser-runner/__fixtures__/is-displayed.html b/e2e/browser-runner/__fixtures__/is-displayed.html
diff --git a/e2e/browser-runner/commands/element/isDisplayed.test.ts b/e2e/browser-runner/commands/element/isDisplayed.test.ts
@@ -9,50 +9,85 @@ expect.extend(matchers)
 
 describe('isDisplayed', () => {
     beforeEach(async () => {
-        // TODO: this fails with "Failed to load test page […]" error
-        // while the browser actually appears able to load the page
-        // await browser.url('http://localhost:8080/is-displayed.html')
         render(
             html`
                 <style>
                     body {
                         background-color: white;
                     }
 
-                    [id^="overflow"] {
+                    .black-square {
                         width: 100px;
                         height: 100px;
                         background-color: black;
                     }
                 </style>
                 <main>
-                    <h1>displayed elements</h1>
+                    <h1>children of elements with visibility: hidden for which isDisplayed should be true</h1>
+                    <h2><code>.parent { visibility: hidden; .children { visibility: visible; } }</code></h2>
+                    <div style="visibility: hidden;"><div id="visibility-visible" style="visibility: visible;" class="black-square">Some content</div></div>
+
+                    <h1>children of elements with visibility: hidden for which isDisplayed should be false</h1>
+                    <h2><code>.parent { visibility: hidden; .children {  } }</code></h2>
+                    <div style="visibility: hidden;"><div id="visibility-hidden" style=" " class="black-square">Some content</div></div>
+
+                    <h1>children of elements with opacity: 0 for which isDisplayed should be false</h1>
+                    <h2><code>.parent { opacity: 0; .children { opacity: 1; } }</code></h2>
+                    <div style="opacity: 0;"><div id="opacity-0" style="opacity: 1;" class="black-square">Some content</div></div>
+
+                    <h1>children of elements with display: none for which isDisplayed should be false</h1>
+                    <h2><code>.parent { display: none; .children { display: block; } }</code></h2>
+                    <div style="display: none;"><div id="display-none" style="display: block;" class="black-square">Some content</div></div>
+
+                    <h1>elements with overflow: hidden for which isDisplayed should be true</h1>
                     <h2><code>{ overflow: hidden; width: 100; height: 100; }</code></h2>
-                    <div id="overflow" style="overflow: hidden;">Some content</div>
+                    <div id="overflow" style="overflow: hidden;" class="black-square">Some content</div>
                     <h2><code>{ overflow-x: hidden; width: 100; height: 100; }</code></h2>
-                    <div id="overflow-x" style="overflow-x: hidden;">Some content</div>
+                    <div id="overflow-x" style="overflow-x: hidden;" class="black-square">Some content</div>
                     <h2><code>{ overflow-y: hidden; width: 100; height: 100; }</code></h2>
-                    <div id="overflow-y" style="overflow-y: hidden;">Some content</div>
+                    <div id="overflow-y" style="overflow-y: hidden;" class="black-square">Some content</div>
                     <h2><code>{ overflow-x: hidden; width: 100; height: 0; }</code></h2>
-                    <div id="overflow-x-0h" style="overflow-x: hidden; height: 0px;">Some content</div>
+                    <div id="overflow-x-0h" style="overflow-x: hidden; height: 0px;" class="black-square">Some content</div>
                     <h2><code>{ overflow-y: hidden; width: 0; height: 100; }</code></h2>
-                    <div id="overflow-y-0w" style="overflow-y: hidden; width: 0px;">Some content</div>
+                    <div id="overflow-y-0w" style="overflow-y: hidden; width: 0px;" class="black-square">Some content</div>
 
-                    <h1>not displayed elements</h1>
+                    <h1>elements with overflow: hidden for which isDisplayed should be false</h1>
                     <h2><code>{ overflow: hidden; width: 0; height: 100; }</code></h2>
-                    <div id="overflow-0w" style="overflow: hidden; width: 0px;">Some content</div>
+                    <div id="overflow-0w" style="overflow: hidden; width: 0px;" class="black-square">Some content</div>
                     <h2><code>{ overflow: hidden; width: 100; height: 0; }</code></h2>
-                    <div id="overflow-0h" style="overflow: hidden; height: 0px;">Some content</div>
+                    <div id="overflow-0h" style="overflow: hidden; height: 0px;" class="black-square">Some content</div>
                     <h2><code>{ overflow-x: hidden; width: 0; height: 100 }</code></h2>
-                    <div id="overflow-x-0w" style="overflow-x: hidden; width: 0px;">Some content</div>
+                    <div id="overflow-x-0w" style="overflow-x: hidden; width: 0px;" class="black-square">Some content</div>
                     <h2><code>{ overflow-y: hidden; width: 0; height: 0 }</code></h2>
-                    <div id="overflow-y-0h" style="overflow-y: hidden; height: 0px;">Some content</div>
+                    <div id="overflow-y-0h" style="overflow-y: hidden; height: 0px;" class="black-square">Some content</div>
                 </main>
             `,
             document.body
         )
     })
 
+    describe('`visibility: hidden` elements', () => {
+        it('properly detects elements that are displayed', async () => {
+            await expect($('#visibility-visible')).toBeDisplayed()
+        })
+
+        it('properly detects elements that are not displayed', async () => {
+            await expect($('#visibility-hidden')).not.toBeDisplayed()
+        })
+    })
+
+    describe('`opacity: 0` elements', () => {
+        it('properly detects elements that are displayed', async () => {
+            await expect($('#opacity-0')).not.toBeDisplayed()
+        })
+    })
+
+    describe('`display: none` elements', () => {
+        it('properly detects elements that are displayed', async () => {
+            await expect($('#display-none')).not.toBeDisplayed()
+        })
+    })
+
     describe('`overflow(-x/y): hidden` elements', () => {
         it('properly detects elements that are displayed', async () => {
             await expect($('#overflow')).toBeDisplayed()

diff --git a/e2e/package.json b/e2e/package.json
@@ -7,7 +7,6 @@
     "test:browser": "run-s test:browser:*",
     "test:browser:isDisplayed": "run-s test:browser:isDisplayed:*",
     "test:browser:isDisplayed:wdio": "cross-env WDIO_PRESET=isDisplayed node ../packages/wdio-cli/bin/wdio.js ./browser-runner/wdio.conf.js --spec isDisplayed.test.ts",
-    "test:browser:isDisplayed:verifyCoverage": "run-s verifyCoverage",
     "test:browser:react": "run-s test:browser:react:*",
     "test:browser:react:wdio": "cross-env WDIO_PRESET=react node ../packages/wdio-cli/bin/wdio.js ./browser-runner/wdio.conf.js --spec react.test.tsx",
     "test:browser:react:verifyCoverage": "run-s verifyCoverage",