Puppeteer To Listen For Map.on('load') From Within Node

Using Puppeteer to listen for map.on('load') from within Node. (async () => { const browser = await puppeteer.launch({ headless: false, devtools: true }); const page = awai

Solution 1:

waitForSelector should work, eg. when using a selector from the readily rendered map... or listen for the map.bounds_changed or the map.idle event, which are triggered once the map is fully loaded. The map.load event might happen too soon.

Here's a working example, which I've just put together:

const puppeteer = require('puppeteer');
const url = 'https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/full/map-simple';

run().then(() => {
    console.log('entering asynchronous execution.')
}).catch(error => {
    console.log(error)
});

asyncfunctionrun() {
  puppeteer
    .launch({devtools: true, headless: false})
    .then(async browser => {

      const page = await browser.newPage();
      await page.goto(url);

      await page.evaluate(() => {
        window.map.addListener('idle', function(){
          console.log('the map is idle now');
          var div = document.createElement('div');
          div.setAttribute('id', 'puppeteer-map-idle');
          window.document.body.append(div);
        });
      });

      await page.waitForSelector('#puppeteer-map-idle' , {
        timeout: 5000
      }).then((res) => {
        console.log('selector #puppeteer-map-idle has been found.');

        /* in here the map should be fully loaded. */

      });

      // await browser.close();
    });
}

Admittedly that's kind of workaround, but the DOM manipulation can be observed.

Solution 2:

I also figured out how to return information. I reread the docs and got some understanding. I was not understanding the context.

constnodeLog = msg => console.log;
const msg = await page.evaluate(() => { return'this is working' });

nodeLog(msg);