在waitUntil之后，并非所有DOM内容都准备就绪：'domcontentloaded'

Question

也许我对domcontentloaded的解释是错误的，但是我希望那时所有元素都可以访问，并且查询它们不会有问题。

请考虑以下内容：

await page.goto(url, { waitUntil: 'domcontentloaded' });
const elements = await page.$$('#myId');

在这种情况下，

elements.length为0，但是如果我在查询之前等待选择器，则元素现在包含元素：

await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.waitForSelector('#SignIn-emailInput'); // <-- this shouldn't be required
const elements = await page.$$('#myId');

不应该等待直到：'domcontentloaded'导致goto在准备好查询所有元素之前才解决？而是在这里等待'networkidle0'解决方案，还是有什么更好的方法来知道何时一切就绪？

Answer 1

当页面的原始HTML中的所有元素都已解析并插入DOM时，会触发

domcontentloaded。但是，仅此而已。如果将元素以其他方式添加到页面，则在domcontentloaded火灾之后很容易发生。

页面还有许多其他添加内容的方法，例如Javascript直接插入元素或进行Ajax调用，然后在Ajax调用返回结果后插入元素。加载domcontent后，这些都可以完成。

当Javascript插入元素时，没有标准事件知道何时可以完成，因为它是特定于页面的代码，可以执行任何操作。要弄清楚什么时候完成，通常需要对页面中的代码进行一些检查，以弄清楚如何才能在完成工作时检测到它。在最坏的情况下，您必须轮询内容，直到看到一些指示Java脚本已完成其工作的哨兵元素。在更好的情况下，您可以更直接地了解页面正在执行的其他操作，以了解何时完成操作。