如何让 puppeteer 等待元素加载（在循环中）？

Question

我正在尝试使用 puppeteer 来填写表格并获得结果。正确提交表单后，会出现包含 #some_id 结果的 table。现在我正在寻找一种等待 table 加载的好方法，如果代码失败，请重做填写表单的过程，直到它正常工作。我希望它做这样的事情（伪代码）：

while(table_is_not_loaded){

 get_information;
 fill_in_the_form;
 submit_the_form;

}

我认为使用 page.waitForSelector() 函数也许可以实现，但我不能按我想要的方式使用它，而且我也不知道如果选择器未准备好或不可见它如何处理错误。

Answer 1

你可以这样做：

let table_is_loaded = true;
await page.waitForSelector('someID').catch(e => table_is_loaded = false);

while(!table_is_loaded){

 get_information;
 fill_in_the_form;
 submit_the_form;

 table_is_loaded = true;
 await page.waitForSelector('someID').catch(e => table_is_loaded = false);
}

Answer 2

可能是这样的：

while(true){
  try {
    await page.waitForSelector('#foo')
    get_information;
    fill_in_the_form;
    submit_the_form;
    break
  } catch(e) {
  }
}

Answer 3

经过一些搜索和尝试不同的代码片段后，我找到了一个解决方案，它使用 .$eval() 方法访问 html 属性并检查元素的高度（您也可以检查其他东西以及显示或可见性）

const isNotHidden = await mainPage.$eval(
      "#some_id",
      elem => {
        return (
          window.getComputedStyle(elem).getPropertyValue("height") >= "5px"
        );
      }
    );

link 帮助我实现这一目标的主要答案：

如何让 puppeteer 等待元素加载（在循环中）？

How do I make puppeteer wait for element to load (in a loop)?

node.js

web-scraping

typescript

google-chrome-headless

puppeteer