[🐛 Bug]: 'isDisplayed' API works incorrectly in chrome for elements with zero opacity or not in viewport #11563
Description
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
WebdriverIO Version
8.20.4
Node.js Version
18.17.1
Mode
WDIO Testrunner
Which capabilities are you using?
capabilities: [{
maxInstances: 5,
browserName: 'chrome',
acceptInsecureCerts: true,
}],What happened?
The Webdriverio 'isDisplayed' API works not as its documentation
It returns false which indicates the element is invisible if the element has zero opacity or not in viewport.
elem = await $('#notInViewport');
isDisplayed = await elem.isDisplayed();
console.log(isDisplayed); // expect true but return false
elem = await $('#zeroOpacity');
isDisplayed = await elem.isDisplayed();
console.log(isDisplayed); // expect true but return false
I found a similar closed issue here #7708
What is your expected behavior?
I expect the Webdriverio 'isDisplayed' API works correctly as its documentation
How to reproduce the bug.
You can reproduce the issue by using this repo: https://github.com/webdriverio/example-recipes
You can set up the example mentioned in documentation
by reusing files in this folder https://github.com/webdriverio/example-recipes/tree/main/waitForDisplayed
index.html
<div id="notDisplayed" style="display: none"></div>
<div id="notVisible" style="visibility: hidden"></div>
<div id="notInViewport" style="position:absolute; left: 9999999"></div>
<div id="zeroOpacity" style="opacity: 0"></div>
waitForDisplayedExample.js
describe('waitForDisplayed Example', () => {
beforeEach(async () => {
await browser.url('/index.html')
})
it('should detect if an element is displayed', async () => {
let elem = await $('#notDisplayed');
let isDisplayed = await elem.isDisplayed();
console.log('notDisplayed', isDisplayed); // outputs: false
elem = await $('#notVisible');
isDisplayed = await elem.isDisplayed();
console.log('notVisible', isDisplayed); // outputs: false
elem = await $('#notExisting');
isDisplayed = await elem.isDisplayed();
console.log('notExisting', isDisplayed); // outputs: false
elem = await $('#notInViewport');
isDisplayed = await elem.isDisplayed();
//expect(isDisplayed).toEqual(true)
console.log('notInViewport', isDisplayed); // outputs: true
elem = await $('#zeroOpacity');
isDisplayed = await elem.isDisplayed();
//expect(isDisplayed).toEqual(true)
console.log('zeroOpacity', isDisplayed); // outputs: true
});
})
Then run command: npm run waitForDisplayed
Relevant log output
elem = await $('#notInViewport');
isDisplayed = await elem.isDisplayed();
console.log(isDisplayed); // outputs: false
elem = await $('#zeroOpacity');
isDisplayed = await elem.isDisplayed();
console.log(isDisplayed); // outputs: falseCode 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