I've recently made several changes to a landing page, and some of them ended up being questionable. I'd like an easier way to review different versions of the page visually instead of repeatedly switching Git branches, rebuilding the project, and clicking through each version manually.
Ideally, I want to open two versions side by side with synchronized scrolling, including local development builds and older production versions that are no longer publicly available. A useful solution would also capture the surrounding application state, such as a local database, and optionally mock HTTP requests and responses so the saved version remains interactive rather than becoming a dead screenshot.
The project runs locally with Docker, including the application and database. I'm looking for an open-source tool or workflow that can create reproducible snapshots of local versions and make them easy to compare. What approaches have worked for this kind of visual and functional comparison?
4 Answers
For a quick one-off comparison, a browser extension that captures complete pages can be paired with an image comparison tool. That’s easy for static pages and archived versions, but it won’t preserve application behavior. For interactive comparisons, browser automation plus mocked API responses is a better long-term solution. A screenshot similarity score can also help flag pages that need manual review, though visual diffs are still useful for understanding exactly what changed.
A practical setup is to run both revisions in separate containers, each with its own application and database instance. Then use Playwright to exercise the same flows against both versions and compare screenshots or page output. If you want both views in one browser window, load the two applications in separate iframes and synchronize their scrolling with a small wrapper page. It takes some infrastructure work, but it handles old versions and local-only builds reliably.
If you mainly need visual regression testing rather than a live side-by-side browser, capture screenshots with Playwright and commit them as test artifacts. Image-diff tools can highlight changed regions, and systems built around component visual testing can manage larger screenshot collections. This works especially well when the same viewport, fonts, data fixtures, and browser version are used for every capture.
Playwright is probably the best foundation. You can start each version locally, automate the same navigation and interactions, capture full-page or element screenshots, and compare the results. It also supports mocking network requests, so the pages can behave consistently even when the original backend is unavailable. For a more complete workflow, save the screenshots and test data with the project so comparisons are reproducible.
That makes sense for the application containers, although duplicating a large development database and wiring the services together is the part I was hoping to avoid. I’m looking for a workflow that makes that setup as automatic as possible.