iTechGuides 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
For a one-off capture, use Firefox Developer Tools; for repeatable screenshots of an SPA route or component, use Playwright. Navigate to the exact client-side route, reproduce the UI state you want, and wait for the rendered content to settle before capturing. Choose a viewport image for what is visible, a full-page image for the scrollable document, or an element screenshot for one component.
Choose the capture scope first
A single-page app (SPA) can change routes and content without loading a new document. A screenshot records the browser’s rendered state at a moment in time; it does not infer which route, filters, tab, modal, or data state you intended. Set those explicitly before taking the image.
| Scope | What it captures | Best for |
|---|---|---|
| Viewport | The visible browser content within the current viewport. | A dashboard or screen as a user currently sees it. |
| Full page | The complete scrollable document. | A long route whose sections extend below the fold. |
| Element | A selected node or component. | A chart, card, table, or other isolated UI component. |
Full-page capture does not expand collapsed panels or reveal content that the app has not rendered. Virtualized lists may only render the rows near the viewport, and canvases, maps, and charts should be checked visually rather than assumed correct from their DOM structure.
Free tools Windows power users keep installed
One-click scans. No signup required.
Take a one-off screenshot in Firefox Developer Tools
Firefox offers a built-in full-page capture and an Inspector command for a selected element. Mozilla documents both options in its Screenshot tool documentation and Inspector documentation.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
- Open the SPA and navigate to the client-side route you want to capture.
- Set the app state: sign in if appropriate, apply filters, choose the tab, expand or collapse panels, and open or close any modal.
- Wait for the data, fonts, images, and animations to settle. Confirm the page displays the intended result.
- To enable full-page capture, open Developer Tools settings, find Available Toolbox Buttons, and check Take a screenshot of the entire page.
- Use the screenshot icon in the Developer Tools toolbar to save the entire page. Firefox saves the image to Downloads.
- For one component, open the Inspector, right-click the desired element in the page or markup, and choose Screenshot Node.
- Open the saved file and inspect it for clipped content, overlays, missing lazy-loaded images, and sensitive information.
Use the entire-page icon when you need the document’s complete scrollable height; use Screenshot Node when the useful subject is a single component. If a component is covered by a modal or sticky header, decide whether that overlap is part of the state you need to show before capturing.
Automate route and component screenshots with Playwright
Playwright is a good default for repeatable captures because its page API supports Chromium, Firefox, and WebKit, plus viewport, full-page, and element screenshots. The official guides cover screenshots and the Page API.
Install Playwright in a project with Node.js, then save this as capture-spa.js. The example uses a public example URL; replace it with your app route and implement the state-setting step for your application.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
try {
await page.goto('https://example.com/app#/dashboard', {
waitUntil: 'networkidle',
timeout: 30000
});
// Set the app's filters, tab, and other UI state here.
// For example: await page.getByRole('button', { name: 'Last 30 days' }).click();
await page.screenshot({ path: 'spa-viewport.png' });
await page.screenshot({ path: 'spa-full-page.png', fullPage: true });
await page.locator('[data-testid="chart"]').screenshot({ path: 'chart.png' });
} finally {
await browser.close();
}
})();Run it with node capture-spa.js. The three output files represent distinct scopes: the current viewport, the full scrollable document, and the chart selected by its test ID. Replace [data-testid="chart"] with a stable selector in your app. A data-testid is often less fragile than a class used only for styling; a semantic role and accessible name are also useful when they uniquely identify the intended component.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Make the route and state deterministic
Use the full route, including a hash route such as #/dashboard if the app uses one. Set the same viewport for captures you plan to compare. Add the application’s actual state-setting actions after navigation: select a date range, wait for a request-backed result, or open a panel. A successful navigation event is not proof that an SPA’s asynchronous data or visual rendering has finished.
waitUntil: 'networkidle' can help on apps that become quiet after loading, but it is not a universal readiness signal. Live polling, analytics, WebSockets, or other continuing activity can prevent network idle; conversely, the app may still be updating after its network becomes quiet. Prefer waiting for an app-specific result, such as a locator becoming visible or a loading indicator disappearing:
await page.locator('[data-testid="dashboard-ready"]').waitFor({ state: 'visible' });Use a selector that reflects a real, stable ready state in your own app. If the page has transitions or delayed image loading, wait for those explicitly or use a short, intentional delay after the relevant state change. Do not rely on arbitrary long sleeps as a substitute for checking the UI.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Full page and component limits
Playwright’s fullPage: true captures the complete scrollable page. An element screenshot captures the selected locator. The Playwright screenshot tool documentation describes an element reference or selector as the target; fullPage and target are mutually exclusive. For programmatic screenshots, use separate calls as in the example rather than trying to request both scopes in one capture.
Playwright supports PNG, JPEG, and WebP output, custom filenames, and CSS-pixel or device-pixel scaling. For example, a screenshot can use type: 'jpeg' or type: 'webp'; choose a format and scaling appropriate to the destination, and inspect the resulting dimensions and quality. For visual regression checks, keep viewport, browser engine, device scale, app data, and UI state consistent across runs.
Use the Playwright CLI for quick captures
If you want a command-line capture without writing a script, Playwright CLI supports viewport, full-page, and targeted-element screenshots. Its options include PNG, JPEG, and WebP, a filename, and high-resolution device pixels; see the Playwright CLI documentation.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
The basic forms are:
playwright screenshot https://example.com/app#/dashboard dashboard.png
playwright screenshot --full-page https://example.com/app#/dashboard dashboard-full.pngFor an element or other CLI options, use the installed CLI’s help and the documentation for your Playwright version. A command-line screenshot is convenient for a simple route, but a script is more suitable when the app requires login, filters, clicks, readiness checks, or several routes.
Use Puppeteer if it fits your existing automation
Puppeteer is another JavaScript browser-automation library. Chrome’s documentation describes capturing full pages or specific elements, and Puppeteer supports Chrome and Firefox automation. If your tests or existing tooling already use Puppeteer, its screenshot API can serve the same basic viewport, full-page, and element use cases. Otherwise, Playwright’s documented browser-engine choices and capture options make it a straightforward starting point; that is a workflow recommendation, not a performance benchmark.
For an element capture, use a locator or element handle for the component you want; for a full-page image, set the full-page option in Puppeteer’s screenshot call. Consult the Puppeteer documentation for installation and API details that match your installed version.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
Capture every SPA route reliably
For a route set, treat each screenshot as a small test: specify the URL, state, readiness condition, viewport, and output name. Keep those inputs in data rather than hand-editing the script for each image.
- List the routes to capture, including hash or query-string state when relevant.
- For each route, navigate directly if the app supports deep links; otherwise load the app shell and reach the route through its UI.
- Apply a known data fixture or deterministic filters. Avoid relying on changing production data if screenshots will be compared over time.
- Wait for a route-specific ready signal and any important visual assets.
- Capture the viewport, full page, or selected component that answers the purpose of that screenshot.
- Use filenames that identify route and state, and review the images after the run.
Authentication needs deliberate handling. Use an appropriate test account or established test setup, and avoid embedding passwords, session cookies, or access tokens in source code or screenshot filenames. Treat screenshots as potentially sensitive artifacts: review them for personal data, tokens, internal URLs, and confidential records before sharing or storing them.
Common problems and fixes
- The screenshot shows the previous route or a loading shell. The client-side navigation or data render may not have completed. Wait for a route-specific element or ready indicator rather than assuming that page navigation alone means the UI is ready.
- Full-page output is unexpectedly short. The app may not have rendered below-the-fold content, or a virtualized list may only contain currently mounted rows. Scroll or interact to load required content, or capture the relevant component in a state where it is rendered.
- A lazy image or chart is blank. Wait for the image or visualization to finish drawing, and verify that the component is visible before capture. Canvases and maps need visual inspection because their pixels may not be represented by ordinary text content.
- The selector fails or captures the wrong component. Inspect the live DOM and use a unique, stable selector. Add a test ID or use a semantic role and accessible name where possible; ensure the element exists before taking its screenshot.
- Network idle never occurs. The app may maintain active connections or background requests. Remove the network-idle condition and wait for a concrete UI-ready selector instead.
- Images differ between runs. Fix the viewport, browser engine, device scale, route state, and data. Dynamic timestamps, rotating content, animations, and personalized information can also alter pixels; control or account for those inputs.
- The screenshot exposes private information. Use a safe test state, inspect the saved file, and redact or recapture before sharing. A screenshot can disclose visible account data even when the automation code contains no secret.
Or skip the browser setup
ScreenshotNeo can capture a URL with one GET request, returning PNG, JPEG, WebP, or PDF. It accepts the query parameter names used by other screenshot APIs, and its options include full-page capture, CSS-selector element capture, custom CSS and JavaScript, wait conditions, viewport and device settings, and more. See the ScreenshotNeo website and API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/app#/dashboard -o shot.webpCookie banners are accepted and removed before the shot, along with supported newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Before you share the image
Check the saved screenshot at its actual size. Confirm that it shows the intended route and state, that content is not clipped, and that overlays are either deliberately included or absent. Check charts, maps, lazy content, and sticky headers in the rendered image, then scan for personal data, credentials, tokens, internal URLs, and confidential records.
Recommended Free Tools
Frequently Asked Questions
Can I capture a hash-based SPA route directly?
Yes. Include the hash route in the URL, for example https://example.com/app#/dashboard, if the app supports direct loading of that route.
Does a full-page screenshot include every item in an infinite or virtualized list?
Not necessarily. It captures the rendered scrollable document; virtualized lists may only mount a subset of rows. Load or expose the items you need before capture and inspect the output.
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.
