Nodejs Puppeteer Wait to finish all code from loop

Question

I'm using puppeteer to scrap a webpage. In this webpage, i input some text and click the submit button. Once clicked, the page will return a table with results. I want to get these table results when matches 'somevar'. The problem is: The for is not completing all functions before looping. Instead of filling the input and get the results first, it already goes to the next loop and fill the input again, resulting in something like: 'test1test2'

How to make the for execute all functions inside before looping?

callPup();

async function callPup(){

'use strict';

const puppeteer = require('puppeteer');

const textos = ['test1','test2'];

(async() => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://localhost/teste.html');     

    await page.waitForSelector('#input1').then(funcOk());


    async function funcOk(){            
        for (let i = 0; i < textos.length; i++) {                       

            await page.type('#input1', textos[i]);

            await page.keyboard.press('Enter');                 

            /*get table results*/
            const data = page.evaluate(() => {
                const tds = Array.from(document.querySelectorAll('table tr td a'))
                return tds.map(a => {
                    var txt = a.innerHTML;
                    return txt.replace(/<a [^>]+>[^<]*<\/a>/g, '').trim();
                });
            });
            /*get table results*/

            /*get only valid results*/
            let j = 0;
            for (let z = 0; z < data.length; z++) {
                if(data[z] == someVar[i].num.toString()){
                    j = j + 1;          
                }
                if(j <= 14){
                    console.log(data[z]);
                    j = j + 1;
                }
            }
            /*get only valid results*/
        }           
    }

})();   

}

Answer 1

You can run a loop synchronously in series using Promise, it would be easier to just use a library like async. Try using eachSeries https://caolan.github.io/async/docs.html#eachSeries

    function funcOk(){            
        async.eachSeries(textos, async (text) => {                     

            await page.type('#input1', text);

            await page.keyboard.press('Enter');                 

            /*get table results*/
            const data = page.evaluate(() => {
                const tds = Array.from(document.querySelectorAll('table tr td a'))
                return tds.map(a => {
                    var txt = a.innerHTML;
                    return txt.replace(/<a [^>]+>[^<]*<\/a>/g, '').trim();
                });
            });
            /*get table results*/

            /*get only valid results*/
            let j = 0;
            for (let z = 0; z < data.length; z++) {
                if(data[z] == someVar[i].num.toString()){
                    j = j + 1;          
                }
                if(j <= 14){
                    console.log(data[z]);
                    j = j + 1;
                }
            }
            /*get only valid results*/

            return Promise.resolve()
        })
    }

Answer 2

I think instead of:

await page.waitForSelector('#input1').then(funcOk());

You want to do:

await page.waitForSelector('#input1'); await funcOk();

In the first case, you're not actually waiting for waitForSelector() before starting funcOk(). You can also do await page.waitForSelector('#input1').then(() => funcOk);. I prefer the await approach though.