Visual Regression Testing tool from LoadFocus allows to compare two version of your website in just seconds. Let’s say that you have two environments for your website, Staging and Production, and you want to make sure that any visual change you made on the Staging version is expected and now other changes/bugs are going to be introduced.
With Visual Regression Testing tool you can create a test where you define the two versions of your website, with every webpage that you want to run the screenshot comparison test.
Here are the steps how you can compare two versions of your website in seconds, have the test saved in LoadFocus Platform.
- Define each webpage you want to runt the test agains i.e. https://loadfocus-staging.com vs https://loadfocus.com
- Choose which responsive screen or mobile device to open the webpage and take the screenshot
- Set the threshold for passing/failing the test (basically all different pixels below this threshold are going to be ignored)
- Run the test from within https://loadfocus.com/visual-regression-testing or from the Chrome Extension
- Inspect the generated screenshot to view differences highlighted in red
Run the Visual Regression test in just seconds for all the defined webpages, also for faster access to results, you can use the Chrome Extension for Visual Regression Tests.
Easily spot the differences by accessing the generated comparison image which is available from within the visual test.
The Visual Regression test will fail if the differences between the two pages are higher than a set threshold (“tolerance” can be set from 0% to 90%).
Hope you enjoyed this new visual regression testing service which will make your life easier and will give you more confidence when releasing new functionalities/features. To have an idea, how this service works, you can play with the free screenshot comparison tool.
Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.