Use Case

Website Migration Visual Validation

Validate website migrations visually. Compare old and new sites page-by-page to catch issues before going live.

Overview

Website migrations—platform changes, redesigns, CMS updates—are high-risk projects. Visual comparison between old and new sites catches layout issues, missing content, broken images, and styling problems that automated tests miss.

Screenshotly captures pages from both the old and new sites, enabling page-by-page visual comparison. This catches issues like missing sections, altered font rendering, broken responsive layouts, and shifted elements that functional tests overlook.

Project managers use visual comparisons to validate migration completeness. QA teams automate pre-launch checks across hundreds of pages. Stakeholders review side-by-side comparisons for sign-off before cutover.

Key Benefits

Page-by-page visual comparison
Catch layout and styling issues
Validate content migration completeness
Stakeholder sign-off documentation

Results You Can Expect

Page-by-page
visual comparison
Automated
migration validation
Comprehensive
multi-device checks

How It Works

1

Map URLs between old and new sites

2

Capture all pages from both sites

3

Generate visual comparison reports

4

Identify differences above threshold

5

Review and approve before cutover

Code Example

// Compare old and new site during migration
const validateMigration = async (urlMap) => {
  const results = [];

  for (const { oldUrl, newUrl, pageName } of urlMap) {
    const [oldScreenshot, newScreenshot] = await Promise.all([
      fetch('https://api.screenshotly.app/screenshot', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ url: oldUrl, device: 'desktop', format: 'png' }),
      }),
      fetch('https://api.screenshotly.app/screenshot', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ url: newUrl, device: 'desktop', format: 'png' }),
      }),
    ]);

    results.push({ pageName, oldScreenshot, newScreenshot });
  }

  return results;
};

Frequently Asked Questions

How many pages should I compare during migration?

Capture all unique templates and high-traffic pages. For large sites, prioritize the homepage, key landing pages, product pages, and content pages. Aim for 100% template coverage.

Can I automate pre-launch migration checks?

Yes! Run migration comparison in your CI/CD pipeline. Block deployment if visual differences exceed your configured threshold, ensuring quality before going live.

What level of visual difference should trigger a flag?

A 1-2% pixel difference threshold catches real layout issues while ignoring minor rendering variations. Adjust based on your tolerance — tighter for brand-critical pages, looser for content-heavy pages with dynamic elements.

Should I compare on multiple devices?

Yes. Capture desktop (1920x1080), tablet (768x1024), and mobile (375x812) viewports for each page. Responsive layout bugs often appear only at specific breakpoints and would be missed with a single viewport.

Want a step-by-step walkthrough?

Read: Website Archival & Compliance Guide

Ready to automate migration?

Get started with 100 free screenshots. No credit card required.

Related Use Cases