Getting Started with VisWiz.io

What is VisWiz.io?

VisWiz.io is a visual regression testing tool. It is designed to analyze and report any visual differences in your project on any changes. It does this by integrating with your automated testing process.


Integrate VisWiz.io in your project

Integrating your project with VisWiz.io is easily achieved using the following steps, with an account on our platform.

1. Setting up API / SDK

To start integrating VisWiz.io, you need to use our SDK or our API directly. For either of these, you need an API key to authenticate yourself.

You can find your API key on the Account page from our web application. Go to the Account page and copy your API key value:

Find your API key on the 'Account' page
Find your API key on the 'Account' page

API

We expose a REST API for all of our resources and actions. You can access the API from your favorite platform or programming language. For more information, please read our API Documentation.

SDK

We currently have an official SDK for Node.js. For more information, please read our Node.js SDK Documentation.

SDKs for other languages will be available in the future.

2. Create a project

To continue with VisWiz.io, you will setup your project in our system. Your account can have multiple projects.

The simplest way to create a project is by using our web application. Go to the Projects page and click the Create a project button:

Click the 'Create a project' button on your 'Projects' page
Click the 'Create a project' button on your 'Projects' page

An alternative way to add a project is using our SDK or API.

3. Create a build

Next, you need to instrument your testing process with a few extra commands. Where exactly these commands will need to be added depends on the framework you use for automated testing.

A build needs to be created for the current commit via our SDK (see sample code below) or API. This will need to run only once before all your tests are run (e.g. in a beforeAll hook). The build ID has to be made available when the actual tests run - it will be used to send the screenshots.

4. Capture screenshots

Most UI testing frameworks (e.g. Puppeteer, Selenium, Capybara) support capturing screenshots of the current page being tested. You'll need to add these framework commands in your tests to capture screenshots. The amount or the type of screenshots depends on your project's requirements - feel free to add as many or as few as you want.

5. Send screenshots

Once you have the actual screenshots files, you can send them to VisWiz.io via our SDK (see sample code below) or API.

6. Finish the build

When all your tests have passed, you'll need to finish the VisWiz.io build. This can be done with a simple SDK or API call (see sample code below).

Finishing the build triggers the actual comparison to start. In a short time, you will receive a summary build report email (the default notification setting for a new project).

7. Notifications

When a build is finished and all images have been compared, notifications with the build results are sent. By default, email notifications are sent out for new projects.

Email and Slack

Each project can have its own notifications configuration. Choose to receive either email reports or Slack reports or even both.

Project notifications settings
Project notifications settings

Webhooks

You can define a global list of webhook URLs for the whole account. The simplest way to add a webhook is by using our web application. Go to the Account section and choose Webhooks:

Add a webhook URL in the 'Account' section
Add a webhook URL in the 'Account' section

An alternative way to configure project notifications or webhooks is using our SDK or API.

Interactive sample code

You can run the following code here to see how easy it is to work with our Node.js SDK:

The following code requires a valid VisWiz API key. When you create an account, your API key will be auto filled-in here.

The following code uses your real VisWiz API key, so all the actions are performed on your account.

After running the sample code, open your Projects page to see the new project.