Automated Visual Regression Testing

It might work,
but does it look right?

It might work,
but does it look right?

It might work,
but does it look right?

Functional doesn't mean good!
Add Visual Regression testing to protect against UI changes across browsers and devices.

The Pro Test Automation IDE with everything to build complex branching test flows.

Example visual regression test in DoesQA
Example visual regression test in DoesQA

What is Visual Regression?

What is Visual Regression?

What is Visual Regression?

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.

Why do Visual Regression testing?

Why do Visual Regression testing?

Why do Visual Regression testing?

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.

Control Buy Now Button
Control Buy Now Button
Control Buy Now Button

Functional Test

Visual Regression Test

Small Buy Now Button
Small Buy Now Button
Small Buy Now Button

Functional Test

Visual Regression Test

Bad Buy Now Button
Bad Buy Now Button
Bad Buy Now Button

Functional Test

Visual Regression Test

How to create a Visual Regression test

How to create a Visual Regression test

Step 1:
Create New Flow

Step 1:
Create New Flow

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.

Step 2:
Configure Open Node

Step 2:
Configure Open Node

New flows start with an Open Node, double-click this to open the edit modal and enter the site you wish to test.

Step 3:
Insert & Connect Snapshot Node

Step 3:
Insert & Connect Snapshot Node

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.

Step 4:
Configure Snapshot Node

Step 4:
Configure Snapshot 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.

Running your Visual Regression test

Running your Visual Regression test

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.

Extending your Visual Regression test

Extending your Visual Regression test

Visual Regression across multiple browser and devices
Visual Regression across multiple browser and devices
Visual Regression across multiple browser and devices

To perform this on different browsers or at different viewport breakpoints, we would add multiple Open Nodes.

Visual Regression checks on mutliple pages
Visual Regression checks on mutliple pages
Visual Regression checks on mutliple pages

To check the same Element on different pages, we can insert Browser Go To Nodes.

Visual Regression Snapshot node paired with Position node
Visual Regression Snapshot node paired with Position node
Visual Regression Snapshot node paired with Position node

To check the Element also appears in the correct location we can pair the Snapshot Node with a Position Change Detection Node.

Start Testing Today, FREE!

Start Building your test automation pack with 1 runner completely free!

Start Testing For FREE

Start Testing Today, FREE!

Start Building your test automation pack with 1 runner completely free!

Start Testing For FREE