VisualQ
Getting Started

Run your first test

Generate baselines and run your first visual regression test.

Step 1: Sync baselines

Before you can detect visual changes, VisualQ needs baseline screenshots — the approved "known good" state of your pages.

Click Sync Baselines

From the project header, click the "Sync refs" button. This captures fresh screenshots for all scenarios and saves them as reference images.

Wait for completion

A toast notification will appear when the capture is complete. The process takes a few seconds per scenario depending on the number of viewports.

Verify baselines

On the project overview, scenarios should now show status indicators for each viewport. Initially everything is "new" since there's nothing to compare against yet.

Step 2: Run visual tests

Now that baselines exist, run a test to compare the current state of your pages against those baselines.

Click Run All Visual Tests

From the project header, click "Run all visual tests". This captures new screenshots and compares them pixel-by-pixel against the baselines.

Wait for results

A notification appears when the run completes. If no visual changes occurred since the baseline was captured, all scenarios will pass.

View the results

Go to the Tests tab to see the run history. Click on a run to open the Diff Viewer and inspect results.

If your page changed between baseline capture and the test run, VisualQ will detect and highlight the differences. This is expected — that's exactly what visual regression testing is for!

Next step

Let's learn how to read and understand your test results →

On this page