Catch visual bugs before your users do

import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({ apiKey: process.env.STACK0_API_KEY })
 
// Capture screenshots for visual testing
export async function captureBaseline(pages: string[]) {
  const screenshots = await Promise.all(
    pages.map(async (path) => {
      const { imageUrl } = await stack0.screenshot.capture({
        url: `${process.env.APP_URL}${path}`,
        viewport: { width: 1280, height: 800 },
        fullPage: true,
        // Wait for animations to complete
        waitForSelector: '[data-testid="page-loaded"]',
      })
      return { path, imageUrl }
    })
  )
  return screenshots
}
 
// Compare screenshots in CI
export async function compareScreenshots(
  baseline: Screenshot[],
  current: Screenshot[]
) {
  const diffs = await stack0.screenshot.compare({
    baseline: baseline.map(s => s.imageUrl),
    current: current.map(s => s.imageUrl),
    threshold: 0.1, // 0.1% pixel difference allowed
  })
 
  return diffs.filter(d => d.diffPercentage > 0)
}