How to set puppeteer browser to variable?

Question

I try to launch one browser and use it as it need, but i don't know how to set it to variable.

// return promise
puppeteer.launch()

this :

// It's not working
let bro;
puppeteer.launch()
    .then(res => bro = res);

this:

//It's not working too
let bro;
puppeteer.launch()
    .then(res => bro = res);
while (bro === undefined) {

}
bro.newPage();

please tell me how to launch browser once and use it as need :

//
let bro
// launch browser
bro.newPage()
...

For example in react i can call async function

axios.post("/postOnePage", data)
                    .then(res => {
                        this.setState({onePageCount: res.data.wordCount});
                    })
                    .catch(err => console.log(err))

set result to variable and use it as it need

Answer 1

Its pretty simple if you use async/await:

const browser = await puppeteer.launch();
const page = await browser.newPage();

NOTE: wrap it inside a async function .

Basically puppeteer.launch() returns a promise which resolves to browser instance. So you can simply initialise a variable as above to get the browser. With then it will be a bit of a mess I guess and you have to work within the then blocks.

const browser = puppeteer.launch();
browser.then((brw) => {
    const page = brw.newPage();
    page.then(pg => {
        pg.goto('https://example.com').then(() => {
            pg.screenshot({
                path: 'example.png'
            }).then(() => {
                brw.close();
            });
        });
    });
});

You can also refer to the Puppeteer API . The documentation is very good with examples. Hope it further helps.

Edit 1:
Sample working example:

const puppeteer = require('puppeteer');

async function getScreenshot(page) {
    await page.screenshot({
        path: 'exampleShot.png'
    });
}

async function newPageAndScreenshot(browser) {
    const page = await browser.newPage();
    await page.goto('https://www.github.com');
    await page.screenshot({
        path: 'github.png'
    });
    //you can also call getScreenshot here.
    //await getScreenshot(page);
}

async function run() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await getScreenshot(page);
    await newPageAndScreenshot(browser);
    //Some other function calls may be.
    browser.close();

}

run();

Hope it helps.

Answer 2

I tried your first version of your code i.e.

let bro;
puppeteer.launch()
    .then(res => bro = res);

and it is working, ONLY after using the keyword await like

let bro;
await puppeteer.launch()
    .then(res => bro = res);

Here's how my code is running

async function run(){
    let bro;
    await puppeteer.launch()
    .then(res => bro = res);

    const page = await bro.newPage();
    await page.goto('https://github.com/login');
    await bro.close();
}
run();

Another version of the same code

let bro;
    await puppeteer.launch()
                   .then(async browser => {
                    bro = browser;
                   });

Let me know if this works.

Version 2 Since node environment is asynchronous, you'll have to use alter the way you call functions and pass variables. Here's the new code where browser varable is available outside run().

var bro;
async function run(){
    await puppeteer.launch()
    .then(res => bro = res);

    const page = await bro.newPage();
    await page.goto('https://github.com/login');

}

//another function
async function another(){
    console.log('2')
    const page = await bro.newPage();
    await page.goto('https://github.com');
    await bro.close();
}
run().then(() => another());

NOTE close the browser using bro.close() in the last function you use it in