如何重新加载并等待元素出现？答案

【问题标题】：How to reload and wait for an element to appear?如何重新加载并等待元素出现？
【发布时间】：2020-11-21 21:05:14
【问题描述】：

我尝试搜索此答案，但互联网上似乎没有答案。我想要做的是使用节点 js 重新加载页面，直到找到具有我想要的查询的元素。如果有帮助，我将在程序的其他部分使用 puppeteer。

好的，我使用了两个答案中的函数并想出了这个，可能是未优化的代码：

const puppeteer = require("puppeteer");

(async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("http://127.0.0.1:5500/main.html");
    await page.waitForSelector("#buy-button");
    console.log("worked");
  } catch (err) {
    console.log(`ERROR: ${err}`);
  }
})();

但我不知道该怎么做是重新加载页面，并继续重新加载，直到我想要的 id 在那里。例如，继续重新加载 youtube，直到出现您想要的视频（不切实际的例子，但我认为它明白了这一点）。

【问题讨论】：

标签： javascript node.js web puppeteer

【解决方案1】：

你可以使用 "waitUntil: "networkidle2" 来确保页面加载完成。显然要更改 url，除非你实际使用 evil.com

const puppeteer = require("puppeteer"); // include library
(async () =>{
  const browser = await puppeteer.launch(); // run browser
  const page = await browser.newPage(); // create new tab
  await page.goto(
    `http://www.evil.com`,
    {
      waitUntil: "networkidle2",
    }
  );
  // do your stuff here
  await browser.close();
})();

【讨论】：

好的，我更新了问题希望你能帮忙

【解决方案2】：

这是我解决在 puppeteer 中等待元素并在未找到时重新加载页面的方法；

async waitForSelectorWithReload(selector: string) {
    const MAX_TRIES = 5;
    let tries = 0;
    while (tries <= MAX_TRIES) {
      try {
        const element = await this.page.waitForSelector(selector, {
          timeout: 5000,
        });
        return element;
      } catch (error) {
        if (tries === MAX_TRIES) throw error;

        tries += 1;
        void this.page.reload();
        await this.page.waitForNavigation({ waitUntil: 'networkidle0' });
      }
    }
  }

并且可以用作;

await waitForSelectorWithReload("input#name")

【讨论】：

【解决方案3】：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page
    .waitForSelector('#myId')
    .then(() => console.log('got it'));
    browser.close();
});

【讨论】：