node.js - waitUntil : 'domcontentloaded' 之后，并非所有 DOM 内容都准备就绪

Question

也许我正在翻译domcontentloaded错误，但我希望当时所有元素都可以访问，并且查询它们应该不会有问题。

考虑以下因素:

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

在本例中，elements.length 为 0，但如果我在查询之前等待选择器，则 elements 现在包含该元素:

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

waitUntil: 'domcontentloaded' 不应该导致 goto 在所有元素都准备好查询之前无法解析吗？是在这里等待“networkidle0”解决方案，还是有更好的方法来知道一切何时准备就绪？

Answer 1

domcontentloaded 当页面原始 HTML 中的所有元素都已被解析并插入到 DOM 中时触发。但是，这就是它告诉你的一切。如果元素以其他方式添加到页面，那么在 domcontentloaded 触发后很容易发生这种情况。

页面有许多其他方式来获取添加到其中的内容，例如直接插入元素的 Javascript 或进行 Ajax 调用，然后在 Ajax 调用返回结果后插入元素。这些都可以在domcontentloaded之后完成。

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