How To Maximise Screen Use In Pupeteer Non Headless

Have you ever wanted to make the most out of the screen space when working with Puppeteer in non-headless mode? In this guide, we'll walk you through some tips and tricks to help you maximize your screen usage for a smoother development experience.

When using Puppeteer in non-headless mode, by default, the browser window that opens is quite small, which can be limiting when you're trying to view the entire content of a webpage. To overcome this limitation, you can utilize the page.setViewport method to set a custom viewport size for the browser window. This allows you to make the window larger and adjust the dimensions to suit your needs.

Here's an example of how you can use page.setViewport to increase the screen space:

const puppeteer = require('puppeteer');

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

  await page.setViewport({ width: 1920, height: 1080 });

  await page.goto('https://example.com');
  
  // Your Puppeteer code here
  
  await browser.close();
})();

In this snippet, we're setting the viewport width to 1920 pixels and the height to 1080 pixels. You can adjust these values to fit your specific requirements. Setting a larger viewport size gives you more screen space to work with, making it easier to interact with the page elements during your automation tasks.

Another way to maximize screen use in Puppeteer non-headless mode is by utilizing the full screen mode. You can make the browser window go fullscreen using the fullScreen method. This can be particularly useful when you want to focus solely on the webpage content without any distractions from the browser UI.

Here's how you can enable full-screen mode in Puppeteer:

const puppeteer = require('puppeteer');

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

  await page.goto('https://example.com');
  
  await page.fullScreen();
  
  // Your Puppeteer code here
  
  await browser.close();
})();

By invoking the fullScreen method on the page object, you can maximize the browser window to occupy the entire screen, providing you with an unobstructed view of the webpage you're working with.

In conclusion, making the most out of the screen space in Puppeteer non-headless mode involves setting a custom viewport size and utilizing full-screen mode. These techniques can significantly enhance your productivity and make your automation tasks more seamless. Experiment with different viewport dimensions and full-screen mode to find what works best for your workflow. Happy coding!