Hello again! Glad you’ve swung by again to take a look at our ABCs video! Hopefully, you enjoyed the last one on cross-browser testing, but now it’s time for D for Dazzling Visual Regression! …ok I might have been a bit cheeky with this title, but if you have a better idea, then be sure and let me know!

So, an important part of testing is making sure that nothing visual has changed that you didn’t expect. Sometimes, it’s hard for manual testers to catch any details that might have shifted very slightly. For my example, I used something more noticeable: I changed one of the blog images to a different color palette. I wrote a very simple test that involved looking for one element and clicking one button. Nothing fancy, just enough to establish the baseline of how the website should look. I triggered the snapshot comparison through the Execute Advanced menu by toggling the button on, then ran the test. Once I approved the baseline, which tells Virtuoso how the website should look, I changed the blog image.

To try out the Visual Regression testing, I ran the test the exact same way, and Virtuoso detected the change. Sometimes, changes are so minute that even when Virtuoso tells us there’s a change, we still can’t see it! I remember when we changed the logo for the Christmas season to have the little hat and Virtuoso alerted me, I couldn’t tell what was different until I used the “Highlight Change” function to put a red box around the logo. There’s also a way to use a slider to overlay the two snapshots; that was helpful for this video since I didn’t realize there was a slight change in the way the bots in the image were oriented, I had only seen the color difference.

This regression testing is really cool! I was almost tempted to make smaller changes to see how Virtuoso would spot them, but I’m way too afraid of breaking the entire website. But, if you’d like to see more specific things that Virtuoso can catch and subtler changes, go ahead and book a free demo with one of us. We’d love to show Virtuoso to you more in-depth!