Diffy Best Practices - How to improve your diff reviews?

In this episode of Diffy Best Practices, we are going to explore the options of how to improve your workflow while checking the diffs. In the example below, we guide you through the user interface of diffs, explaining where to find our newly developed tools and how to get the most out of them!

 

First and foremost, when Diffy finished its work, you'll see that the Diff itself is marked as 'Needs review' (and in case there are set up notifications, you can be automatically notified about it, see its details, and how to set them up in our documentation!)

From here you can edit the title of the Diff, if you don't need it you might want to delete it or in the compressed format, you can also download its results. But now our focus goes into the user interface of a Diff and what you're supposed to do there to consider reviewing a Diff done by marking the changes either bugs or false positive (OK).

 

We developed some extra features here that are about to help reduce the time spent on such reviews and get the most out of our platform!

 

When you visit the page of a Diff, you see based on breakpoints all the pages that have changed between the two sets of snapshots (like in our case between a production and a staging environment). From this page you also can share the diff, when you click on 'Share diff' at the top right corner, it will generate a sharable link and copy it to your clipboard - as of this moment, in any other programs such as your e-mail client or chat software, you can just simply paste the link and send it to your co-workers. Don't forget that they have to have access to the project - if they don't, you can invite them into your team!

You can further filter during your review process which pages you want to see by clicking on the 'Not finished review' or on 'Only with bugs' links at the top of a Diff main page. You will always see here a fix value stating how many pages have changes and you can get back to seeing all screenshots by clicking on the first link 'View all screenshots'.

 

Let's check a page on 1200px breakpoint and start reviewing the marked changes.

 

It seems that this change is just a false positive issue, meaning that this change is actually not a bug, but for some rendering problems caused this area to look slightly different in the two environments. When you know your websites, you can easily identify such issues and just simply mark them OK. In order to help you make such decisions, at the right part of this page, there is a live area where you can toggle between the two environments which are overlapped visually, see, review and confirm that actual change on your own.

On the left side of this page, when you click on the area marked red, you have a popup window where you can get some details about the change and make your decision in terms of calling it a bug or just simply considering it OK. One of our new features can be found here where we in the background make algorithmic comparisons across your whole Diff and potentially find similar areas on other pages and want to help you mark all of them at once as a bug or OK.

In order to mark similar pages, you can click on the '2 pages' link which will then list below all pages (making the current one bold) and allowing you to visit the other ones too. 

 

When you accept our prediction about similar pages having the same change and want to mark all of them (imagine if there are tens of hundreds of pages, it becomes very beneficial!), you can just tick the checkbox 'Mark them all the same' and then choose it to be OK (as we see it below).

 

The main benefit of using Diffy as a visual regression tool is to actually find real bugs introduced by updates on the site!

As we see below, we actually found here one.

Marking this change a bug is easy as 1-2-3.

Just click on the red area and then choose 'It's a BUG'. 

The result will be a bug icon above the marked area.

 

Imagine that there are multiple areas on such page which you finished all by marking them either a bug (and then your development will need to fix them!) or false positives. Then you are done with reviewing such a page and can go to the next one. We only list pages from your set of URLs where we actually find changes. But your overall review process on this page ends technically when you mark it finished. In case of doing you, please just click on 'Finish review page on all breakpoints'.

 

Nevertheless, in case of multiple breakpoints have changes in the Diff, you might wish to review them differently (e.g. a mobile specialist should validate certain changes on lower resolutions than on higher ones). In order to help you do so, you can set this button to only consider finishing the review on just the current breakpoint.

And you can undo such actions at any time!

When you and your colleagues are all done with reviewing all changes found by Diffy and revisit the main page of the Diff, then you'll have a clear view of which pages have actual issues and which are clear and you don't have to pay attention to them anymore. When you decide to finish the overall review process, please click on 'Finish review' on this page. This action only can happen once, it's not undoable, so please click wisely!

 

As you see at this point, the filters at the top have changed their values reflecting to the actual number of screenshots where you have marked the changes either as a bug or accepting them as false positive issues. Regardless of how many pages are left without finishing reviewing them, by clicking on the 'Finish review' you state that it's done for you, once and for all!

 

When you're all done with all actions, back on the project page you'll see that this Diff actually has 1 bug that can be later visited in a simplified user interface where we only show the list of bugs as you can see below.

 

Click on the link at the column of Status and you can get to the review page of the Diff.

 

We believe and thanks to many of our customers' feedback by supporting them during their visual testing, with such a complex looking-like user interface, we cover most of the options that can occur via the visual regression testing process.

Even though it's only one of our advanced features that we offer, it's a key to getting your Diffs organized and working for you!

Let us know if you have any questions or need help setting up your projects!