Not all DOM content is ready after waitUntil: 'domcontentloaded'
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?
node.js dom puppeteer
add a comment |
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?
node.js dom puppeteer
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49
add a comment |
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?
node.js dom puppeteer
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?
node.js dom puppeteer
node.js dom puppeteer
asked Jan 1 at 1:28
Mike MillerMike Miller
1,05111331
1,05111331
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49
add a comment |
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992509%2fnot-all-dom-content-is-ready-after-waituntil-domcontentloaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Jan 1 at 4:42
jfriend00jfriend00
434k55565614
434k55565614
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992509%2fnot-all-dom-content-is-ready-after-waituntil-domcontentloaded%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The element is probably being added later by Javascript in the page.
– SLaks
Jan 1 at 1:35
Is there a way for page.goto to wait until all the Javascript has finished running?
– Mike Miller
Jan 1 at 1:40
That isn't a well-defined question; page JavaScript may continue running forever (timers or update loops) beyond what you care about.
– SLaks
Jan 1 at 1:42
Hmm. I guess you're right. What do people normally do in this case? Just waitForSelector for whatever selectors they know they'll be querying for?
– Mike Miller
Jan 1 at 1:49