polish(webdriverio): expose contentVisibilityAuto, opacityProperty and visibilityProperty to waitForDisplayed (#14659)

* polish(webdriverio): expose contentVisibilityAuto, opacityProperty and visibilityProperty to waitForDisplayed

* polish(webdriverio): expose contentVisibilityAuto, opacityProperty and visibilityProperty to waitForDisplayed

* polish(webdriverio): expose contentVisibilityAuto, opacityProperty and visibilityProperty to waitForDisplayed

Author: erwinheitzman

packages/webdriverio/src/commands/element/waitForDisplayed.ts

@@ -1,5 +1,28 @@
 import type { WaitForOptions } from '../../types.js'
 
+interface WaitForDisplayedParams extends WaitForOptions {
+    /**
+     * `true` to check if the element is within the viewport. false by default.
+     */
+    withinViewport?: boolean
+    /**
+     * `true` to check if the element content-visibility property has (or inherits) the value auto,
+     * and it is currently skipping its rendering. `true` by default.
+     * @default true
+     */
+    contentVisibilityAuto?: boolean
+    /**
+     * `true` to check if the element opacity property has (or inherits) a value of 0. `true` by default.
+     * @default true
+     */
+    opacityProperty?: boolean
+    /**
+     * `true` to check if the element is invisible due to the value of its visibility property. `true` by default.
+     * @default true
+     */
+    visibilityProperty?: boolean
+}
+
 /**
  *
  * Wait for an element for the provided amount of milliseconds to be displayed or not displayed.
@@ -18,6 +41,9 @@ import type { WaitForOptions } from '../../types.js'
  * @param {String=}          options.timeoutMsg     if exists it overrides the default error message
  * @param {Number=}          options.interval       interval between checks (default: `waitforInterval`)
  * @param {Boolean=}         options.withinViewport set to `true` to wait until element is displayed within viewport (default: `false`)
+ * @param {Boolean=}         options.contentVisibilityAuto set to `true` to check if the element content-visibility property has (or inherits) the value auto, and it is currently skipping its rendering. `true` by default.
+ * @param {Boolean=}         options.opacityProperty set to `true` to check if the element opacity property has (or inherits) a value of 0. `true` by default.
+ * @param {Boolean=}         options.visibilityProperty set to `true` to check if the element is invisible due to the value of its visibility property. `true` by default.
  * @return {Boolean} true    if element is displayed (or doesn't if flag is set)
  * @uses utility/waitUntil, state/isDisplayed
  * @example https://github.com/webdriverio/example-recipes/blob/0bfb2b8d212b627a2659b10f4449184b657e1d59/waitForDisplayed/index.html#L3-L8
@@ -31,11 +57,15 @@ export function waitForDisplayed (
         interval = this.options.waitforInterval,
         reverse = false,
         withinViewport = false,
+        contentVisibilityAuto = true,
+        opacityProperty = true,
+        visibilityProperty = true,
         timeoutMsg = `element ("${this.selector}") still ${reverse ? '' : 'not '}displayed${withinViewport ? ' within viewport' : ''} after ${timeout}ms`,
-    }: WaitForOptions = {}
+    }: WaitForDisplayedParams = {}
 ) {
+
     return this.waitUntil(
-        async () => reverse !== await this.isDisplayed({ withinViewport }),
+        async () => reverse !== await this.isDisplayed({ withinViewport, contentVisibilityAuto, opacityProperty, visibilityProperty }),
         { timeout, interval, timeoutMsg }
     )
 }

packages/webdriverio/tests/commands/element/waitForDisplayed.test.ts

@@ -90,7 +90,7 @@ describe('waitForDisplayed', () => {
             expect(err.message).toBe(`element ("#foo") still not displayed within viewport after ${timeout}ms`)
         }
 
-        expect(elem.isDisplayed).toBeCalledWith({ withinViewport: true })
+        expect(elem.isDisplayed).toBeCalledWith({ withinViewport: true, contentVisibilityAuto: true, opacityProperty: true, visibilityProperty: true })
     })
 
     it('should not call isDisplayed and return false if never found', async () => {