[🐛 Bug]: WDIO 9: isDisplayed(withinViewport=true) not working. #14855
Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
WebdriverIO Version
9.20.0
Node.js Version
v20.8.1
Mode
WDIO Testrunner
Which capabilities are you using?
What happened?
I'm upgrading our codebase from wdio8 to wdio9 and saw the viewport function was removed in favor of this new style here: #13471
I followed the instructions and noted that no matter what elements I choose, as long as they exist, the element is considered within the viewport even if one element is the footer and the screen size is small. This test did not fail in wdio 8 versions.
note: I am using cucumber framework with feature files.
What is your expected behavior?
If the element is not in viewport, it should return false.
How to reproduce the bug.
Create a test that opens https://webdriver.io/ and checks for both header and footer, and see the footer is returning true even when it is not in display.
below is a picture with the footer clearly not visible, yet footer was found to exist in viewport.
Relevant log output
------------------------------------------------------------------
[chrome 142.0.7444.135 mac #0-0] Running: chrome (v142.0.7444.135) on mac
[chrome 142.0.7444.135 mac #0-0] Session ID: c9aff586d42ae86665e8660c6e3e7b96
[chrome 142.0.7444.135 mac #0-0]
[chrome 142.0.7444.135 mac #0-0] » /src/features/withinViewport.feature
[chrome 142.0.7444.135 mac #0-0] Viewport test
[chrome 142.0.7444.135 mac #0-0] As a Developer in Test
[chrome 142.0.7444.135 mac #0-0] I want to visit the Google result page for the term "test"
[chrome 142.0.7444.135 mac #0-0] And make sure I have the logo within the viewport and make sure the footer is not
[chrome 142.0.7444.135 mac #0-0]
[chrome 142.0.7444.135 mac #0-0] Header in viewport, footer outside viewport
[chrome 142.0.7444.135 mac #0-0] ✓ Given I open the url "https://webdriver.io/"
[chrome 142.0.7444.135 mac #0-0] ✓ And I have a screen that is 500 by 200 pixels
[chrome 142.0.7444.135 mac #0-0] ✓ And I pause for 5000ms
[chrome 142.0.7444.135 mac #0-0] ✓ Then I expect that element "header" is within the viewport
[chrome 142.0.7444.135 mac #0-0] ✖ And I expect that element "footer" is not within the viewport
[chrome 142.0.7444.135 mac #0-0]
[chrome 142.0.7444.135 mac #0-0] 4 passing (10.8s)
[chrome 142.0.7444.135 mac #0-0] 1 failing
[chrome 142.0.7444.135 mac #0-0]
[chrome 142.0.7444.135 mac #0-0] 1) Header in viewport, footer outside viewport And I expect that element "footer" is not within the viewport
[chrome 142.0.7444.135 mac #0-0] Error: expect(received).not.toEqual(expected) // deep equality
[chrome 142.0.7444.135 mac #0-0] Error: expect(received).not.toEqual(expected) // deep equalityCode 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