Comparador – Spot the Difference: Surviving AEM Migrations & Deployments Without Going Blind
Tired of squinting at two browser tabs, praying that your AEM 6.5 to Cloud Service / EDS migration didn't break the global footer? We’ve all been there—relying on "eyeballing it" as a primary QA strategy for multi-thousand-page replatforms.
This session introduces Comparador, a freeware Chrome extension designed to make visual regression testing as easy as clicking a button. We will walk through real-world "war stories" of migrations to AEM as a Cloud Service and Edge Delivery Services (EDS), showing how to catch subtle CSS shifts and broken components before your client does.
Whether you are running bulk content updates via Groovy scripts or moving to a document-based authoring world, learn how to automate your visual (and more!) sanity checks without the overhead of heavy CI/CD infrastructure. Expect a demo-heavy, zero-fluff guide to keeping your AEM sites pixel-perfect.
Michael
I actually have a very good experience with Playwright. Screenshot comparison works exceptionally well when using Docker (avoids platform-specific artifacts). It can be run server side (e.g. integrated in a CI/CD pipeline on a PR) and since it is popular, LLMs are very good at generating test cases. How are you going to compete with that?
Tomasz
Playwright indeed is good at screenshots. Fully agree. Comparador brings much more though - it's not only about visual comparison, but also html, console, performance. Secondly it gives you a easy way to structure everything, keep it tidy, plus plot it over time. You can quickly compare between any env, today to yesterday etc. Playwright gives you building blocks for some things l, Comparador gives you a complete package. We use PW a lot in projects where we also use Comparador, but for different use-cases.
Gatar
How does Comparador integrate with AI to manage and configure its settings? Do you have some predefined skills?
Tomasz
I recommend using the sync to local drive feature for configs (and storing them in git repo). You can then easily vibe code the configs (since the config is an easily readable json5). I work with it that way and it works seamlessly. Thanks to sync feature Comparador picks up the config changes from the local drive on the go
Constantin Ioan-Mihai
Can the extension see the JS or CSS code differences besides the HTML ones?
Krystian Panek
It's planned as a complete HAR gathering and comparing feature. I'm pretty sure that it will land in Comparador next months.
Konrad Windszus
Do you consider making Comparador fully open-source hosted at GitHub? https://github.com/wttech/comparador only contains Mock server and docs...
Krystian Panek
Yes, Comparador is quite fresh. We haven't such discussion yet simply saying. Raise an issue on GitHub and let's see if people want to contribute.
Tad Reeves
Did you find this useful as well for migrations where there are KNOWN differences that you always want to ignore? Like "yes, I know the main nav & footer are different, check everything else pls"
Krystian Panek
Tool has built-in help and is extremely configurable/scriptable - just install and review help section about automatization.
Krystian Panek
You could remove anything from DOM, replace, mask... Do anything 😉 normalization before capture - page script. Normalization after capture - compare script.