So, I have a function that returning page that needed by next function:

async function browser(){
        const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: false, devtools : true});
        const incog = await browser.createIncognitoBrowserContext();
        const page = await incog.newPage();

            await page.goto('web')
            .then(function(){
       page.evaluate(function(){
            $(document).ready(function(){
                $('input[name ="username"]').val("a");
                $('input[name ="password"]').val("b");
                $(document).ready(function(){
                    $('#loginbtn').click();
                });
            });
        });
      });

      await page.waitForNavigation({waitUntil : 'load'});
      return page;

So, I pass the result value browser() by doing browser().then(result => nextFunction(result) that eventually passing page into nextFunction()

async function nextFunction(page){
    await page.goto('web')
       .then(function(){
        var msg = "Test : \n\n";
        page.evaluate(function(){
            var num = 1;
            $('.card').each(function(i, e){
                msg += "======= Activity "+num+" ========\n";
                msg += "Subject : " + $(this).find('.name').text() + "\n";
                msg += "Due : " + $(this).find('.date').text() + "\n";
                msg += "===== End Activity "+num+" ======\n\n";
                num++;
            });
        });
        console.log(msg);
       });
}

I tried to print msg from nextFunction(), but it only print Test:

What am I try to achieve is : Get msg result or assign variable from return value of nextFunction()

Is there any solution or better way to do this?

So, I have a function that returning page that needed by next function:

async function browser(){
        const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: false, devtools : true});
        const incog = await browser.createIncognitoBrowserContext();
        const page = await incog.newPage();

            await page.goto('web')
            .then(function(){
       page.evaluate(function(){
            $(document).ready(function(){
                $('input[name ="username"]').val("a");
                $('input[name ="password"]').val("b");
                $(document).ready(function(){
                    $('#loginbtn').click();
                });
            });
        });
      });

      await page.waitForNavigation({waitUntil : 'load'});
      return page;

So, I pass the result value browser() by doing browser().then(result => nextFunction(result) that eventually passing page into nextFunction()

async function nextFunction(page){
    await page.goto('web')
       .then(function(){
        var msg = "Test : \n\n";
        page.evaluate(function(){
            var num = 1;
            $('.card').each(function(i, e){
                msg += "======= Activity "+num+" ========\n";
                msg += "Subject : " + $(this).find('.name').text() + "\n";
                msg += "Due : " + $(this).find('.date').text() + "\n";
                msg += "===== End Activity "+num+" ======\n\n";
                num++;
            });
        });
        console.log(msg);
       });
}

I tried to print msg from nextFunction(), but it only print Test:

What am I try to achieve is : Get msg result or assign variable from return value of nextFunction()

Is there any solution or better way to do this?

• javascript
• node.js
• puppeteer

• page.evaluate(function(){ must be awaited or .thenned. Using .then() syntax with Puppeteer is going to be painful. I suggest async/await. – ggorlen Commented Nov 24, 2022 at 3:30
• Since msg isn't defined in the browser, msg += "======= Activity "+num+" ========\n"; should throw an error. How can I pass variable into an evaluate function? shows how to pass it in in general, but as this answer describes, in your case you can simply define it in the evaluate browser context and return it. – ggorlen Commented Jul 13, 2024 at 15:25

1 Answer 1

1. For a cleaner code and easier troubleshooting, pick a lane, either async/await or chaining with then. Using both makes the code difficult to read. async/await is more readable and less tricky for error handling. Read more here
2. To see console.log in evaluate, listen on 'console' event:

const page = await browser.newPage();
page.on('console', msg => console.log(msg.text()));

3. page.evaluate context is separate from Puppeteer, so evaluate's msg will be undefined. Move the msg to evaluate and then return the result back to puppeteer.

let msg = await page.evaluate(function(){
   let msg = "Test : \n\n";
   let num = 1;
   $('.card').each(function(i, e){
      msg += "======= Activity "+num+" ========\n";
      msg += "Subject : " + $(this).find('.name').text() + "\n";
      msg += "Due : " + $(this).find('.date').text() + "\n";
      msg += "===== End Activity "+num+" ======\n\n";
      num++;
   });
   return msg;
});