tommy_bordas
2025 · VizProof

VizProof - SaaS de Visual Regression Testing

FastifyPrismaPostgreSQLReactVitePlaywrightpixelmatchOpenAI

Résultats Clés

3 moteurs
Couverture navigateurs
Chromium
pixelmatch
Moteur de diff
Comparaison pixel par pixel des screenshots
Web + API + CLI + WP
Ecosysteme
Produit SaaS connecte au plugin WordPress

Défis

  • Capturer des rendus web stables sur plusieurs navigateurs
  • Comparer les screenshots avec un moteur de diff fiable
  • Gerer les runs VRT a grande echelle (API
  • UI
  • CLI)
  • Concilier UX produit
  • quotas et contraintes de billing

Solutions

  • Monorepo pnpm avec packages server/web/cli/shared
  • Pipeline de capture Playwright (Chromium
  • Firefox
  • WebKit)
  • Moteur de diff pixelmatch + pngjs avec classification AI
  • API Fastify + Prisma/PostgreSQL avec auth JWT/refresh token

VizProof - SaaS de Visual Regression Testing

Contexte

VizProof est un SaaS de Visual Regression Testing (VRT): il capture des screenshots web, compare les rendus entre runs et detecte les regressions UI avant mise en production. Le projet est disponible en production sur https://vizproof.com.

Enjeu produit

L'objectif n'etait pas seulement de prendre des captures d'ecran, mais de construire une plateforme complete:

  • pilotage des runs depuis une interface web
  • orchestration backend fiable pour les captures et diffs
  • integrations CI/CD via une CLI dediee
  • extension ecosysteme via plugin WordPress

Architecture

Le produit repose sur un monorepo pnpm organise en packages:

  • packages/server: API Fastify + Prisma + PostgreSQL
  • packages/web: React + Vite + TypeScript
  • packages/cli: CLI @vizproof/cli pour l'integration pipeline
  • packages/shared: types et helpers partages
  • wordpress-plugin/vizproof-timeline: plugin WordPress d'integration

Cette structure permet de partager la logique metier, d'accelerer les iterations et de garder un niveau de qualite homogene entre API, frontend et CLI.

Pipeline VRT

Le coeur de VizProof est un pipeline de capture/diff:

  1. declenchement d'un run (manuel, schedule, webhook)
  2. captures Playwright sur plusieurs moteurs (Chromium, Firefox, WebKit)
  3. stabilisation de rendu avant screenshot
  4. comparaison baseline vs run courant avec pixelmatch/pngjs
  5. classification et resume AI des diffs pertinents

Le resultat est exploitable a la fois par les equipes produit, QA et dev pour valider rapidement les changements UI.

Securite et operations

  • authentification JWT + refresh token en cookie httpOnly
  • quotas et usage mensuel selon les plans
  • webhooks (GitHub, Lemon Squeezy, etc.)
  • notifications et alerting integres

Le backend est concu pour absorber des runs frequents tout en conservant une bonne lisibilite des incidents et des changements.

Conclusion

VizProof est une plateforme VRT complete, pas un simple script de screenshot. Le projet combine architecture backend solide, execution Playwright multi-navigateurs, moteur de diff robuste et experience produit orientee usage reel en CI/CD.