Wait for all elements matching selector to be hidden

user_223082 0
Viewed 143

I have a page that contains multiple panels. While each panel is loading, it has a div with a class=progress. Once that panel is loaded, that same div gets the attribute of display:none;. I've tried await page.waitForFunction() and waitForSelector(), but they appear to evaluate to true when the first div becomes invisible. I want to wait until they are all invisible before I screenshot.

puppeteer
3 Answers

maybe this

  let panels = await page.$$('.panels')
  let hiddenPanels = await page.$$('.panels' , {visible : false })
  while(panels.length != hiddenPanels.length )
  {
     await page.waitForTimeout(3000);
     hiddenPanels = await page.$$('.panels' , {visible : false }) ; 
  }

or just check the visible ones

  let visiblePanels = await page.$$('.panels' , {visible : true  })
  while(visiblePanels.length > 0  )
  {
     await page.waitForTimeout(3000);
     visiblePanels = await page.$$('.panels' , {visible : true }) ; 
  }
user_5905890

Please select this as the right answer if you find this solution was helpful and correct.

Do you means panels are iframes?

let allDivsHidden = false
do {
    let statesArray = []
    await page.waitForTimeout(100) // Or any number of time you like
    for (let i = 0; i < page.frames().length; i++) {
        statesArray.push( await page.frames()[i].evaluate(() => {
            return document.querySelector('.progress').style.display === 'none'
        }))
    }
    allDivsHidden = statesArray.filter(boolean => boolean === false).length === 0
} while (!allDivsHidden)
user_79655670

OK, thx to the answers from Max and Edi, I got it working. I'm also on an older version of node so created a "delay" function.

 let visiblePanels = await page.$$('div.progress-animation:not([style*="display: none;"])');
  //logger.info(visiblePanels.length);
  while(visiblePanels.length > 0  )
  {
    //logger.info("Waiting in loop...");
    await delay(500);
    visiblePanels = await page.$$("div.progress-animation:not([style*='display: none;'])");
  }

Thank you!

user_2230820
Related