javascript - 如果页面中不存在 DOM 元素，我如何移动到下一个迭代？

Question

我想用 puppeteer 测试网页的几个子页面。该网页有一些针对机器人的保护措施。我有一个数组中的 url，我遍历这个数组。

我不知道应该如何重写我的代码，因为我遇到了几个问题:由于机器人保护，页面在实际加载真实内容之前向浏览器发送一些“假加载”状态。因此，我认为我必须等待一些 DOM 元素。

await page.waitForSelector('div.site__content');

确保内容已加载。 (由于机器人保护，等待 page.evaluate 不工作，它在第一个“假加载”标志上触发)。

但这里还有另一个问题:如果页面加载不正确(例如由于连接超时)，我会遇到未处理的 promise 拒绝错误并且迭代停止，程序的执行也会停止。

我的目标是，如果在加载页面时出现任何类型的错误，则跳过当前迭代并移至下一个迭代，而不会导致程序崩溃。但我必须保留

await page.waitForSelector

部分也是。我怎样才能做到这一点？

(async function filterIds() {
  let filteredIds = ['url1', 'url2', '...', 'url200'];
  const browser = await puppeteer.launch({ headless: false });
  const context = await browser.createIncognitoBrowserContext();
  const page = await context.newPage();
  await tuneUserAgent(page);
  for (let id in filteredIds) {
    let errorPage = null;
    let url = filteredIds[id];
    await page.goto(url, { waitUntil: 'load', timeout: 120000 });
    await page.waitForSelector('div.site__content'); // to be sure that the content has been loaded
    errorPage = await page.evaluate(() => {
      return document.querySelector('div.errorpage');
    });
    if (errorPage != null || errorPage === undefined) {
      continue;
    }
    await page.waitForSelector('div.dialog');
    let noGallery = await page.evaluate(() => {
      return document.querySelector('div[class="is-not-photo-uploaded-text"]');
    });
    if (noGallery != null || noGallery === undefined) {
      openOrNot = 5;
    }
    if (openOrNot < 4) {
      await openGallery(page);
    }
    let html = await page.content();
    await fs.writeFile(`./saved_items/${filteredIds[id].substring(filteredIds[id].lastIndexOf('/') + 1)}.html`, html, function (err) {
      if (err) throw err;
    });
    await page.waitFor(400);
  }
  await browser.close();
})();

Answer 1

当 promise 被拒绝且未被捕获时，将抛出“未处理的 promise 拒绝错误”。如果像您的情况一样在异步代码块内抛出异常，则隐含这种情况。

要捕获抛出的异常，您只需在循环中使用 try..catch block 即可。

代码示例

for (let id in filteredIds) {
  try {
    // your code
  } catch (err) {
    console.log(`Iteration for ${id} failed with error: ${err.message}`);
  }
}

你的代码产生的所有错误都应该被这段代码捕获，除了 fs.writeFile 中的 if (err) throw err; 因为这个回调被调用异步，因此在 try..catch block 之外执行。但是您可以简单地使用新的 fs.promises.writeFile甚至捕获该错误。

如果抛出错误，将调用脚本的 catch (err) { ... } 部分，记录错误消息和 id错误发生了。由于脚本不再崩溃，循环将继续进行下一次迭代。