Skip to content
Vizzly Docs

Test Framework Integration

The JavaScript client works anywhere you can produce a PNG or screenshot buffer.

The common pattern is:

  1. run tests through vizzly run, or start vizzly tdd start
  2. capture a screenshot in your test framework
  3. send it with vizzlyScreenshot()

Playwright

import { test } from '@playwright/test';
import { vizzlyScreenshot } from '@vizzly-testing/cli/client';


test('homepage', async ({ page, browserName }) => {
  await page.goto('/');


  let screenshot = await page.screenshot();


  await vizzlyScreenshot('homepage', screenshot, {
    properties: {
      browser: browserName,
      viewport: page.viewportSize(),
    },
  });
});

Jest or Puppeteer

import { vizzlyScreenshot } from '@vizzly-testing/cli/client';


test('dashboard', async () => {
  let screenshot = await page.screenshot();


  await vizzlyScreenshot('dashboard', screenshot, {
    properties: {
      browser: 'chrome',
      viewport: page.viewport(),
    },
  });
});

WebDriver and WebdriverIO

If your framework returns a base64 screenshot, convert it to a Buffer. A plain string is treated as a file path by the Vizzly client.

let screenshot = Buffer.from(await driver.takeScreenshot(), 'base64');


await vizzlyScreenshot('checkout', screenshot, {
  properties: {
    browser: 'chrome',
  },
});

Useful patterns

  • Keep screenshot names stable across runs.
  • Use properties like viewport, theme, or state when you want separate baselines for variants.
  • Use vizzly run "your test command" --wait when CI should fail on unresolved visual changes.

Next steps