Not all DOM content is ready after waitUntil: 'domcontentloaded'












0















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?










share|improve this question























  • 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
















0















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?










share|improve this question























  • 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














0












0








0








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?










share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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.






    share|improve this answer




























      0














      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.






      share|improve this answer


























        0












        0








        0







        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.






        share|improve this answer













        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 1 at 4:42









        jfriend00jfriend00

        434k55565614




        434k55565614
































            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas