To take a screenshot with Puppeteer, install the puppeteer package, launch its bundled browser, open the page you need, and save it with page.screenshot(). Set the viewport to match your assignment, and choose a viewport, full-page, or element capture depending on what you need to submit.
Install Puppeteer in your Node.js project
-
Open a terminal in your project folder and run
npm install puppeteer. The standard package downloads a compatible Chrome for Testing browser as part of its default workflow. -
Use a JavaScript module file such as
screenshot.mjs, or set"type": "module"in your project’spackage.jsonif you want to useimportin a.jsfile.
Puppeteer is driven from Node.js by launching or connecting to a browser, creating a page, and navigating to a URL. Its official getting-started guide shows this sequence: Puppeteer getting started.
#1 Best Overall
Capture and save a webpage screenshot
This example captures the entire document at a 1280-by-800 viewport and saves it as screenshot.png. Replace the example URL with the local or deployed page your instructor wants to see.
import puppeteer from 'puppeteer';
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' });
await page.screenshot({ path: 'screenshot.png', fullPage: true });
} finally {
await browser.close();
}Run it from the project directory with node screenshot.mjs. The output file is written relative to the working directory from which the command runs. The finally block closes the browser even if navigation or capture fails, allowing the Node.js process to exit cleanly.
The example uses networkidle2 as one possible navigation wait condition, not as a guarantee that every site will settle. Some pages keep network requests open or load important content later. If navigation waits too long or the screenshot misses content, choose a wait condition appropriate to the page; for a page-specific element, waiting for a selector can be more useful than waiting for all network activity to quiet down. See the Page.goto API and Page.screenshot API.
Choose the right capture area
| What the assignment needs | Puppeteer option | What it captures |
|---|---|---|
| Visible screen only | page.screenshot({ path: 'screen.png' }) |
The current page view by default. |
| Whole document | page.screenshot({ path: 'full.png', fullPage: true }) |
The full page, including content below the viewport. |
| One component or DOM element | element.screenshot({ path: 'element.png' }) |
The selected element; Puppeteer scrolls it into view if needed. |
| A specific rectangular region | page.screenshot({ path: 'region.png', clip: { x: 0, y: 0, width: 600, height: 400 } }) |
The rectangle described by the clip coordinates and dimensions. |
The option names and screenshot behavior are documented in the ScreenshotOptions API and ElementHandle.screenshot API.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Set the viewport dimensions
Call page.setViewport({ width, height }) before navigation or capture when the assignment specifies a screen size. A viewport determines the page’s layout size; it does not mean a full-page image will be limited to that height when fullPage: true is used. Use the width and height required by your assignment rather than assuming one screen size is acceptable.
Rank #2
Capture one element
For a specific chart, card, or other component, get its element handle and call screenshot() on that handle:
const element = await page.$('.result-card');
if (!element) {
throw new Error('Could not find .result-card');
}
await element.screenshot({ path: 'result-card.png' });Replace .result-card with a CSS selector from the page. The call fails if the element has been removed from the DOM before the screenshot is taken.
Set image output options
-
Puppeteer infers image type from the filename extension in
path; use an extension that matches the format you need.Recommended Free Tools
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
qualityapplies to supported non-PNG image output. It is not a general PNG quality control. -
omitBackgroundcan omit the page background for a transparent capture. -
clipselects a rectangular area when a full viewport or full page is not wanted.
Run the capture against your own project
For a page served locally, first start your development server using the command your project requires. Then set page.goto() to its local URL, such as http://localhost:3000, and run the screenshot script while that server is still running. If the page needs login state or particular data, arrange that state before capture; a screenshot records only the rendered state present at that moment.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteBefore submitting, check the instructor’s requested page, viewport, image format, file location, and whether the expected evidence is a viewport, whole page, or component. No universal India-specific college rule is established here: requirements vary by course and assignment. A screenshot documents one visual state; by itself it does not prove that the complete application works.
Browser choice and setup notes
The normal puppeteer package downloads a compatible Chrome for Testing browser and is the recommended supported path. Puppeteer says it does not guarantee compatibility with arbitrary Chrome installations. If you instead install puppeteer-core, provide an executablePath or channel in the launch options. See the launch options reference.
Troubleshoot common screenshot problems
-
The browser does not launch: Confirm that the installation completed and that the bundled browser is available. The standard
puppeteerpackage handles the browser download by default; withpuppeteer-core, configure a browser path or channel. -
The page never seems ready: A page that continuously makes requests may not reach a network-idle condition. Pick a navigation wait condition suited to the page, or wait for the particular content your capture needs instead.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
The screenshot is the wrong size: Set the viewport explicitly before capture, and confirm whether the task asks for the visible view or the full document.
-
The output file is missing: Check the script’s current working directory and the value passed to
path. A relative filename is saved relative to where Node.js was run. -
Element capture fails: Check that the selector matches an element at capture time. The element screenshot call throws if the element has been removed from the DOM.
-
Content is absent from the image: Ensure the page reached the relevant content state before capture. Navigation completing does not, on its own, establish that a delayed component or image has rendered.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Or skip the browser setup
ScreenshotNeo can return a screenshot or PDF with one GET request; its API parameters and options are documented at ScreenshotNeo docs.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan to try the API.
Frequently Asked Questions
Can I capture a screenshot without saving it to a file?
Yes. Puppeteer can return screenshot data instead of writing to a path; consult the Page.screenshot API for the supported return behavior and options.
Does a screenshot prove that my whole application works?
No. It records the page’s rendered state at capture time; it does not verify the application’s full behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
