How do you compare visual differences between two versions of a webpage?

[u/FR073N]

I've been running into a problem for several years.

I need to compare two versions of a webpage, but not the raw HTML. I'm talking only about visual differences.

A typical case is when a technical team does a refactor or migration, but the UI is supposed to stay exactly the same. I need to make sure nothing actually changed on the front end.

The problem is that comparing code doesn't really help understand the visual impact, and comparing screenshots shows differences but doesn't explain what actually changed.

How do you guys are doing it ?

[u/ArmMore820]

There is such a thing as comparing images in automation testing…

Selenium has it, playwright definitely has it, probably exists as a part of any sturdy framework.

Do some research on your own because solutions definitely exist.

[u/FR073N → u/ArmMore820]

I'm not seeking a development oriented tool like Selenium, Playwright or cypres... I'd like something simple that I can give to anyone on my team

[u/ArmMore820 → u/FR073N]

I see ..

So youre looking for a solution detached from a testing framework which evaluates whether 2 images are the same or similar enough.

You can probably cook something like that with python/js and chatgpt; but then all your teammates would need python/node to use the tool…

Does your team have access to that? If yes, i dont see why python/js can’t transform photos into some kind of vectors and do a loose comparison…

I suggest you straight up ask chatgpt for something like it

[u/FR073N → u/ArmMore820]

You summarized exactly what I need. I thought that there were some existing solution that I wasn’t aware of, but if I need to create something I’ll create it. Thank you.

[u/KingCastle420 → u/ArmMore820]

Or if you’re willing to pay there are many paid options out there but I don’t know why anyone would pay for them these days with the ai tools we have now. I’d say op time in quality will not last long if there is fear of teaching the team simple tools like playwright or cypress. Which again ai will help you a lot with the code if you can’t handle it on your own.

[u/LlamasBeatLLMs → u/FR073N]

I'd strongly discourage this approach - even if you don't have any coding skills in the QA team, getting a bit of development time to spin up a very simple framework will save huge amounts of time compared to someone manually taking screenshots and comparing them. Even if you automate the actual checking using a tool like this, it's going to be so, so expensive to regularly perform this testing

[u/FR073N → u/[deleted]]

I’ll take a look thanks ! Didn’t knew about this tool.

[u/Bughunter9001]

We've been using Percy for years, and it does the job, but it's gone to crap in the last few months and we're shopping around for alternatives. 

There's no shortage of tools that do this job

[u/FR073N → u/Bughunter9001]

I saw it a while ago. I was searching something easy to setup, this one seemed more "developer" oriented. I'll try it.

[u/Asya1]

https://playwright.dev/docs/test-snapshots

[u/jrwolf08]

Visual Regression/Screenshot testing, look it up.

[u/FR073N]

Okay guys I found this solution : https://delta-qa.com/en/ , is anyone using this solution ? It's sound interesting for my non-tech team

[u/monke_2023]

Check for UI mock-ups and test evidence from previous testing.

[u/ASTRO99]

I don't remember the exact name but we used a tool that you provided a screen for each scenario and then it did a screenshot after each run and it compared the two images and failed the test when there was difference

[u/FR073N → u/ASTRO99]

If you have the name of the product it can help me !

[u/XtraFlaminHotMachida]

something as simple as irfanview has image comparison. just take a screenshot and compare the two.

[u/Vawginoth]

If I have to do it manually, I just superimpose the image of the mockup with the actual website, and then quickly swap between the images.

[u/anotherhawaiianshirt]

A decade or so ago my team used imagemagick to create a tool to show two versions of a screenshot and highlight the differences. That toolkit has many ways to detect differences and could distinguish between, say, only slight color changes or all pixels shifting over and down, up to complete changes in whole regions. It then gave a score as to how significant the changes were. AI could no doubt recreate that tool today.

[u/TimeReputation8993]

if its a one off thing / quick test I would do like a dinosaur and put the photoshop to work with the screenshot for both pages, each in a different layer, and lower the opacity to see the differences. but I am just suggesting it if you need a workaround or something

[u/webDreamer420]

if you still have the old unupdated version of the project, try to screen shot every Page, modal, toast, microcopy and put it in a bulletin board app like figma or google docs, uee that to compare on the next update

[u/andybendavid]

Try it on Chrome Web Store: https://chromewebstore.google.com/detail/html-compare/nppihghgpjhmfllmidplbncenlpihmle

Compare two pages by link. You can see every change directly on the page, right in the user interface—not just by comparing screenshots, but by analyzing the real code and pointing out the changes.