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 will 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 that we have the control, let's rerun the test and see what happens. Your test should pass.
