How to Take Puppeteer Screenshots in an Indian College Project with Node.js

To take a webpage screenshot in a Node.js college project, install puppeteer, launch its bundled browser, open the page, and call page.screenshot(). Set the viewport to the dimensions your assignment requires; add fullPage: true if you need the whole document rather than the visible screen. Close the browser in a finally block so the Node.js process can exit cleanly.

This method works for a local project or a deployed page. Replace the example URL and output filename below, and check your assignment instructions for the required page, viewport, image format, and capture scope. A screenshot records the rendered state at capture time; by itself, it does not prove that the whole application works.

1. Install Puppeteer in your project

From the project directory, install Puppeteer and create a file named screenshot.mjs:

npm install puppeteer

The standard puppeteer package downloads a compatible Chrome for Testing browser as part of its normal installation. This browser is Puppeteer’s best-supported option. The browser download is substantial, so allow time and disk space for it, especially on a slower connection. See the official installation guide for package-manager and download configuration details.

Use an .mjs file for the ES module import below. Alternatively, set "type": "module" in your project’s package.json and use a .js file. If your project uses CommonJS, see the CommonJS example later in this guide.

2. Capture a webpage with Node.js

This complete example saves a full-page PNG. Change targetUrl to the page for your project and outputPath to the required location. It sets the viewport before navigation so responsive layouts render at the intended size.

import puppeteer from 'puppeteer';

const targetUrl = 'https://example.com';
const outputPath = 'screenshot.png';

const browser = await puppeteer.launch();

try {
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto(targetUrl, {
    waitUntil: 'networkidle2',
    timeout: 60_000,
  });
  await page.screenshot({ path: outputPath, fullPage: true });
  console.log(`Saved ${outputPath}`);
} finally {
  await browser.close();
}

The sequence follows Puppeteer’s documented pattern: launch a browser, create a page, navigate, then capture. Puppeteer getting started and the Page.screenshot API reference describe these operations.

Capture your own local project

Start your development server in one terminal, then point the script at its local URL. For example, if your project is served at http://localhost:3000, set targetUrl to that address. The server must be running and reachable from the machine running Puppeteer. If you use a different port or route, use that exact address.

CommonJS version

If your project has not enabled ES modules, use require and an async function in a .cjs file:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  try {
    const page = await browser.newPage();
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto('https://example.com', {
      waitUntil: 'networkidle2',
      timeout: 60_000,
    });
    await page.screenshot({ path: 'screenshot.png', fullPage: true });
  } finally {
    await browser.close();
  }
})().catch(error => {
  console.error(error);
  process.exitCode = 1;
});

3. Choose the capture area

Decide what the assignment asks you to show before choosing screenshot options. A viewport screenshot, a full-page screenshot, and an element screenshot have different scopes.

What to capture	How	When it fits
Visible viewport	page.screenshot({ path: 'view.png' })	You need only what is visible at the selected screen size.
Entire document	page.screenshot({ path: 'full.png', fullPage: true })	The page is taller than the viewport and the assignment asks for the whole page.
One element	Find an element handle and call element.screenshot().	You need a specific card, chart, form, or component.
Rectangular region	Pass a clip rectangle with x, y, width, and height.	You need a region of the page rather than its full viewport or a DOM element.

Capture one element

Use a selector that uniquely identifies the element you need. This example waits for the element, obtains its handle, and saves its screenshot:

const card = await page.waitForSelector('.project-card', { timeout: 10_000 });
if (!card) {
  throw new Error('Could not find .project-card');
}
await card.screenshot({ path: 'project-card.png' });

Puppeteer scrolls an element into view when necessary before taking its screenshot. The operation throws if the element has been removed from the DOM. See the official ElementHandle.screenshot API reference.

Capture a clipped rectangle

For a fixed region, use a clip rectangle in page coordinates:

await page.screenshot({
  path: 'region.png',
  clip: { x: 80, y: 120, width: 700, height: 420 },
});

A clip is useful when you know the region’s position and dimensions. If responsive layout changes can move the content, selecting and capturing the element is usually easier to maintain.

4. Set the viewport and output options

Set the viewport before navigation when you want the page to lay itself out for a particular screen size. Width and height are CSS pixels; device scale factor changes the pixel density of the capture. For example:

await page.setViewport({
  width: 1365,
  height: 900,
  deviceScaleFactor: 2,
});

Common screenshot options include:

Option	Effect	Notes
path	Saves the image to a file.	Puppeteer infers image type from the filename extension.
fullPage	Captures beyond the visible viewport to the full document height.	Long pages can produce large images and require more memory.
clip	Captures a specified rectangle.	Provide its coordinates and dimensions.
type	Selects an image format.	PNG is the default; supported image types include JPEG and WebP.
quality	Sets lossy image quality.	Applies to JPEG and WebP, not PNG.
omitBackground	Omits the default background for transparency.	Useful for transparent captures where the page supports it.
encoding	Returns the screenshot as a base64 string instead of image bytes.	Usually unnecessary when saving directly with path.

For example, save a WebP image with a chosen quality:

await page.screenshot({
  path: 'screenshot.webp',
  type: 'webp',
  quality: 85,
  fullPage: true,
});

Use PNG when crisp text and lossless output matter. JPEG or WebP can reduce file size when lossy compression is acceptable. Check the assignment’s requested format before choosing. The full option list and behavior are documented in ScreenshotOptions.

5. Wait for the page to be ready

The waitUntil setting controls when page.goto() considers navigation complete. The sample uses networkidle2, which can be a reasonable starting point for pages that settle after loading. Some sites keep network connections open or continually fetch data, so network idle may take too long or never occur. In that case, use a less strict navigation condition and wait for the content you need.

await page.goto(targetUrl, {
  waitUntil: 'domcontentloaded',
  timeout: 60_000,
});
await page.waitForSelector('#results', { timeout: 15_000 });
await page.screenshot({ path: 'results.png', fullPage: true });

You can also wait a fixed period when a known animation or delayed render needs a brief settle time, but a selector is generally more targeted. A fixed delay cannot guarantee that a slow page has finished loading.

Lazy-loaded images and content

Full-page capture does not guarantee that every lazy-loaded image has loaded. Some pages load images only when their area approaches the viewport. If your screenshot is missing content, scroll through the page before capturing, or wait for the specific image or content selector your project needs. Pages with infinite scrolling may never have a meaningful “entire page”; decide on a target region or stop condition.

6. Run the script and find the image

Run the file from the project directory:

node screenshot.mjs

The output path is resolved relative to the process’s current working directory. If the file does not appear where expected, print process.cwd() or use an absolute path. Ensure the destination directory already exists; create it before capture if needed.

7. Troubleshoot common problems

Problem	Likely cause	Fix
Cannot find package 'puppeteer'	The package was not installed in this project, or the command is running from another directory.	Run npm install puppeteer in the project root, then run the script there.
Browser executable missing after install	A package manager blocked install scripts or the browser download did not complete.	Review Puppeteer’s installation instructions and browser download configuration, then allow the required browser installation.
Launch fails with a missing shared library or permission error	The operating system environment lacks a browser dependency or does not allow the downloaded executable to run.	Use Puppeteer’s installation guidance for that environment, verify executable permissions, and check that the bundled browser download completed.
Navigation timeout	The site is slow, has long-running network requests, or does not reach the selected idle condition.	Increase timeout where appropriate, choose a different waitUntil condition, then wait for the specific content selector.
Blank, partial, or stale screenshot	The screenshot ran before client-rendered content, images, or fonts appeared.	Wait for a selector representing the finished page, and verify the target is visible before capture.
Element screenshot says the node was detached	The page re-rendered and removed the element handle before capture.	Wait for the page update to finish, query the element again, and capture the fresh handle.
Output file missing	The relative path points to the process’s working directory, or its parent directory does not exist.	Check process.cwd(), use an absolute output path, and create the destination directory first.
Browser process stays open	The browser was not closed after an error or successful capture.	Put await browser.close() in a finally block.
Installed Chrome does not launch correctly	Puppeteer and an arbitrary system Chrome version may not be compatible.	Prefer the bundled browser. With puppeteer-core, configure executablePath or channel explicitly and account for compatibility.

Puppeteer documents its bundled browser as the guaranteed compatible workflow; compatibility with arbitrary Chrome installations is not guaranteed. See the LaunchOptions reference. Use puppeteer-core when you intentionally manage the browser yourself; its launch configuration requires an executable path or channel.

8. Performance, reliability, and cost

• Install and storage: The standard package downloads a browser, so the initial install needs more time, bandwidth, and disk space than a JavaScript-only dependency. Reuse the installed browser across captures rather than repeatedly installing it.
• Runtime: Starting a browser has overhead. For a single assignment capture, one browser and one page are simple. For multiple pages in one run, reuse the browser and close it once after the batch.
• Reliability: Set a navigation timeout, wait for content that matters, and always close the browser in cleanup. A site can still fail, block automation, or render differently depending on its state and environment.
• Output size: Full-page and high-device-scale captures can create large images. Use the required scope and scale; choose JPEG or WebP when a smaller lossy image is acceptable.
• Direct cost: Puppeteer is a software package; the documented capture workflow has no per-screenshot service charge. You provide the machine, browser download, storage, and runtime environment.
• Submission quality: Follow the assignment’s requested URL, viewport, format, and scope. Do not present one screenshot as proof of unshown features or application behavior.

Or skip the browser setup

If you need a screenshot without installing and maintaining a local browser, ScreenshotNeo is a website screenshot API and MCP server for developers. The one-call request returns an image or PDF; the examples below save an image response. See the ScreenshotNeo API documentation for request options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(({ writeFile }) =>
  writeFile('shot.webp', Buffer.from(await res.arrayBuffer()))
);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, no card required.

Frequently asked questions

Does a college project need a special screenshot package?

No special package is established by the documented procedure. Puppeteer is one way to automate a browser from Node.js; follow the requirements for your particular assignment.

Can I take a screenshot of a page running on my laptop?

Yes. Start the local development server and navigate Puppeteer to its reachable local URL, such as http://localhost:3000.

Does a screenshot show that my application is fully working?

No. It shows a rendered state at a moment in time. Test and demonstrate other behavior separately if your assignment requires it.

Should I submit the screenshot or the code?

That depends on your instructor’s submission requirements. Check whether the deliverable needs an image, source code, a particular format, or all of them.