The following is a paid product review for Vizzly, a visual testing tool that enables teams to easily capture and compare changes so they can catch bugs before shipping.

Today, with the advent of AI, and the number of tools available, it is more important than ever to be able to ship quickly. But like anything that's done in rapid fashion, you don't want to sacrifice quality.

So testing is a crucial part of the shipping process. This is where Vizzly comes in. Vizzly is a visual testing tool with team collaboration features that enables you to use visual diffs to approve your UI changes before putting it out to the world.

Here's a basic rundown of the main features of Vizzly:

• While coding, run a simple CLI command to test your changes locally against a baseline that you define
• Find real UI changes that filter through noise like timestamps and ads, going beyond image vs. image comparisons
• Works with your existing testing setup, whether you use Playwright, Puppeteer, Cypress, or any testing framework
• Collaborate with your team by adding feedback directly to screenshots with support for @mentions and notifications

If you choose the local login, you might have to ensure your local server is using SSL, so you can start doing things like adding screenshots that will show up in your Vizzly dashboard.

Uploading Screenshots to Vizzly
Technically, you don't have to use a testing framework for comparing your UI screenshots, but doing that sort of thing manually is not optimal. In my case, I was able to set up a quick Playwright script that generates my screenshots and puts them into a designated folder.

To upload my screenshots, I used an auth token with the following command, which I ran at the root of my project folder:

This assumes I have a folder called "screenshots" where I generate my test results. And of course, you would include your own token in place of the last argument.

The project I ended up testing for this review is an older one that I haven't updated in a while, so it needed a fresh JavaScript makeover. First I used the Playwright script to generate a 'baseline' of what I want the UI to look like (the current home page before any changes). I upload this to Vizzly using the above command, then I have to go into the Vizzly dashboard to "approve" this as my baseline.

Next I want to generate another screenshot after I've made my JavaScript changes. In this case, I asked an AI tool to optimize my core JavaScript, which I then used to replace my old script. I ran my Playwright script again and uploaded the new screenshot to Vizzly.

Now I can go into the Vizzly dashboard and visually test my new screenshot, taken after my JavaScript overhaul. Because these are JavaScript changes, I don't expect any UI changes to occur, but Vizzly lets me confirm that. Notice that the only significant UI change in the example below is the ad, which is expected.

Testing out my new build against my baseline

When I click to view my new 'build', Vizzly includes three different options for doing the visual comparison, all of which I tested above:

• A diff overlay that toggles on/off when you click the image
• An overlay that puts the new image over the baseline with click to toggle
• A baseline vs. current comparison slider

• CLI integration, which sends tests to the Vizzly dashboard in the cloud
• TDD Mode, which does all your tests locally, and automatically opens a local server that spawns a local dashboard
• The Vizzly SDKs, with integrations for JS/Node.js, Ruby, Storybook, Vitest, Ember, Swift, or any static site (Gatsby, Next.js, Astro, etc.)
• CI/CD integration, which incorporates Vizzly into your CI pipeline so you can streamline catching bugs and visual regressions
• AI integrations, which allow you to use AI agents that run Vizzly's CLI commands, then parse JSON output and respond accordingly

The local TDD Vizzly Dev Dashboard Stats

The screenshot above shows the "Stats" view of the local dashboard. You get a similar view on the cloud version for each project in your dashboard.

Collaborating with Teammates in Vizzly
As mentioned, Vizzly includes tools for adding feedback for team communication on builds. In your cloud dashboard, go to the "Overview" tab of any build and scroll to the bottom of that page.

Similar to GitHub issues, here you and your team can discuss a particular build and provide feedback before a build is approved or rejected.

As shown in the example, Vizzly allows @mentions for teammates that have been added to the project. You can add or remove team members by visiting your Organization Settings then choosing "Team".

There's lots more to dive into with integrating Vizzly with your tools, but the above should give you a pretty good idea what it's capable of. The comprehensive docs are a great place to continue what I've considered here.

Try Vizzly Today
I'm pretty new to testing and using testing frameworks, but with a few AI-powered recipes, I was able to knock out a few testing scenarios that easily integrate Vizzly. Although running tests may have a bit of a learning curve, Vizzly pretty much gets out of your way, providing a fairly smooth process as long as your testing environment is solid.

As far as plans go, Vizzly offers a Free plan with limited features, a Starter plan for up to 10 team members, and a larger Team plan for up to 50 members. There's also an open-source plan that's free and includes all the features of the paid Starter plan – as long as the projects are public and open source.

Give Vizzly a spin today if you want a simple but robust set of tools for visual testing and diffing that slides right into your current testing workflow.

Now on to this week's tools!