如何让Puppeteer等待容器内所有AJAX加载的列表项全部加载完成？

选择器的选择 #

直接用.container li作为目标选择器即可，这个选择器能定位到所有列表项，不管最终数量是5个还是100个，都能覆盖到。

Puppeteer最省心的等待方案 #

要确保所有AJAX加载的列表项都完成，最可靠也最简单的方式是用page.waitForFunction，它能持续监听页面上的条件，直到条件满足为止。因为动态列表通常是分批加载的，我们可以通过等待列表数量稳定来判断加载完成：

await page.waitForFunction(async () => {
  const container = document.querySelector('.container');
  // 记录当前列表项数量
  const initialCount = container.children.length;
  // 等待500ms，看数量是否变化
  await new Promise(resolve => setTimeout(resolve, 500));
  // 如果数量没变，说明没有新项加载了
  return container.children.length === initialCount;
});

如果你的列表项加载后会立即变为可见状态，也可以用page.waitForSelector配合visible: true来等待所有列表项都可见：

// 等待至少一个列表项可见，若后续无新项加载也能满足需求
await page.waitForSelector('.container li', { visible: true });

你提供的方法为什么不可行 #

你写的这段代码：

await page.evaluate(() => 
      document.querySelector('.container').childNodes.length>3
);

完全不可行，问题出在这几点：

1. page.evaluate只执行一次判断，不会等待条件满足——如果此时列表还没加载到4个以上，代码直接返回false，根本起不到等待的作用。
2. childNodes会把换行、空格这类文本节点也算进去，不是真正的列表项数量，判断逻辑本身就有错误，应该用children来获取所有<li>元素。
3. 如果在页面导航过程中执行这段代码，很可能因为DOM还没准备好，document.querySelector('.container')返回null，直接抛出错误，这就是你遇到导航相关报错的原因。

内容的提问来源于stack exchange，提问作者Shyam R