Free tools Windows power users keep installed
One-click scans. No signup required.
Test responsive layouts by running the same Playwright page at explicit viewport sizes, waiting for each page state to settle, and capturing each case with Argos’s Playwright helper. Configure the Argos reporter in CI, establish a baseline from your default branch, then review pull-request diffs in their viewport and browser context. Argos does not prescribe universal breakpoint sizes: choose widths around your product’s actual layout transitions.
Choose responsive cases that match your interface
Start with the layout states your users can encounter, not a generic list of device names. Identify transitions such as a navigation menu collapsing, columns stacking, or a content area becoming horizontally scrollable. For each important transition, test a stable width on either side; add cases for other states that pose a known layout risk.
As an Amazon Associate I earn from qualifying purchases.
Use your application’s CSS breakpoints and user-critical states to select the dimensions. The Argos documentation supports viewport variants but does not prescribe a universal breakpoint list or device matrix. Keep the selected width and height fixed for each named case so that baseline and pull-request captures represent the same conditions.
Write Playwright tests with explicit viewports
Parameterize the cases so each capture has a descriptive name. The following example uses project-specific viewport values: replace them with dimensions chosen from your own interface. It navigates separately at each size, which helps responsive images select the appropriate resource from srcset.
#1 Best Overall
import { test } from "@playwright/test";
import { argosScreenshot } from "@argos-ci/playwright";
const viewports = [
{ name: "narrow-nav", width: 375, height: 812 },
{ name: "wide-nav", width: 1024, height: 768 },
];
for (const viewport of viewports) {
test(`homepage at ${viewport.name}`, async ({ page }) => {
await page.setViewportSize({
width: viewport.width,
height: viewport.height,
});
await page.goto("http://localhost:3000");
await argosScreenshot(page, `homepage-${viewport.name}`);
});
}The numbers above are illustrative test values, not Argos defaults or recommendations. The basic Argos capture pattern is to import argosScreenshot from @argos-ci/playwright and call it with the Playwright page and a screenshot name. Consult the Argos Playwright Quickstart for current installation, reporter, and CI setup details, since package and authentication instructions can change.
Argos screenshot metadata can record the viewport as { "width": number, "height": number }. The context around a diff can include the URL, viewport, color mode, browser, test title, and location; use clear names so reviewers can distinguish the responsive cases. See the screenshot metadata reference.
Make captures repeatable before comparing them
A useful visual comparison depends on matching capture conditions, not just matching test code. Navigate to the intended route and state, then allow relevant content and assets to settle before capture. Fonts, images, asynchronous updates, animations, busy indicators, and scrollbars can all contribute to noisy screenshots; pinning the viewport matters because reflow changes the image.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →- Wait for the specific content your test needs rather than capturing while it is still loading.
- Ensure fonts and images are ready, and control animations or other elements that change between runs where appropriate.
- Keep viewport dimensions and browser/CI conditions consistent between baseline and pull-request runs.
- For tests that resize after navigation, verify image readiness after resizing. A changed width can cause the browser to select a different responsive
srcsetimage; navigating at the target size for each case is preferable where practical.
Argos’s flaky visual tests guide discusses these sources of variation, and its image stabilization article explains why responsive images deserve special care.
Configure Argos in CI and establish a baseline
The Argos Playwright integration uses the @argos-ci/playwright package, the Argos reporter in the Playwright configuration, and argosScreenshot calls in tests. Run Playwright in CI so the captures are uploaded. The current quickstart’s example uses GitHub Actions and ARGOS_TOKEN; it also notes that GitHub Actions can use OIDC or tokenless authentication. Follow the current quickstart for the setup that applies to your workflow rather than relying on an older token recipe.
- Install and configure the Argos Playwright integration using the current quickstart.
- Add responsive test cases with stable, distinct screenshot names and explicit viewport dimensions.
- Run the workflow on the default branch to create the comparison baseline.
- Run the same suite on pull requests and inspect the resulting diffs.
Until a default-branch build exists, the Argos quickstart says pull-request builds are marked orphan, so they do not have that baseline for useful comparison.
Review diffs as evidence, not as a diagnosis
For every changed capture, first confirm that it shows the expected URL, viewport, browser, content, and interaction state. Then compare the affected region with the baseline and decide whether the change is an intended design update or a regression. Argos’s diff viewer provides screenshot context, and its variant selector documentation describes switching between screenshots captured at different viewport sizes or in different browsers. See also Argos Diff and Argos Visual Testing.
Recommended Free Tools
| Review axis | What to check |
|---|---|
| Viewport | Does the layout wrap, collapse, overflow, or leave unexpected gaps at this width compared with its baseline? |
| Browser | If the suite captures multiple browsers, does the change appear in one browser or across the variants? |
| Page state | Is this the expected route, content state, and interaction state? |
| Stability | Does the difference recur across identical runs, or could fonts, images, animation, asynchronous content, or viewport variation explain it? |
| Intent | Is this an approved design change, or should the layout be fixed before merging? |
A pixel difference alone cannot tell you whether a change is correct. Treat sensitivity or tolerance settings as a narrow tool for legitimate variation; broad thresholds can hide meaningful changes and do not replace deterministic capture setup.
Troubleshoot common responsive screenshot failures
The screenshot changes shape between runs
Check that viewport width and height are fixed, and that the browser and CI environment are consistent. Viewport variation can trigger reflow and produce a different screenshot even when the page code has not changed.
Text, images, or loaders appear inconsistently
Wait for the relevant page content and assets to settle. Investigate font loading, image decoding, asynchronous requests, busy indicators, and animations before adjusting comparison sensitivity.
A resized page shows the wrong responsive image
The browser may have selected a different srcset resource after the width changed. Prefer navigating at the target viewport for each test; if resizing is necessary, explicitly check that the selected image has loaded before capture.
Every pull-request screenshot appears new
Confirm that the default branch has completed a build to provide a baseline. Also check that screenshot names remain consistent across the baseline and pull-request runs.
A tolerance hides a real layout change
Find and control the source of variation first. Apply per-screenshot sensitivity sparingly, only where the region legitimately varies, and do not use a broad threshold as a substitute for stable test conditions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a screenshot rather than a Playwright-based visual regression suite, ScreenshotNeo offers a one-request capture through its website screenshot API. Its API supports screenshot and PDF output; it is not a replacement for Argos’s baseline-and-diff review workflow.
See the ScreenshotNeo API documentation for request options. Example cURL request:
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots per month without a 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.
Frequently Asked Questions
Does Argos prescribe standard mobile and desktop viewport sizes?
No. Choose dimensions from your own CSS breakpoints, layout transitions, and user-critical states.
Can one screenshot prove a responsive layout works?
No. Each capture represents one set of conditions; cover the meaningful layout states and review each viewport variant.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
