Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallUse Playwright’s jpeg screenshot type and give the output a .jpg filename. The shortest working example is:
await page.screenshot({ path: 'screenshot.jpg', type: 'jpeg' });When you provide a path, Playwright can infer the format from the extension. Setting type: 'jpeg' explicitly makes the encoding choice clear and lets you add options such as quality or full-page capture.
Save a Playwright screenshot as JPG
In a JavaScript or TypeScript Playwright script, navigate to a page and call page.screenshot() with a .jpg path and type: 'jpeg':
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({
path: 'screenshot.jpg',
type: 'jpeg'
});
await browser.close();The file is written to the current working directory. Change the path to a directory that exists and that your process can write to. Playwright’s screenshot API spells the format value jpeg; jpg is an appropriate filename extension.
#1 Best Overall
Install and run the script
If Playwright is not already in the project, install it and download its browser binaries:
npm install -D playwright
npx playwright installSave the example as capture.mjs and run it with:
node capture.mjsFor TypeScript, use your normal TypeScript runner or compile the file first. The screenshot call and its options are the same.
JPG options you will use most
The screenshot method accepts a set of options that control where the image goes, how much of the page is captured, and how JPEG is encoded.
| Option | Example | Purpose |
|---|---|---|
path |
'artifacts/home.jpg' |
Saves the returned image bytes to a file. |
type |
'jpeg' |
Selects JPEG encoding explicitly. |
quality |
quality: 85 |
Sets JPEG quality from 0 through 100. The documented default is 80. |
fullPage |
fullPage: true |
Captures the full scrollable page instead of only the current viewport. |
Quality is an encoding setting, not a guaranteed file-size target. The documentation does not promise a particular size change for any given value, so inspect the resulting image and choose a value that meets your visual and storage requirements.
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 minuteSet a known JPEG quality
await page.screenshot({
path: 'homepage-q90.jpg',
type: 'jpeg',
quality: 90
});Use a number between 0 and 100. If you omit quality, Playwright uses the documented JPEG default of 80.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Capture a full page as JPG
To include the complete scrollable document, add fullPage: true:
await page.screenshot({
path: 'full-page.jpg',
type: 'jpeg',
fullPage: true
});This is useful for a page that extends below the initial viewport. It still produces one JPEG file at the path you specify.
Save only one element as JPG
For a card, chart, component, or other single element, use a Locator screenshot rather than capturing the whole page:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
await page.locator('.card').screenshot({
path: 'card.jpg',
type: 'jpeg'
});The locator screenshot captures the matched element and returns image bytes in the same way as the page screenshot method. Use a selector that identifies the element you actually want; if the selector matches nothing, fix the selector or wait for the element to appear before taking the screenshot.
Get JPG bytes without writing a file
Omit path when another part of your program needs the image in memory. Playwright returns a Buffer:
Rank #3
const imageBuffer = await page.screenshot({
type: 'jpeg',
quality: 85
});
// Pass imageBuffer to your own storage, upload, or processing step.No file is saved by this call. This pattern avoids a temporary file when your next operation accepts bytes directly. You can also capture an element into a buffer:
const cardBuffer = await page.locator('.card').screenshot({
type: 'jpeg'
});JPEG quality, transparency, and format choices
JPEG is useful when you need lossy image encoding and an explicit quality control. It cannot preserve a transparent background. The omitBackground transparency behavior does not apply to JPEG.
| Requirement | Use |
|---|---|
| Need a JPG file | type: 'jpeg' with a .jpg path. |
| Need quality control | Set quality from 0 to 100; default is 80. |
| Need transparency | Use a supported alternative such as PNG rather than JPEG. |
| Need bytes for another step | Omit path and keep the returned Buffer. |
Choose the format based on what the next system accepts and whether transparency is required. Do not assume a particular file-size or visual-quality difference from a quality value without checking the generated output in your own workflow.
Complete reusable capture script
This script combines navigation, a full-page JPG, an element JPG, and an in-memory buffer:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 1440, height: 900 }
});
try {
await page.goto('https://example.com');
await page.screenshot({
path: 'artifacts/page.jpg',
type: 'jpeg',
quality: 85,
fullPage: true
});
await page.locator('h1').screenshot({
path: 'artifacts/title.jpg',
type: 'jpeg',
quality: 90
});
const preview = await page.screenshot({
type: 'jpeg',
quality: 70
});
console.log(`Generated ${preview.length} bytes in memory`);
} finally {
await browser.close();
}Create the artifacts directory before running this example, or change the paths to an existing writable directory. The try/finally block ensures the browser is closed even if capture fails.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Playwright Test and automatic screenshots
Playwright Test can be configured to collect screenshots as test artifacts, with modes such as only-on-failure and on-first-failure. Those modes are useful for diagnostic artifacts. When you need a deliberate JPEG at a known point in a test, call the Page screenshot method yourself and provide the type and path options:
Free tools Windows power users keep installed
One-click scans. No signup required.
import { test } from '@playwright/test';
test('save a JPEG checkpoint', async ({ page }) => {
await page.goto('https://example.com');
await page.screenshot({
path: 'test-results/checkpoint.jpg',
type: 'jpeg',
quality: 80
});
});Automatic artifact settings and explicit captures solve different problems: configuration decides when test evidence is collected, while the method call gives you control over the exact filename, format, quality, and capture scope.
Troubleshooting JPG captures
The output is PNG instead of JPG
Check both the filename and the option. Use a .jpg or .jpeg path and set type: 'jpeg' explicitly. A mismatched extension or an omitted type can make the intended format unclear.
The file is not created
Verify that the parent directory exists and is writable by the process. A relative path is resolved from the process’s current working directory, which may differ from the directory containing your script. Log the absolute working directory while diagnosing CI failures.
Quality causes an option error
Pass a numeric value from 0 through 100. Do not pass a string such as '90', and do not use a value outside the documented range.
Recommended Free Tools
Transparency is missing
That is expected for JPEG. JPEG does not support transparent backgrounds through omitBackground. Capture a PNG when transparency is a requirement.
The screenshot is only the visible viewport
Add fullPage: true to the Page screenshot call. For an individual component, use the Locator screenshot method instead of relying on the viewport dimensions.
The locator screenshot fails
Confirm that the selector matches the intended element and that the element exists when the call runs. A locator screenshot is scoped to the matched element; it is not a substitute for a page-wide capture.
You need to upload the image, not save it
Remove path and use the returned Buffer. This keeps the JPEG in memory for the next operation.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Or skip the browser setup
ScreenshotNeo provides a website screenshot API when you want one HTTP request instead of managing a Playwright browser. Its cleanup step 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 responses identify the result with X-Page-Verdict and X-Billed headers.
The API can return PNG, JPEG, WebP, or PDF. The same service also offers full-page and element captures, custom CSS and JavaScript, waiting rules, request blocking, headers and cookies, device and viewport controls, resizing, caching with a chosen TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs per call, a usage API, and an OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
See the ScreenshotNeo documentation for parameter details. A JPEG request can be made with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Set the service’s output parameter to JPEG when constructing a request; the examples above show the required one-call authentication and URL pattern. ScreenshotNeo’s Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan, and yearly billing provides two months free.
Create a free ScreenshotNeo account to get 1,000 screenshots a month without adding a card.
Quick Recap
Practical checklist
- Use
type: 'jpeg'and a.jpgpath. - Set
qualityonly when you need a value other than the documented default of 80. - Use
fullPage: truefor the entire scrollable page. - Use
locator.screenshot()for one element. - Omit
pathwhen you need a returnedBuffer. - Choose PNG when transparency is required.
- Check directories, selectors, and quality range when a capture fails.
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.
