node.js - 让 Puppeteer 等待给定的类出现/渲染在页面上？

Question

我想加载一个页面，然后等待文本(或本例中的类)渲染，然后再获取内容。

这个例子有效。

async function test() {

    const browser = await puppeteer.launch();
    const page    = await browser.newPage();
    await page.goto('https://sunnythailand.com');

    // Wait until the page is fully rendered
    while (content.indexOf("scrapebot_description") < 0) {
        console.log("looking for scrapebot_description")    
        await new Promise((resolve)=>setTimeout(()=> resolve() ,1000));
        content = await page.content();
    }
    console.log("scrapebot_description FOUND!!!")   

    await browser.close();
}

我的问题是，我可以使用 puppeteer 更轻松地做到这一点吗？

我尝试过这个:

    await page.waitForFunction('document.querySelector("scrapebot_description")');

但这只是永远卡在那里，什么也没有发生......(说实话我不明白querySelector是什么，所以也许问题就在那里)

我也尝试过这个:

    var checkText = "scrapebot_description"
    await page.evaluate((checkText) => {
        console.log("scrapebot_description FOUND IT!!");
    },{checkText});

这也行不通。

这是页面上渲染的最后一个元素，我正在等待......

    <span class="hide scrapebot_description ng-binding" ng-bind="'transFrontDescription' | translate">

Answer 1

你可以这样做:

async function test() {
  const browser = await puppeteer.launch();
  const page    = await browser.newPage();
  await page.goto('https://sunnythailand.com');

  const selector = '.scrapebot_description' // or #scrapebot_description
  await page.waitForSelector(selector)

  console.log("scrapebot_description FOUND!!!")   

  await browser.close();
}