title: How do I use puppeteer to take full screenshots of several websites?
body: <p>I am trying to take a screenshot using Node.js with <a href="https://github.com/GoogleChrome/puppeteer" rel="nofollow noreferrer">puppeteer</a>. I am not using <a href="https://github.com/GoogleChrome/puppeteer/blob/v1.18.1/docs/api.md#pagescreenshotoptions" rel="nofollow noreferrer"><code>page.screenshot()</code></a> because the screenshot needs to contain the entire desktop. Instead, I am screenshotting with ImageMagick's <a href="https://imagemagick.org/script/import.php" rel="nofollow noreferrer"><code>import</code></a> command.</p>
  
  <p>My current code works most of the time. But other times, it fails with strange results, such as:</p>
  
  <ul>
  <li>The tab is switched, but the screenshot contains half of the old page. </li>
  <li>The page is switched but blank.</li>
  <li>Adding a delay works but is not ideal, because sometimes page loading is very slow.</li>
  </ul>
  
  <p>The problem seems to be that <a href="https://github.com/GoogleChrome/puppeteer/blob/v1.18.0/docs/api.md#pagebringtofront" rel="nofollow noreferrer"><code>page.bringToFront()</code></a> does not wait for the page to load fully.</p>
  
  <p>I am new to both Node and puppeteer. Please suggest a way to:</p>
  
  <ol>
  <li>Load a page in Chrome.</li>
  <li>Switch to the page once loaded.</li>
  <li>Take a screenshot of the desktop by executing a command-line tool.</li>
  </ol>
  
  <p>Adding a delay to the code does not seem to be the best solution.</p>
  
  <p>Any suggestion on code improvement would be helpful. </p>
  
  <pre><code>const puppeteer = require('puppeteer');
  const execSync = require('child_process').execSync;
  const sleep = require('sleep'); 
  
  (async () =&gt; {
      const browser = await puppeteer.launch({
          headless: false,
          args: [
              '--ignore-certificate-errors',
              '--no-sandbox',
              '--disable-infobars',
              '--disable-setuid-sandbox',
              '--incognito',
              '--window-size=1600,1200',
              '--start-maximized',
              "--disable-gpu"],
          // slowMo: 250, // slow down by 1550ms
      });
  
      await browser.newPage();
      await browser.newPage();
      const pages = await browser.pages();
      await Promise.all([
          grabpage(pages[0], 'https://www.cnn.com', 'cnn'),
          grabpage(pages[1], 'https://www.bbc.com', 'bbc'),
          grabpage(pages[2], 'https://www.rediff.com', 'rediff'),
      ]);
      // Someday we will close the browser also.
  })();
  
  async function grabpage(page, url, path) {
      await page.goto(url);
      var infront =page.bringToFront();
      infront.then(
          sleep.sleep(5),
          execSync('import -window root ' + path +'.jpg'),
      );
      console.log('took Screenshot: '+path+'.jpg')
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qmRnF.jpg" rel="nofollow noreferrer">Rediff page not loaded fully without sleep</a></p>