The screenshot on the left is from August 11th. The screenshot on the right is the same URL, same browser and device but August 19th.
Building a website or web application, testing it, and deploying for the first time can bring an overwhelming sense of accomplishment for any development team. Testing happens almost in a finite measure, where you can almost account for every marked variable. But with the coming weeks come the inevitable bug reports, edge case glitches, and of course feature requests. With each introduction of code or features deployed to the production server, other functions or elements are certain to break. That’s why running regression tests are incredibly important. When designing and changing your front end UI, visual regression testing is just as important.
With CrossBrowserTesting, you can use our automated screenshot and side by side comparison features to help conduct visual regression tests on your site or app. Use visual regression testing to develop, test, and deploy quicker.
Setting Up A Baseline Browser
First, you’ll need to run your URL in our screenshot engine under your various selected browsers or devices. This will set the baseline of our regression testing, and be testing set “A” in this walkthrough. You can read more about our screenshot system here, but if you’re in a hurry here is a quick rundown:
- Visit Here
- Enter the URL of the web page you’d like to test.
- Select the browsers and devices you’d like to, or select from the pre-populated lists.
- Click Run
Okay, we now have a baseline set of browser tests to compare against once we make our changes. You can now make changes and deploy new features to your test or production environment, and we can run a regression test against that to show where the UI has been affected.
Starting Your Regression Test
To start your test set “B”, go to the screenshot history page. You can do that from the Screenshot Home Page by clicking View All Tests on the left-hand side. Once you’re there find test set “A” in the list. Click run again.
You should see the “Start a Screenshot Test” screen and a message above your url stating Repeat Test: This creates a new version of the test and allows changing browsers and options but not the URL. Now click Run Test and wait for the comparison engine to finish running. In the upper right-hand corner click List Versions, then Compare to Previous.
You now are looking at the summary of regression tests from test set B to test set A. Click a browser configuration and you now have a side by side regression comparison.
Below is a regression test of ESPN’s Home Page: test set “A” is taken August 11th, and test set “B” is taken August 19th. ESPN is a news website, so the differences will be an extreme case, but it is interesting to note even subtle UI changes the website has made in just 8 days.
Our Screenshot Comparison engine allows you to see missing elements, hidden elements, and exact movement of elements from set A to set B. The scroll can be locked in both version to quickly see both versions, full-page and side by side – making bug and defect reporting a breeze.