Automatically detect UI changes
Your guide to automated visual regression testing.
Visual Regression testing is one of the best value-for-effort types of testing you can add to any testing pack.
In this, we'll look at what Visual Regression is, why you should use it, and how to add these Visual Regression tests to your automation testing pack.
Visual regression testing is a type of testing that detects visual changes.
Your functional tests will tell you if your "buy now" button is working, but your visual regression tests will tell you if your button appears correctly.
Taking the simple example of a "buy now" button above, you will want to ensure this appears correctly for all users. It could negatively affect your revenue if it appears incorrectly.
Manual testing is repetitive, and small changes can be easily missed. Automation testing is the best solution.
Functional Test
Visual Regression Test
Functional Test
Visual Regression Test
Functional Test
Visual Regression Test
If you don't have an account yet, create one and come back. From the Flows view click the plus button to create a new Flow.
New flows start with an Open Node, double-click this to open the edit modal and enter the site you wish to test.
Locate the Change Detection Nodes from the Node Library on the left. Drag in the Snapshot Node into your Flow and connect it to the Open Node.
Double-click the Snapshot Node to configure it. Select or create the Element you want to apply change detection to.
Tip: If you want to check the visible portion of the current page, create an Element with body as the CSS selector.
The first time we run this test, there'll be no "control" to compare to. You will see the following message in your test results "No control image found, storing current as control".
Now we have the control. Let's rerun the test and see what we get. Your test should pass.
