[Feature] waitForSelector hidden with debounce

Hello, is it possible to perform a waitForSelector until something is hidden even if it rapidly appears and disappears multiple times? This would be similar to a debounce feature or very much like the waitForLoadState with networkidle selected. I would want to set the debounce to something like 500 milliseconds but have it configurable.

I have looked in the issues and couldn’t find anything like this but this would help with loading divs and animations that popup multiple times to ensure that we don’t execute the next statement until the threshold has been met.

Thoughts?

[mattduffield]

Hi @yury-s thanks for the sample! I tried it out and it worked exactly as I expected. I made a slight modification so that I could pass in the timeout:

const waitForHiddenDebounce = async (selector, timeout = 500) => {
  await page.$eval(selector, (element, timeout) => {
    const isVisible = () => {
      const style = element.ownerDocument.defaultView.getComputedStyle(element);
      if (!style || style.visibility === 'hidden')
        return false;
      const rect = element.getBoundingClientRect();
      return rect.width > 0 && rect.height > 0;
    };

    let fulfill;
    const result = new Promise(f => fulfill = f);

    let lastState = isVisible();
    let startTime = Date.now();

    const pollState = () => {
      const visible = isVisible();
      if (lastState === visible) {
        if (Date.now() - startTime > timeout) {
          fulfill();
          return;
        }
      } else {
        lastState = visible;
        startTime = Date.now();
      }
      requestAnimationFrame(pollState);
    };
    requestAnimationFrame(pollState);
    return result;
  }, timeout);
};

Thanks again for your help! Having debounce with multiple busy indicators displaying rapidly makes it so much nicer to test.

[DJ-Glock]

@mattduffield Apologies for posting bad example. I can see that Yury already provided you working code, but let me also finish my try 😃

Tested it with static elements (not appearing many times), but should work for you.

  /** Returns true if element disappeared after provided timeout. */
  async function waitForSelectorToCompletelyDisappear(selector, timeout = 500, pollingTimeout = 100) {
    const startTime = Date.now();
    let duration = 0;
    let isDisappeared = false;

    async function endTime() {
      let now = await page.waitForSelector(selector, { timeout, state: 'hidden' })
        .then(async () => {
          console.log(`disappeared`);
          isDisappeared = true;
          return Date.now();
        })
        .catch(async () => {
          console.log(`visible`);
          isDisappeared = false;
          return Date.now();
        })
      return now;
    }
    
    duration = (await endTime()) - startTime;  
    while (duration < timeout) {
      duration = (await endTime()) - startTime;
      await page.waitForTimeout(pollingTimeout);
    }
    console.log(`Disappeared finally: ${isDisappeared}`);
    return isDisappeared;
  }