[🐛 Bug]: isElementDisplayed returns incorrect result for elements with overflow-x/y: hidden and zero width/height

[louisremi]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

latest

Node.js Version

latest

Mode

Standalone Mode

Which capabilities are you using?

No response

What happened?

In 8.22.2, a regression was introduced in isDisplayed method. Webdriverio is no longer able to detect that an element isn't displayed with the following styles:

• overflow-x: hidden; width: 0;
• or overflow-y: hidden; height: 0;

It is however correctly able to detect that the element isn't displayed with the following styles:

• overflow: hidden; width: 0; height: 0;

What is your expected behavior?

Webdriver should be consistently able to tell that elements with overflow the following styles are not displayed:

• overflow: hidden; width: 0; height: 0;
• overflow-x: hidden; width: 0;
• or overflow-y: hidden; height: 0;

How to reproduce the bug.

I've started by forking cucumber-boilerplate and adding a test-suite for isDisplayed with different combinations of overflow(-x/-y): hidden; and zero width/height. Here are the steps to reproduce:

1. clone following repo locally https://github.com/louisremi/cucumber-boilerplate/tree/test-case/isElementDisplayed-overflow-bug:

• git clone [email protected]:louisremi/cucumber-boilerplate.git
• git checkout test-case/isElementDisplayed-overflow-bug

2. install dependencies

• npm install

3. run tests locally

• npm run test:features

The two interesting files in this repo to understand the problem are:

• https://github.com/louisremi/cucumber-boilerplate/blob/test-case/isElementDisplayed-overflow-bug/demo-app/index.html
• https://github.com/louisremi/cucumber-boilerplate/blob/test-case/isElementDisplayed-overflow-bug/src/features/notDisplayed.feature

Relevant log output

[chrome-headless-shell 124.0.6367.91 linux #0-0] Running: chrome-headless-shell (v124.0.6367.91) on linux
[chrome-headless-shell 124.0.6367.91 linux #0-0] Session ID: d17b349514a984dac88571ec59af8a9d
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] » /src/features/notDisplayed.feature
[chrome-headless-shell 124.0.6367.91 linux #0-0] Test visibility of elements with "overflow(-x/y): hidden"
[chrome-headless-shell 124.0.6367.91 linux #0-0] As a developer
[chrome-headless-shell 124.0.6367.91 linux #0-0] I want to be able to test the visibility of an element
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow: hidden & width/height: 100
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Then I expect that element "#overflow" is displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow-x: hidden & width/height: 100
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Then I expect that element "#overflow-x" is displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow-y: hidden & width/height: 100
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Then I expect that element "#overflow-y" is displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow: hidden & width: 0
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Then I expect that element "#overflow-0w" is not displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow: hidden & height: 0
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Then I expect that element "#overflow-0h" is not displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow-x: hidden & width: 0
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✖ Then I expect that element "#overflow-x-0w" is not displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] overflow-y: hidden & height: 0
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✓ Given I open the url "http://localhost:8080/"
[chrome-headless-shell 124.0.6367.91 linux #0-0]    ✖ Then I expect that element "#overflow-y-0h" is not displayed
[chrome-headless-shell 124.0.6367.91 linux #0-0]
[chrome-headless-shell 124.0.6367.91 linux #0-0] 12 passing (506ms)
[chrome-headless-shell 124.0.6367.91 linux #0-0] 2 failing

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

@louisremi thanks for raising the issue.

I think we have to enhance this portion of the code. Any contribution are welcome.

[wdio-bot]

Thanks for reporting!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[louisremi]

I have a PR in the pipes, but I'm off next week