October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk10 min

How to Compare Website Screenshots Before and After a Migration Automatically

Capture matching routes from the old and migrated sites under consistent browser conditions, then review screenshot diffs before updating baselines. Playwright Test includes built-in screenshot assertions; hosted review tools and screenshot APIs can support other workflows.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Use a repeatable browser test to capture the same routes before and after migration, then compare the migrated pages against reviewed screenshots from the old site. Playwright Test can do this with its built-in toHaveScreenshot() assertion: create the baseline from the old site, run the same test against the new site, and review the resulting visual differences before accepting any new baseline. Keep browser, viewport, content, and interaction state consistent; a screenshot difference shows that something changed, not whether the change is a bug.

What screenshot comparison can—and cannot—tell you

Visual comparison is useful when a migration might change layout, typography, spacing, colors, images, or the appearance of shared components. It answers a specific question: does this page render differently from the approved image under the capture conditions you chose?

As an Amazon Associate I earn from qualifying purchases.

It does not establish that the migrated site behaves correctly. A page can look identical while containing broken links, incorrect content, inaccessible controls, or failed form submission. Conversely, a changed screenshot may reflect an intentional redesign, updated content, or a harmless dynamic value. Treat diffs as review evidence and pair them with functional, link, content, and accessibility checks.

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.

The core comparison needs two corresponding things: a baseline image and a new capture of the same page or state. For a migration, that means pairing old and new URLs when paths have changed, and ensuring the captures represent equivalent content and interactions.

#1 Best Overall
Sale
TOZO A1 Wireless Earbuds Bluetooth 5.3 Light Weight in Ear Headphones
  • [Ultra-Lightweight Ear Buds Designed for Small Ears] Each earbud weighs only 3.7g and features a compact, ergonomic in-ear design made especially for small ears. Secure, low-profile, and comfortable for workouts, all-day wear or overnight sleeping.The ultra-slim profile sits flush in your ear with no hard edges poking or rubbing, so you can even sleep on your side without discomfort.
  • [Immersive Stereo Sound with TOZO OrigX Technology] TOZO OrigX tuning delivers clear vocals, balanced mids, and natural stereo sound for music, podcasts, and videos.
  • [Long Battery Life for Daily Use] Get up to 7 hours of playtime on a single charge, with up to 32 hours total using the charging case—ideal for workdays, commuting, and extended listening sessions.
  • [Bluetooth 5.3 & Stable Connection] Bluetooth 5.3 provides fast pairing, stable wireless performance, and reduced dropouts as you move around home or office.
  • [Deep Bass with Clear Vocals] High-performance drivers produce punchy bass while keeping vocals clean and detailed for everyday listening.

Build a migration comparison workflow

1. Choose routes and states that represent the site

Start with the page templates and user journeys most likely to expose a migration problem: for example, the home page, a standard content page, a listing, a detail page, and key account or checkout states if those are in scope. Include pages with different layouts and shared site components; capturing only the home page can miss a broken template used across dozens of routes.

For each capture, record the old URL, its migrated URL, and the state to compare. If a route changed from /old-plans/ to /pricing/, keep those paths paired under one stable test name. Also decide what state the browser should show: consent accepted or not, menu open or closed, a selected tab, or a particular signed-in state. A page is comparable only when the intended state is equivalent.

  • Prioritize high-traffic pages, revenue-critical flows, and representative instances of each template.
  • Use a repeatable data set where pages depend on records, prices, or user-specific content.
  • Keep a route inventory so missing or intentionally removed pages are explicit rather than silently omitted.

2. Standardize capture conditions

Run both versions with the same browser engine and version, viewport dimensions, device scale factor, locale, timezone, color scheme, and test data. A different viewport can trigger a different responsive layout; a different locale can change text length and dates. On CI, use the same operating system and browser setup for baseline creation and comparison to reduce environment-driven variation.

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

Wait for the page to be ready for comparison, not merely for the first HTML response. That may mean waiting for a known application-ready selector, the relevant images, or a specific interaction to finish. Playwright’s screenshot assertions wait until two consecutive screenshots produce the same result before comparing against the expectation, but this does not make uncontrolled content deterministic. Ads, carousels, timestamps, rotating recommendations, animations, and live data can still produce noise.

  • Use stable fixtures or seeded data where possible.
  • Disable animation for screenshots or put the page into a known static state.
  • Hide or mask only genuinely irrelevant dynamic regions; do not mask large areas that could conceal migration defects.
  • Handle consent banners deliberately. If the comparison should show the banner, keep it visible on both sites. If testing the post-consent experience, accept consent consistently on both.

3. Capture the old site as the baseline

Use the same test definitions for the old and new sites. Generate the expected screenshots from the old site once the routes and states have been checked. Baselines should be treated as reviewed test assets: if the old site already has a defect, copying it into the baseline can make that defect look like the expected result.

Rank #2
Sale
Smart Watch for Men Women Compatible with iPhone Samsung Android Phone 1.69 inch Full Touch Screen IP68 Waterproof Bluetooh Fitness Tracker Heart Rate/Sleep Monitor (Black)
  • 【IP68 Waterproof Multifunctinal Smart Watch】Torjalph fitness activity tracker smart watch is IP68 waterproof technology ,you can wear it when swimming,handwashing,it's rain-proof which means that you perform multiple exercise modes outside without worrying about sweat or rain corroding your fitness smart watch,and this watch equipped with a 230 mAh large capacity battery magnetic charging ,and this sports activity tracker watch can be used 5-7 days If fully charged.
  • 【Larger 1.83'' Full Screen Watch & Multi-dial Selection】1.83 inch full HD color touch screen smart watch for men / women provides excellent 240*284 resolution image quality ,This Bluetooth smart watch offers a better touch experience and remarkable immersion and ,more than 200 watch faces for you to choose from App"Da Fit ", you can change the dial style according to your mood to wear keeping the world on your wrist
  • 【Accurate Activity Tracker Smart Watch 】sports watch activity tracker uses sweat and dust resistant breathable silicone strap, our Fitness Tracker Smart Watch for Android iOS Phones supports 12 sports modes,walking,running,bicycle,swimming,badminton,basketball,football,rope skipping. This bluetooth calls smart watch for men women is lightweight and stylish, bringing more convenient and relaxing sports experience while also providing more protection.
  • 【Your 24 Hour Personal Daily Health Monitor】Fitness watch for women men full touch screen IP67 waterproof bluetooth smartwatch for Android iOS Phones with heart rate blood pressure monitor multifunction Andriod smart watch with steps counter sleep monitor sports fitness watch, monitoring blood oxygen saturation allows you to understand your physical condition in real time to track fitness progress ,to know your health status in time.
  • 【More Functions Bluetooth Call Smart Watch】This fitness activity smart watch full screen for iPhone and Android phones includes a bunch of new features including:The bluetooth smart watch can hang up the phone, receive and display WhatsAPP /Text /Facebook /Twitter /Messenger reminder.Support sedentary reminder, alarm clock, stopwatch, timer,weather information,music control, remote camera control compatible with Android 5.0 and above or iOS 9.0 and above smartphones.

4. Run the identical tests against the migrated site

Point the tests at the new site while retaining the same test names, route identifiers, browser project, and capture settings. The migrated captures are compared with the old-site baseline. A test report can then show which pages match and which contain visual changes.

5. Review diffs before accepting them

Inspect changed regions in context. Determine whether each difference is an approved design or content change, an expected consequence of the migration, or a regression that needs fixing. For instance, a new logo may be intentional while a navigation bar wrapping onto a second line may not be. Do not approve an entire batch just to clear a failing run.

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

6. Update baselines only after approval

When a changed appearance is expected and verified, update the baseline so future runs compare against the accepted version. If the difference is unexplained, keep the old baseline and investigate. This separation between detecting change and approving change prevents an automated test from turning every new rendering into an unquestioned standard.

Run a local comparison with Playwright Test

Playwright Test includes screenshot assertions through expect(page).toHaveScreenshot(). These assertions are a feature of the Playwright test runner; they are not a standalone browser screenshot comparison command.

Install Playwright Test in a JavaScript or TypeScript project and install its browser binaries. The example below keeps the test name stable while allowing the old and migrated site to use different hosts and URL paths. Add representative routes to the array and preserve each route’s name between runs.

Rank #3
New Bee Guitar Cable 10ft Electric Instrument Bass AMP Cord
  • [Low Noise High Fidelity] New bee guitar cord with 22AWG oxygen-free-copper center conductors provides enhanced signal transfer, the PVC insulation material and the high-density stranded copper double shield provide noise rejection for quiet operation
  • [Ideal for Choice] New bee 1/4 straight and right angle metal connectors, ensures a secure connection in any instrument, pedal, or amp jack. L shape great fro on stage guitar stands
  • [Wide Compatible] Suitable for mixer, power amplifier, microphone, effector, decoder, equalizer, electoronic organ, electric guitar, electric bass and other electronic equipments. Widely used in the installation of smart home, karaoke speaker, professional stage audio, etc
  • [Easy Disassemble] Making incidental repairs quick and easy! Very nice, flexible cable
  • [Dont Hesite to Order] 24 hours customer services and professional technology team are standing by
import { test, expect } from '@playwright/test';

const version = process.env.SITE_VERSION ?? 'old';
const baseUrl = version === 'old'
  ? process.env.OLD_SITE_URL
  : process.env.NEW_SITE_URL;

if (!baseUrl) {
  throw new Error(`Set the URL for SITE_VERSION=${version}`);
}

const routes = [
  { name: 'home', oldPath: '/', newPath: '/' },
  { name: 'pricing', oldPath: '/old-plans/', newPath: '/pricing/' },
  { name: 'article-example', oldPath: '/guides/example/', newPath: '/guides/example/' },
];

test.use({
  viewport: { width: 1440, height: 1000 },
  deviceScaleFactor: 1,
  locale: 'en-US',
  timezoneId: 'UTC',
  colorScheme: 'light',
});

for (const route of routes) {
  test(`visual migration: ${route.name}`, async ({ page }) => {
    const path = version === 'old' ? route.oldPath : route.newPath;
    const url = new URL(path, baseUrl).toString();

    await page.goto(url, { waitUntil: 'domcontentloaded' });
    await page.locator('body').waitFor();
    await page.evaluate(() => document.fonts.ready.then(() => undefined));

    // Add a site-specific readiness check here when the app renders asynchronously.
    await expect(page).toHaveScreenshot(`${route.name}.png`, {
      fullPage: true,
      animations: 'disabled',
      caret: 'hide',
    });
  });
}

Run the test against the old site to create the initial expected screenshots, then run it against the migrated site without updating them:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
SITE_VERSION=old OLD_SITE_URL=https://old.example.com npx playwright test --update-snapshots
SITE_VERSION=new NEW_SITE_URL=https://new.example.com npx playwright test

Replace the example domains and route list with your own. On Windows shells, set environment variables using that shell’s syntax or a project environment-variable utility. Store reviewed snapshots with the test project or in the baseline system your team uses, and run comparisons in a consistent CI environment. If a test needs cookies, authentication, or an app-specific ready signal, configure those in the test rather than relying on whichever state happens to appear in a developer’s browser.

Choose screenshot scope deliberately

fullPage: true captures the full page, which is useful for long-form layouts but can make diffs harder to inspect and may interact with sticky elements or lazy loading. A viewport capture focuses on what a visitor initially sees; use it when that is the requirement. For pages with lazy-loaded content, scroll or otherwise trigger the content before capturing, or compare a defined viewport and state instead of assuming everything below the fold has loaded.

Start with the default pixel-level comparison and inspect its output. If small rendering differences create noise, adjust the assertion’s documented comparison options only after identifying the source of variation. A looser threshold can reduce sensitivity to minor pixel changes, but it can also hide real small defects. Keep any tolerance consistent across old and new captures and document why it exists.

Choose a capture and review approach

The right setup depends on where you want screenshots created and how your team reviews changes. These options serve different parts of the workflow; an image capture API does not by itself approve or interpret a visual diff.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Option What it does in this workflow Consider when
ScreenshotNeo Website screenshot API and MCP server. It captures clean images or PDFs; compare the resulting images with your chosen visual-diff process. Cookie and consent banners, newsletter popups, and chat widgets can be removed before capture, and only clean shots are billed. You need API-based captures, clean-page handling, or screenshot access for AI agents. It is a capture service, not a substitute for reviewing visual changes.
Playwright Test screenshot assertions Captures pages and compares them against expected screenshots with toHaveScreenshot(). You already use Playwright and want to start with its documented built-in assertion and test workflow.
Chromatic with Playwright Captures snapshots from Playwright tests, compares them with baselines, and provides a hosted review workflow. Chromatic describes its process as starting with a “before” image that becomes the baseline. Centralized snapshot review and team collaboration are useful. Check the service’s current terms and setup requirements before choosing it.
Percy with Playwright Provides a documented Playwright integration that sends visual results to Percy for review. You want a hosted review workflow and should verify current integration behavior, build-status handling, and service terms for your project.

There is no universal winner between the built-in test-runner approach and hosted review services. Begin with Playwright’s assertion if it fits your existing workflow; consider a hosted service when centralized review is important. Verify current plans and capabilities directly before a purchasing decision.

Rank #4
BSIMB 15.6" Digital Family Calendar & Chore Chart, No Subscription Fees
  • Digital Family Calendar: BSIMB digital calendar wall touch screen puts an end to your chaotic life. Designed for busy families, the digital calendar keeps you organised and in step with your family. Assign different colours and tasks to each family member to make family scheduling easier and more intuitive.
  • Easy Setup and Auto-Sync: Plug in, connect to WLAN and auto-syn your electric calendar in minutes. Digital wall calendar compatible with Google calendar, iCloud calendar, Outlook calendar, Cozi calendar and Yahoo calendar. Add events directly on the device or through the ecalendar app. Electronic calendar stays current whether you're at work or traveling—no manual updates needed.
  • All-In-One Home Assistant: Smart calendar builds habits and encourage independence with personalised chores. Display daily meal plan to reduce the daily ‘What's for dinner?’ stress. To-do lists keep track of everything you want. Turning chores into valuable achievements with stars and rewards, making life easier and more enjoyable.
  • Manage Anytime Anywhere: BSIMB electronic calendar for family stay connected with the powerful ecalendar app. Access and manage your digital wall calendar anytime, anywhere with free features like stars & rewards, photo screensaver, chore charts, meals plans, to-do lists etc. Electronic planner paid features like Magic Import tailor advanced tools for users with special needs.
  • Stay in Touch with Loved Ones: Share photos or videos from your phone to electronic wall calendar with app, instantly update your life moment, and keep in touch with your family, especially those who are far away; you can also surprise your smart calendar digital wall by sending him a wish card; it's also great for keeping tech-illiterate elders in touch with the youngsters.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Or skip the browser setup

ScreenshotNeo documentation covers its API and options. One GET request captures a URL; the response can be saved as an image, then used by your own baseline and diff workflow. For example, this cURL request saves a WebP capture of the migrated page:

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

The same capture request in 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)

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

Change the target URL to the page you want to capture. For a before-and-after comparison, request the corresponding old and new URLs under the same capture settings, save both responses, and pass the images to your chosen diff and review process. ScreenshotNeo’s cookie-banner handling, popup and chat-widget removal can reduce capture clutter; 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 include X-Page-Verdict and X-Billed to identify the result. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.

ScreenshotNeo offers 1,000 screenshots per month free with no card required. Paid plans start at $5 for 3,000 shots; Growth is $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, and every feature is on every plan. Sign up for 1,000 free screenshots a month with no card.

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

Troubleshoot noisy or failing comparisons

Many unrelated pixels change between runs

Check that both runs use the same browser, viewport, device scale, locale, timezone, color scheme, and content. Look for animation, live data, rotating elements, ads, and timestamps. Wait for a site-specific ready condition rather than adding an arbitrary long delay. Mask only a small, understood region if it cannot be made deterministic.

A page fails before an image can be compared

First distinguish a navigation or application failure from a visual mismatch. Confirm the URL is reachable from the test environment, authentication is valid, and the page has rendered its expected content. A blank or partially loaded screenshot should not become an approved baseline merely to make the test pass.

The migrated screenshot is compared with the wrong page

Review the route mapping and stable test names. When paths differ, select the correct old or new path for the run while keeping the route’s comparison identity unchanged. Do not rely on matching URLs if the migration intentionally changed URL structure.

Full-page screenshots show unexpected gaps or missing images

Lazy-loaded content may not appear until it approaches the viewport. Trigger the relevant scroll or interaction before capture, and wait for the required images or application state. For a page dominated by sticky or fixed elements, compare a defined viewport or test the relevant sections separately.

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

A small tolerance makes the test pass but seems to hide changes

Inspect the changed region and the comparison settings. A tolerance should address known rendering variation, not conceal unexplained differences. If the mismatch is caused by inconsistent environments, fix the environment before making the comparison less sensitive.

Baseline updates erase useful failures

Run the baseline-update command only when you intend to replace expected images. Review the diff first and update only after the appearance is approved. Keep the baseline change in the same code review as the change that explains it, so reviewers can see why the reference image moved.

Reliability, runtime, and cost decisions

Visual testing has two distinct costs: producing captures and reviewing changes. More routes, states, browsers, and viewport sizes increase the number of images and the time needed to inspect them. Begin with high-value templates and expand coverage where the migration risk justifies the extra runtime and review work.

For repeatable results, keep capture settings and browser versions pinned in CI, use stable test data, and avoid comparing screenshots produced under different environments. Run the tests as part of the same repeatable migration-check workflow rather than relying on occasional manual captures. If hosted review is part of the process, verify current plan limits and service behavior directly; the documented workflows alone do not establish current pricing or a universal accuracy rate.

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

API capture can separate browser setup from your own automation, but it does not remove the need to choose routes, keep old and new capture conditions comparable, interpret diffs, or approve baselines. With either approach, successful capture is not proof of a successful migration: retain separate checks for behavior, links, content, and accessibility.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

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

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
Windows Errors? Fix Them Before They SpreadFree repair scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.