Picturing how a code diff will affect your site is almost impossible. We built Diffd to make it easier to see layout bugs before you push new versions of your website. It finds and highlights visual differences between your staging and production environments on a variety of devices so you can fix bugs before you release.
@mchlstwrt great work, love the simplicity of zero configuration, multiple browsers and sizes!
What sorts of bugs have been found so far using this platform?
What sorts of false-negatives were tough to work around early on?
@bcjordan Thanks Brian!
We've found a bunch of bugs so far just using it on our own site. An example is a button that doesn't contain its text at a certain screen size:
@bcjordan As far as the first false difference go we've worked through a few so far. The first type we had to address was that when the size of one section changes everything below it seems different if you just do a simple pixel difference.
There are also a number of tricky false differences that are caused by dynamic aspects of a page such as a gif or auto playing video. The before and after screenshots don't always match up exactly so it often indicates that something has changed. We're working on a way to allow you to mark these areas as not actually different so we can learn that and stop including them in the diff.
@mchlstwrt very nice, it's certainly not an easy tool to build! Last year my brother and I made a simple list of URLs -> screenshots in email diff alarm tool for the YC hackathon. Who knew sub-pixel font differences between exact same content screenshots could cause diffs!
For handling varying / random areas like videos, I would recommend taking a look at how Applitools handles marking and expecting a certain visual to display on page but anywhere within a certain area. Updating those areas when the top part of the page changes, though, can become tedious.
@mchlstwrt have definitely found ROI for this type of testing can be huge—early this year I started using Eyes (a visual diff/alert service from Applitools that hooks in to Selenium / automated tests) and have been amazed at the sorts of things that pop up—once it caught an inadvertent style change in line-height on nearly all pages, losing precious centimeters of vertical space. May have never caught that otherwise 😦
One slightly painful part in practice is updating baselines and marked areas as the page layout changes, especially as you build up hundreds of assertions—innovation in mass update operations could make a big difference here. 💪👍
Report
Hunter
Diffd compares your new website changes with your existing site visually. See the difference between two versions and find bugs before you push code live.
"Stop staring at code diffs" - I can't quite tell from your demo if you also show code changes or not.
If not, it would be great if the visual changes you highlight in red or green were also highlighted in the code at the same time.
Can't believe this hasn't been done already - great idea guys.
@forresttooker We're currently planning on implementing a process that would go something like this:
- You enter the login page URL
- You enter the username and password of a testing account (which is stored on our servers)
- Our servers make a login request to that URL at the start of each diff. All of the cookies that are returned with that login request are then used for subsequent requests.
Diffd
Gift Genie AI
Diffd
Diffd
Gift Genie AI
Gift Genie AI
Diffd
Coworker Coffee
Realm
Bounce Bar
Diffd
Bounce Bar
Diffd