等待所有匹配选择器的元素被隐藏

Question

我有一个包含多个面板的页面。在加载每个面板时，它有一个 div 和一个 class=progress。加载该面板后，相同的 div 将获得 display:none; 的属性。我试过 await page.waitForFunction() and waitForSelector()，但当第一个 div 变得不可见时，它们似乎评估为真。我想等他们都看不见了再截图。

Answer 1

如果您认为此解决方案有用且正确，请select将其作为正确答案。

您是说面板是 iframe 吗？

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)

Answer 2

也许这个

  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 }) ; 
  }

或者只检查可见的

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

Answer 3

好的，感谢 Max 和 Edi 的回答，我成功了。我也在使用旧版本的节点，因此创建了一个“延迟”功能。

 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;'])");
  }

谢谢！

等待所有匹配选择器的元素被隐藏

Wait for all elements matching selector to be hidden

puppeteer