Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

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

Run visual regression in GitLab by building the Vite app, serving the production build at a predictable URL, and executing Playwright inside the pinned mcr.microsoft.com/playwright:v1.64.0-noble image. Fix the browser, viewport, fonts, locale, timezone, data, and motion settings; commit approved snapshots; and always upload the report, failed screenshots, diffs, baselines, and traces as GitLab artifacts. The configuration below gives you a reproducible pipeline and shows exactly where failures appear.

Use a fixed pipeline shape

A reliable visual job has four boundaries:

  1. Build: install the lockfile-defined dependencies and run the Vite production build.
  2. Serve: expose that build on a stable local address such as http://127.0.0.1:4173.
  3. Capture: run Playwright with a pinned browser image and deterministic settings.
  4. Review: keep the expected image, actual image, pixel diff, HTML report, trace, and JUnit result available after the job succeeds or fails.

Do not use the Vite development server for the baseline unless that is what you deploy. The production preview exercises the built assets, routing behavior, and CSS that users will receive.

Prerequisites

  • A Vite application with a committed package-lock.json (or the lockfile used by your package manager).
  • Playwright Test installed as a development dependency.
  • A test directory, for example tests/visual.spec.ts.
  • A GitLab runner able to start the public Playwright Docker image.
  • One approved baseline per test, browser project, and viewport.

Install Playwright in the project if it is not present:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
npm install --save-dev @playwright/test
npx playwright install

The CI container already contains the browser binaries and system libraries. Generate or update baselines in that same container image, rather than on a laptop with a different operating system, font set, or browser build.

#1 Best Overall
Sale
Compressed Air Duster,130000RPM Super Power Cordless Air Duster,Rechargeable Brushless Blower,3 Gear Adjustable Blower with LED Light,Dust Remover for Computer/House/Outdoor/Car
  • Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
  • With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
  • Wide Application: attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
  • Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
  • Economical &Reusable: Built durable materials with a long-lasting battery,our CAGIWIRU air duster it's a sustainable alternative to disposable air cans.

Build and expose the Vite app

Vite’s preview server is a convenient way to serve the compiled output. Add a script if your project does not already have one:

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

Playwright can start the server for every test run. This keeps the server lifecycle inside the test process and avoids races between a background shell command and the browser.

Health URL and host binding

Bind the preview server to an address the browser can reach inside the container. Use --host 0.0.0.0 for the server command, while Playwright connects to 127.0.0.1. The url setting makes Playwright wait until the server responds before opening a page.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Configure Playwright for deterministic screenshots

Create playwright.config.ts with one browser project first. Adding Chromium, Firefox, and WebKit simultaneously multiplies baseline files and increases the number of intentional rendering differences you must review. Add more projects only when cross-browser coverage is a requirement.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30_000,
  expect: {
    timeout: 5_000,
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 1 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['list'],
    ['junit', { outputFile: 'test-results/junit.xml' }],
    ['html', { outputFolder: 'playwright-report', open: 'never' }],
  ],
  snapshotPathTemplate:
    '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
  use: {
    baseURL: 'http://127.0.0.1:4173',
    viewport: { width: 1440, height: 900 },
    deviceScaleFactor: 1,
    locale: 'en-US',
    timezoneId: 'UTC',
    colorScheme: 'light',
    reducedMotion: 'reduce',
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
  ],
  webServer: {
    command: 'npm run preview -- --host 0.0.0.0',
    url: 'http://127.0.0.1:4173',
    timeout: 120_000,
    reuseExistingServer: !process.env.CI,
  },
});

snapshotPathTemplate keeps snapshots under a predictable directory and separates projects. A change from one browser project cannot silently overwrite another project’s baseline. The fixed viewport and device scale factor make the raster dimensions stable; locale, timezone, color scheme, and reduced-motion settings remove common sources of text and layout drift.

Write a visual test and create the first baseline

Navigate using the configured baseURL, wait for fonts, and disable animation during the assertion. The first run creates a candidate image; review it and commit it only when it represents the intended UI.

import { test, expect } from '@playwright/test';

test('home page matches the visual baseline', async ({ page }) => {
  await page.goto('/');
  await page.evaluate(() => document.fonts.ready);
  await expect(page).toHaveScreenshot('home.png', {
    animations: 'disabled',
    caret: 'hide',
    scale: 'css',
  });
});

Generate a baseline locally in the pinned container or in CI with an explicitly approved update job:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
npx playwright test --update-snapshots

Do not put --update-snapshots in the normal merge-request job. A failed assertion should produce evidence for review, not rewrite the expected image. Treat a baseline update like a source-code change: inspect the diff, explain why it is intentional, and have it reviewed.

Control dynamic regions

Pixel comparison is meaningful only when the input is stable. Seed fixtures and mock values that would otherwise change on every run. For a timestamp, random identifier, advertisement, or external API response, replace it with a fixed test value. If a region is intentionally variable, mask it explicitly:

await expect(page).toHaveScreenshot('dashboard.png', {
  animations: 'disabled',
  mask: [page.locator('[data-testid="current-time"]')],
});

Masking should be narrow. Hiding an entire page can make a test green while the important UI is broken.

Rank #2
EVEO® Screen Cleaner Spray Kit (Streak-Free) TV Screen Cleaner for Smart TV, Lcd, LEd, Oled | Computer Screen Cleaner Spray and Wipe Microfiber Cloth - TV, Monitor, Laptop, iPad, Car - 6.7oz 1 Pack
  • Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
  • Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
  • Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
  • Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
  • Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth

GitLab CI job

Use the official Playwright image and the same dependency-install and test commands shown in Playwright’s GitLab guidance. This example stores every diagnostic output for 14 days and publishes JUnit results to the merge request pipeline.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
stages: [visual]

visual_regression:
  stage: visual
  image: mcr.microsoft.com/playwright:v1.64.0-noble
  variables:
    CI: "true"
  script:
    - npm ci
    - npm run build
    - npx playwright test
  artifacts:
    when: always
    expire_in: 14 days
    paths:
      - playwright-report/
      - test-results/
      - tests/**/*.png
    reports:
      junit: test-results/junit.xml

artifacts:when: always is essential. Without it, a failed visual assertion can prevent the very screenshots needed to diagnose the failure from being uploaded. The paths include the HTML report, traces and failure output in test-results, and committed or generated PNG files under tests.

What the job does, in order

  1. npm ci installs exactly what the lockfile specifies. It also avoids a developer’s uncommitted dependency changes becoming a baseline change.
  2. npm run build generates the production assets.
  3. The webServer block in the Playwright configuration starts vite preview, waits for the configured URL, and stops the process after the tests.
  4. npx playwright test launches Chromium, compares each page with its expected image, and writes reports and failure artifacts.
  5. GitLab uploads artifacts even when the assertion fails and parses the JUnit XML as a test report.

Find failed screenshots and diffs in GitLab

After a pipeline finishes, open the visual_regression job and its Artifacts section. Browse or download:

  • playwright-report/ for Playwright’s interactive HTML report.
  • test-results/ for actual screenshots, expected images, pixel diffs, traces, videos, and junit.xml.
  • tests/**/*.png for PNG files that are part of the repository or generated during the run.

GitLab’s JUnit report parser requires a file path under artifacts:reports:junit; uploading a directory alone does not create a test summary. The path in this example is relative to the repository root, which is also $CI_PROJECT_DIR inside the job.

Attach a screenshot to a failed test

GitLab can show an image in the failed-test details dialog when the JUnit testcase includes a system-out value in this form:

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<system-out>[[ATTACHMENT|test-results/home-failure.png]]</system-out>

The attachment path must be relative to $CI_PROJECT_DIR, and the same file must be present in artifacts:paths. A custom reporter or post-processing step can add that element to the JUnit XML after Playwright has written the failure image. Keep the original report and image in the artifacts even when an attachment is added; the HTML report and trace contain context that a single image cannot.

Artifact retention

Choose expire_in to cover the review window. Fourteen days is a practical starting point for merge-request investigation, but longer retention consumes more artifact storage. GitLab notes that once report artifacts expire, the Test summary can become empty even though the job itself remains visible.

Make rendering deterministic

Most apparent flakes are environment changes, not random Playwright behavior. Apply the following controls before loosening thresholds.

Fonts

Use the same browser image for baseline generation and CI. Wait for document.fonts.ready before the screenshot. If your application downloads fonts, ensure the test environment can reach them or package them with the app; a fallback font changes line wrapping, element heights, and every pixel below the changed line.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Viewport and device scale

Set width, height, and device scale factor explicitly. A different viewport can activate a responsive breakpoint, while a different scale factor changes raster dimensions and anti-aliasing. Do not rely on a runner’s default window size.

Rank #3
Sale
BladeHawks RGB Gaming Mouse Pad Extra Large Extended 31.5x12 Inch-Black | LED mouse pad with 14 lighting modes, covers keyboard & mouse, anti-slip rubber base, waterproof surface, USB powered
  • 【Large size】:Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
  • 【LED backlight mouse pad】:Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
  • 【Anti-slip rubber base】:Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
  • 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
  • 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.

Locale, timezone, and color scheme

Dates, decimal separators, translated strings, and dark-mode CSS can all change the image. Set locale, timezoneId, and colorScheme in the Playwright use block. If a test intentionally covers another locale or theme, make it a separate named project with its own snapshots.

Motion and asynchronous data

Disable CSS transitions and animations for screenshot assertions and wait for the application to reach an observable ready state. A fixed delay is less reliable than waiting for a selector that proves data has loaded. Mock network calls and volatile APIs with seeded fixtures so the same records appear on every run.

Browser and operating-system packages

The pinned Playwright container supplies a consistent browser and OS-library combination. Updating the image tag can legitimately change text rasterization or layout. Make such an update a deliberate baseline review, not an incidental change to the CI configuration.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Review and update snapshots safely

  1. Read the failed test name and open the HTML report.
  2. Compare the expected, actual, and diff images. Check the trace for navigation, network, and console failures.
  3. Decide whether the change is an intended UI update, a test-data change, or an environment problem.
  4. For an intended UI change, regenerate snapshots in the pinned image with npx playwright test --update-snapshots.
  5. Commit only the reviewed snapshot files and the test or application change that explains them.

Never approve a blanket snapshot refresh merely because many tests failed. A font or viewport regression can produce hundreds of diffs; updating all of them would hide the root cause.

Scale the suite with GitLab sharding

As the number of pages grows, split the suite across identical jobs. GitLab can create parallel jobs, and Playwright accepts a shard in the form --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL.

visual_regression:
  stage: visual
  image: mcr.microsoft.com/playwright:v1.64.0-noble
  parallel: 4
  variables:
    CI: "true"
  script:
    - npm ci
    - npm run build
    - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
  artifacts:
    when: always
    expire_in: 14 days
    paths:
      - playwright-report/
      - test-results/
      - tests/**/*.png
    reports:
      junit: test-results/junit.xml

Sharding shortens wall-clock time, but it also creates four artifact sets and four JUnit files. Use distinct artifact names or a downstream collection step if your review process needs one combined report. Keep every shard on the same image and dependency lockfile; otherwise a rendering difference can be mistaken for a shard-specific failure.

For larger matrices, combine browser projects and shard values with GitLab’s parallel:matrix. Each browser project needs its own baseline directory, and the storage and review workload grow with every additional combination.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Troubleshoot common failures

The browser cannot connect to the app

Symptom: navigation times out or the job reports that the web server never became ready.

Cause and fix: confirm that the preview command is present, that npm run build completed, and that the server binds to 0.0.0.0. Make the webServer.url match the port Vite actually uses. If startup is slow, increase webServer.timeout rather than adding an arbitrary sleep.

Every screenshot differs after a dependency or image update

Symptom: text edges, line breaks, or colors change across many unrelated pages.

Rank #4
Sale
Vaydeer Wrist Rest for Keyboard and Mouse, Computer Ergonomic Wrist Support Pad, Soft Memory Foam Arm Cushion for Desk, Palm Hand Office Laptop Typing
  • 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
  • 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
  • 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
  • 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
  • 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.

Cause and fix: check the Playwright image tag, browser version, OS libraries, fonts, and lockfile. Restore the previous image to confirm the cause, then update baselines deliberately if the new environment is the intended standard.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Only pages with text are flaky

Symptom: layout shifts while fonts load or failures disappear on a second run.

Cause and fix: wait for document.fonts.ready, package or mock remote fonts, and confirm that the font request succeeds in the trace. A screenshot taken before the web font is applied is not a valid baseline.

Animations produce intermittent diffs

Symptom: a component is captured at a different animation frame on each run.

Cause and fix: pass animations: 'disabled' to toHaveScreenshot, set reducedMotion: 'reduce', and remove timer-driven transitions from the test fixture. Wait for the final state rather than sleeping for a guessed duration.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Dates, prices, or translated labels change

Symptom: only formatted values differ between runners.

Cause and fix: set the locale and timezone, freeze or mock the clock where appropriate, and use deterministic fixture data. Verify that the same language resources are loaded in the container.

The JUnit report is empty

Symptom: GitLab shows no tests even though Playwright printed failures.

Cause and fix: verify that the JUnit reporter writes test-results/junit.xml, that the path under artifacts:reports:junit is exact, and that the file is produced before the job exits. Upload the directory under artifacts:paths so you can inspect the XML directly.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Images are missing after a failure

Symptom: the job is red but the Artifacts page has no actual or diff files.

Best Value
Sale
Under Desk Cable Management Tray No Drill, Metal Mesh Cable Management Under Desk with Clamp Mount, 2 Hole Cable Tray with Wire Management and Cord Organizer for Home Office Standing Desk
  • 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
  • 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
  • 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
  • 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
  • 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.

Cause and fix: set artifacts:when: always and include the directory where Playwright writes failure output. Check that a cleanup command is not deleting test-results before artifact collection.

A baseline update hides a real regression

Symptom: a broad update makes the pipeline green without a meaningful review.

Cause and fix: remove automatic --update-snapshots from merge-request jobs. Update only the named tests after inspecting expected, actual, and diff images, and require the change to be reviewed with the application code.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Performance, reliability, and storage decisions

Keep the first project small

One pinned browser, one viewport, and focused page or component states provide a useful signal with manageable review cost. Add a second viewport when responsive behavior is part of the risk, and add other browser engines when compatibility—not merely extra confidence—is the requirement.

Use parallelism after stabilizing tests

Sharding reduces elapsed CI time but does not fix flaky tests. Stabilize fonts, data, network waits, and animation first; otherwise parallel jobs make diagnosis harder and multiply artifacts.

Balance artifact retention against storage

HTML reports and traces are valuable during review but can be large. Keep them for the period in which merge requests are actively investigated, and retain longer only when your release process needs historical evidence. The 14-day value in the example is a policy choice, not a GitLab requirement.

Compare implementations on the right axes

  • Rendering determinism: can the same code produce the same pixels in every job?
  • Browser coverage: do the projects represent the browsers your users require?
  • Baseline review: can reviewers see expected, actual, and diff images without downloading everything?
  • Artifact retention: will reports remain available for the review window?
  • CI duration: does sharding reduce elapsed time enough to justify extra jobs?
  • Reproduction: can a developer rerun the failure in the identical container locally or in a debugging job?

Or skip the browser setup

If you need a clean capture of a reachable URL rather than a repository-controlled Playwright baseline, ScreenshotNeo is the first API alternative to try: it removes consent banners, popups, and chat widgets before capture, bills only clean shots, and has the lowest paid plan listed here. Its API and options are documented at screenshotneo.com/docs/.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A single GET request returns PNG, JPEG, WebP, or a PDF. Replace the example URL with the public Vite preview or deployed route you want to capture.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

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}`);

ScreenshotNeo supports full-page and element captures, dark mode, device presets or custom viewports, retina scale, PDF paper settings, custom CSS and JavaScript, selector waits, delays or network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, configurable caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Its parameter names are compatible with those used by many screenshot APIs, which can simplify a migration.

Before capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

Every feature is available on every plan: 1,000 shots per month are free with no card; Starter is $5 for 3,000 shots, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000. Yearly billing gives two months free. Create a free ScreenshotNeo account to use the 1,000 monthly shots without a card.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Frequently Asked Questions

Does visual regression replace functional end-to-end tests?

No. A screenshot assertion detects rendered-pixel changes; it does not prove that navigation, keyboard interaction, form validation, or accessibility behavior still works. Keep functional assertions alongside visual checks.

Can I approve a baseline from a developer laptop?

Only when the laptop reproduces the pinned CI browser, operating-system libraries, fonts, viewport, locale, timezone, and test data. Otherwise generate the candidate in the CI container and review that image.

Why do a few anti-aliased pixels differ after an intentional change?

Rasterization can change with browser, font, device-scale, or OS-library versions. First verify those inputs are identical; if they are and the visual change is intended, review and commit the new baseline rather than masking the whole region.

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.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.