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
Results You Can Expect
How It Works
Map URLs between old and new sites
Capture all pages from both sites
Generate visual comparison reports
Identify differences above threshold
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
Testing
Integrate visual testing into your CI/CD pipeline. Capture screenshots for regression testing and visual diff comparisons.
Bug Tracking
Capture visual bugs with context-rich screenshots for developers. Attach screenshots to bug reports automatically.
Accessibility
Capture and document accessibility states across your website. Build visual evidence for WCAG compliance reviews.