Free tools Windows power users keep installed
One-click scans. No signup required.
Use Playwright’s page.screenshot() after navigating to your Vue app. The same API works for Vue as for any other web page: capture the visible viewport by default, add fullPage: true for the whole scrollable page, or call screenshot() on a locator to capture one component.
Capture a Vue page with Playwright
Start your Vue development server, then navigate Playwright to the URL it serves. This CommonJS example saves the current viewport to screenshot.png:
As an Amazon Associate I earn from qualifying purchases.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('http://localhost:5173');
await page.screenshot({ path: 'screenshot.png' });
} finally {
await browser.close();
}
})();The local address is an example; use the URL and port shown by your own Vue development server, or the deployed page URL. The screenshot API is documented in Playwright’s Page API. Playwright’s basic pattern is to navigate a page and call page.screenshot({ path }).
Recommended Free Tools
Choose the area and image scale
Visible viewport
The default screenshot captures the currently visible browser viewport. The example above uses this behavior. If the page is taller than the viewport, content below the fold is not included.
#1 Best Overall
Full scrollable page
Set fullPage: true to capture the full scrollable page rather than only the viewport:
await page.screenshot({ path: 'full-page.png', fullPage: true });fullPage defaults to false. See the screenshot options for the documented behavior.
One Vue component or element
Use a locator to target a component in the rendered DOM. For example, if the component’s root element has the class header:
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
await page.locator('.header').screenshot({ path: 'header.png' });A locator-based screenshot is the recommended approach for an element; Playwright marks the older ElementHandle screenshot method as discouraged. A locator must match an element on the page. See Locator screenshot options.
CSS pixels or device pixels
Set scale to control the output pixel scale. scale: 'css' produces one image pixel per CSS pixel; scale: 'device' captures device pixels and can produce a larger image on a high-density display.
await page.screenshot({ path: 'css-scale.png', scale: 'css' });Set a viewport for a particular screen size
Viewport dimensions are browser-context emulation settings, so configure them when creating the context if the screenshot must represent a specific screen size. For example:
Rank #3
const context = await browser.newContext({
viewport: { width: 1280, height: 800 }
});
const page = await context.newPage();Playwright notes that setting a page’s viewport also resets its screen size. When you need finer control, use the context’s screen and viewport parameters. The Pages guide explains page and context behavior.
Make captures more consistent
Wait for the page state you need
A screenshot records what the browser has rendered when the capture call runs. If your Vue page fills in data asynchronously, wait for a page-specific condition before capturing rather than assuming navigation alone means the final content is ready. For example, wait for a visible element that marks the loaded state:
await page.goto('http://localhost:5173');
await page.locator('[data-testid="page-ready"]').waitFor();
await page.screenshot({ path: 'screenshot.png' });Replace the selector with an element your app actually renders. This example is an implementation pattern, not a Vue-specific Playwright requirement.
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
Reduce animation variation
Locator screenshots accept animations: 'disabled'. Playwright fast-forwards finite animations and cancels infinite animations for the capture behavior described by the API:
await page.locator('.dashboard').screenshot({
path: 'dashboard.png',
animations: 'disabled'
});Use this when animation would make a visual capture inconsistent, but consider whether suppressing it is appropriate for the behavior you intend to document. Details are in the Locator screenshot API.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use a stable environment for visual comparisons
Screenshot output can vary with the host operating system, browser version, settings, hardware, power source, and headless mode. For visual regression work, generate and compare baselines in the same environment where practical. Playwright Test’s documented image-comparison path is expect(page).toHaveScreenshot(); see the visual comparisons guide.
Image format and file path
Playwright infers the screenshot type from the file extension. PNG is the default if no type is specified. Use an extension that matches the format you want, such as .png or .jpeg, and choose a path where the running script can write a file. The Page API lists screenshot options.
Troubleshoot common problems
- The page does not load: Confirm the Vue development server is running and that the URL and port match its output. A navigation error commonly means Playwright cannot reach that address.
- The image is blank or incomplete: Check that the page has rendered the content you expect before calling screenshot. For data-driven pages, wait for a reliable app-specific selector or other readiness condition.
- The screenshot ends at the fold: Add
fullPage: trueif you need the full scrollable document; the default captures only the viewport. - The component screenshot fails to target the right content: Verify the locator matches the rendered element, not just a Vue component name that does not appear in the DOM. A CSS class or test ID on the component root can provide a target.
- The image dimensions or visual baseline differ across machines: Check the viewport and scale settings, then compare captures in the same browser and host environment. Rendering may also vary with operating system, hardware, settings, and headless mode.
- The output file is missing: Check the supplied path and the script’s write permissions. Ensure the screenshot call completes before closing the browser.
Or skip the browser setup
If you need a screenshot from a URL without setting up Playwright locally, ScreenshotNeo provides a website screenshot API. One GET request can return an image or PDF; consult the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. It also provides an MCP server with screenshot tools for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Does Vue need a special Playwright screenshot method?
No. Playwright captures the rendered browser page with its general Page or Locator screenshot APIs.
What does Playwright save by default: the viewport or the whole page?
The viewport. Set fullPage: true to capture the full scrollable page.
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.
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 →
