问题
Maybe I'm interpreting domcontentloaded wrong, but I expect all elements to be accessible at that time, and I shouldn't have a problem querying for them.
Consider the following:
await page.goto(url, { waitUntil: 'domcontentloaded' });
const elements = await page.$$('#myId');
elements.length is 0 in this case, but if I wait for the selector before querying, elements now contains the element:
await page.goto(url, { waitUntil: 'domcontentloaded' });
await page.waitForSelector('#SignIn-emailInput'); // <-- this shouldn't be required
const elements = await page.$$('#myId');
Shouldn't waitUntil: 'domcontentloaded' cause goto not to resolve until all elements are ready to be queried for? Is instead waiting for 'networkidle0' the solution here, or is there a better way to know when everything is ready?
回答1:
domcontentloaded fires when all the elements in the original HTML for the page have been parsed and inserted into the DOM. But, that's all it tells you. If the elements are added to the page some other way, that can easily happen after domcontentloaded fires.
Pages have many other ways of getting content added to them such as Javascript that inserts elements directly or makes Ajax calls and then inserts elements after the Ajax calls return results. Those can all complete after domcontentloaded.
When Javascript inserts elements, there are no standard events to know when it might be done because it's page-specific code that can literally do anything. To figure out when it's done generally requires some inspection of the code in the page to figure out how you might detect when it's done doing its thing. In the worst case, you have to poll the content until you see some sentinel elements that indicate the Javascript is done with its work. In better situations, you can more directly hook into something else that the page is doing to know when it's done.
来源：https://stackoverflow.com/questions/53992509/not-all-dom-content-is-ready-after-waituntil-domcontentloaded