How do I make puppeteer wait for element to load (in a loop)?

Question

I am trying to use puppeteer in order to fill in a form and get the results. when the form is submitted correctly, a table containing the results appear which has #some_id. Now I'm looking for a good way to wait until the table is loaded and if the code fails, redo the process of filling in the form until it works correctly. I want it to do something like this (pseudo code):

while(table_is_not_loaded){

 get_information;
 fill_in_the_form;
 submit_the_form;

}

I think that it's maybe achievable using page.waitForSelector() function, but I can't use it the way I want and I also don't know how it handle errors if the selector is not ready or visible.

score 0 · Answer 1 · answered Dec 03 '19 at 16:50

0

You could do something like this:

let table_is_loaded = true;
await page.waitForSelector('someID').catch(e => table_is_loaded = false);

while(!table_is_loaded){

 get_information;
 fill_in_the_form;
 submit_the_form;

 table_is_loaded = true;
 await page.waitForSelector('someID').catch(e => table_is_loaded = false);
}

answered Dec 03 '19 at 16:50

hardkoded

18,915
3
52
64

I'm using the same method , but when puppeteer reaches the ```waitForSelector()``` and doesn't find the selector element it throws an error and app crashes , i don't know how to handle that – PayamB. Dec 03 '19 at 22:46
@MirzaPayam notices that I added a catch there – hardkoded Dec 04 '19 at 10:07

score 0 · Answer 2 · answered Dec 04 '19 at 03:46

0

Maybe something like:

while(true){
  try {
    await page.waitForSelector('#foo')
    get_information;
    fill_in_the_form;
    submit_the_form;
    break
  } catch(e) {
  }
}

answered Dec 04 '19 at 03:46

pguardiario

53,827
19
119
159

score 0 · Accepted Answer · answered Dec 04 '19 at 08:51

after some searching and trying different pieces of code , i came to a solution and it was using the.$eval() method to access html attributes and checking the height of the element( you could also check other things as well like display or visibility )

const isNotHidden = await mainPage.$eval(
      "#some_id",
      elem => {
        return (
          window.getComputedStyle(elem).getPropertyValue("height") >= "5px"
        );
      }
    );

link to main answer that helped me achieve this : https://stackoverflow.com/a/47713155/11968594

How do I make puppeteer wait for element to load (in a loop)?

3 Answers3