Getting Started
Make a project, capture your first screen, and see what changed the second time.
Visual needs two things before it can tell you anything: a project to keep your screens in, and a first picture of each screen to compare against.
Step 1 — Make a project
Go to Visual → Projects → New project and give it a name.
A project is a set of screens that belong together — usually one website, one app, or one team's work. Everything inside a project shares its threshold and its list of screens, and a screen is only ever compared against a baseline in the same project.
Most teams need one project. Make a second when you have genuinely separate things to watch — a marketing site and a customer dashboard, say — not one per branch or per release.
Step 2 — Capture your first screens
There are three ways to get a picture into Visual. You can mix them.
From a page address
Visual → Builds → New run. Give the screen a name and the address to open, pick a browser, and the run starts. We open the browser, photograph the whole page, and close it.
Good for public pages. The address has to be reachable without signing in — a page behind a login needs one of the other two.
From a Live session
While you are driving a Live session, use Capture in the session toolbar. The screen you are looking at goes into a project you choose.
Good for a screen you have just navigated to by hand, including anything behind a login you have just typed.
From your own test suite
Your tests write PNGs; our CLI uploads the folder. Good for everything else, and it is where most teams end up. See Uploading from CI.
Step 3 — Nothing happens, and that is correct
The first picture of a screen has nothing to compare against, so it becomes the baseline — the approved version. Visual will tell you it is new and leave it alone.
This is the moment to check you have captured what you meant to. A baseline is what every future run is measured against.
Step 4 — Capture again
Run the same capture a second time. Now there is something to compare, and each screen comes back as one of:
- Identical — nothing to do.
- Different — it is waiting for you in Visual → Builds.
Make a deliberate change to your page — move a button, change a colour — and capture again. That difference is what Visual is for. See Reviewing changes.
Step 5 — Quiet the noise
Most projects have one or two things that are never the same twice: a clock, a carousel, a "3 minutes ago", an advert.
Open the screen in review and draw an ignore region over it. Anything inside the box stops counting as a difference, for that screen, from then on.
Reach for an ignore region before you reach for the threshold. A box over the clock keeps the rest of the page as strict as it was; raising the threshold makes the whole screen blinder.
Overview
Catch the change you did not mean to make. Visual photographs your screens, compares each one with the version you approved, and shows you exactly what moved.
Reviewing changes
Every screen is approved, unreviewed, or reported as a bug. Decide which, see exactly what moved, and file it where your team works.