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 minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Playwright to visit an authorized list of school website URLs, set a consistent browser context, and save either viewport or full-page screenshots. The example below captures both for each site, with a fresh context per URL so cookies and storage do not carry between captures.
Before you start
- Install Playwright and its browser binaries in your project.
- Make a list of public URLs you own or are authorized to capture. Avoid student or staff portals unless the operator has expressly authorized that scope.
- Create a directory for the screenshots before running the script.
- Choose whether you need a standard viewport, a full-page image, or a specific page element. These produce different records and may have different image dimensions.
Playwright’s screenshot API can save an image to a file, capture a full page or an element, and return image bytes for later processing. See the Playwright Screenshots guide and Page API.
Install Playwright and prepare the output folder
For a JavaScript project using the Playwright library, install the package and Chromium:
- Run
npm init -yif the project does not already have apackage.json. - Run
npm install playwright. - Run
npx playwright install chromium. - Create a
screenshotsdirectory in the project root. The script below expects it to exist.
Save the script as capture-schools.mjs and run it with node capture-schools.mjs. Replace the example domains with URLs supplied by the site owner or otherwise authorized for capture.
#1 Best Overall
Capture viewport and full-page screenshots for a URL list
import { chromium } from 'playwright';
const targets = [
{ name: 'school-a', url: 'https://example.edu.in/' },
{ name: 'school-b', url: 'https://example-school.in/' },
];
const browser = await chromium.launch();
try {
for (const target of targets) {
const context = await browser.newContext({
viewport: { width: 1365, height: 900 },
locale: 'en-IN',
});
try {
const page = await context.newPage();
await page.goto(target.url, { waitUntil: 'load', timeout: 45_000 });
await page.screenshot({
path: `screenshots/${target.name}-viewport.png`,
});
await page.screenshot({
path: `screenshots/${target.name}-full.png`,
fullPage: true,
});
} finally {
await context.close();
}
}
} finally {
await browser.close();
}This is an illustrative pattern, not a tested script. The fixed viewport makes capture dimensions more consistent, and locale: 'en-IN' sets the browser locale; it does not translate a site or prove that a school website offers a particular language. Playwright documents locale and other browser emulation settings in its Emulation guide.
The load condition waits for the page load event, but it does not guarantee that every dynamically loaded image, menu, or widget is ready. If the content you need appears later, use a readiness condition that reflects that page—for example, wait for a known selector before taking the screenshot. The right selector and wait condition depend on the site.
Choose the capture scope and rendering settings
| Decision | Options | When to use them |
|---|---|---|
| Capture scope | Viewport, full page, or element | Use a viewport image for the visible screen, full page for a long-page record, or an element capture for a specific banner, menu, or content block. The Page API documents screenshot options. |
| Display configuration | Fixed viewport, device preset, and scale | Use a desktop viewport for a desktop review, or a configured mobile/tablet device when that presentation matters. Keep the settings consistent between comparison runs. |
| Locale and language | Browser locale or a language-specific URL | Set a locale when reviewing locale-sensitive rendering; use an explicit language URL if the site provides one. Browser emulation cannot create a translation the website does not offer. |
| Image handling | Save an image file or use returned image bytes | Save to a stable filename for review or archiving; use the returned buffer when another step in your workflow needs to process the image. Playwright documents supported screenshot options in the Page API. |
For a single element, locate it and call screenshot() on the locator, for example await page.locator('.notice').screenshot({ path: 'screenshots/notice.png' });. Replace .notice with a selector that actually matches the element on the target page.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Playwright browser contexts isolate cookies and storage. Creating a fresh context per URL, as in the example, gives each capture a clean session boundary; close it when that site’s capture is complete. See Browser contexts.
Make screenshots useful for comparison
For before-and-after reviews or visual baselines, keep the browser version, operating system, viewport, device scale, locale, color scheme, and headless settings as stable as practical. Screenshots can differ across operating systems, browser versions, settings, hardware, and headless mode, so a visual difference does not necessarily mean the site changed. Playwright discusses environment consistency in its Visual comparisons guide and provides project configuration for browser and device coverage in Projects.
Use filenames that identify both the site and capture mode, such as school-a-viewport.png and school-a-full.png. If the URL inventory changes, keep the names stable for sites that remain in the run so later reviewers can identify corresponding files.
Privacy and handling captures of school sites
Limit captures to public pages and the visual material needed for the task. Review saved images before sharing them, especially for student names, faces, results, or contact details. India’s Digital Personal Data Protection Act, 2023, section 9 addresses processing children’s personal data, including verifiable parental consent and restrictions on detrimental processing, tracking, and behavioural monitoring, subject to statutory qualifications and exceptions. The statute alone does not determine how a particular screenshot workflow is governed; seek appropriate legal or privacy advice for your specific project. See the Act text.
Recommended Free Tools
Troubleshooting
- Browser executable missing: install the browser binary with
npx playwright install chromiumin the environment where the script runs. - Cannot save the screenshot: confirm the
screenshotsdirectory exists and that the process can write to it. The sample does not create the directory. - Navigation times out: check that the URL is reachable from the machine running the script. A slow or continuously active site may need a longer timeout or a different readiness condition suited to the content you need.
- The screenshot is missing late content:
waitUntil: 'load'does not wait for every dynamic element. Wait for a relevant selector or other page-specific readiness condition before capturing. - Images differ between runs: stabilize the browser and host environment and keep emulation settings identical. Environmental rendering differences can affect comparisons.
- A locale change has no visible effect: browser locale emulation does not add language support to the site. Verify that the website offers the language or use its language-specific URL if available.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. Its one-request API can return an image or PDF; cookie banners are accepted and known consent banners, newsletter popups, and chat widgets are removed before capture. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with the page verdict and billing status in response headers. Its MCP server gives AI agents screenshot tools, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. See ScreenshotNeo.
cURL example, with the target URL adapted to an authorized school page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.edu.in/ -o shot.webpFor API parameters and response details, see the ScreenshotNeo documentation. To run the request, sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Can I save the screenshot bytes instead of writing directly to a file?
Yes. Playwright’s screenshot API can return image bytes for downstream processing instead of saving them to a path.
Does setting the browser locale translate a school website?
No. Locale emulation can affect browser presentation, but translation must be provided by the site itself.
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.
