循环获取元素屏幕截图。检测和跳过隐藏的Web元素。使用木偶

Question

我正在拍摄网页上“ strip”元素的屏幕截图。我无法检测到当前未显示在站点上的元素。

我正在拍摄网站上所有桌面元素的屏幕截图。 我尝试使用的是await page.$$eval('section .strip', p => p.map((e) => e.getAttribute('display'))) 我还知道我可以使用getcomputedstyles()，但不了解在map（）上将其添加到何处。

let arr = await await page.$$('section .strip');
let naming = await page.$$eval('section .strip', p => p.map((e) => e.previousElementSibling.getAttribute('id')))

for(el in arr){
    await arr[el].screenshot({path: './' +naming[el] + '.png'})
}

我希望该元素存在时可以截取屏幕截图，如果该元素可见（显示：隐藏），则可以忽略。

我得到的是，使用element.screenshot()时出现的错误和(node:3736) UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement的错误

Answer 1

否，如果元素不存在，它不会简单地忽略该元素。体验时。

解决方案

由于代码（请参阅有关链接）已经在检查元素是否具有边界框，因此您无需亲自检查。相反，您可以通过将表达式包装在try..catch中来忽略错误，如下所示：

for(el in arr){
  try {
    await arr[el].screenshot({path: './' +naming[el] + '.png'})
  } catch (err) {
    console.log(`No screenshot for ${naming[el]}: ${err.message}`);
  }
}

这将尝试截取所有元素的屏幕快照，并记录无法实现的元素。