Última atualização 08-14-2026
Categoria:
Reviews:
Join thousands of AI enthusiasts in the World of AI!
VizDiff
O VizDiff envia builds do Storybook a partir do GitLab CI, gera uma captura de tela para cada história e bloqueia merges quando os pixels do componente mudam.
Ferramentas genéricas de captura de tela comparam páginas inteiras. O VizDiff é construído em torno das histórias do Storybook, então as diferenças a nível de componente aparecem nas solicitações de merge do GitLab com visualizações Antigo, Novo, Diferença e lado a lado. A primeira execução em um branch marca todas as histórias como Novas; commits posteriores na mesma solicitação de merge mostram apenas as histórias que realmente mudaram.
Equipes de frontend que já usam Storybook no GitLab obtêm o máximo valor deste fluxo de trabalho automatizado. Designers e engenheiros compartilham bases de referência, revisam capturas de tela pendentes com atalhos de teclado e aprovam ou rejeitam um build sem sair da interface de revisão. Configurações no GitHub são suportadas por um guia de configuração separado para equipes nessa plataforma.
Faz upload de builds do Storybook via npx @vizdiff/cli em pipelines GitLab CI
Publica status de commits vizdiff/visual-tests em commits de merge request
Visualizações de comparação incluem layouts Old, New, Diff e 2-Up por story
Primeira execução na branch estabelece linhas de base; commits posteriores mostram apenas stories alterados
Login com Microsoft Entra SSO para implantações gerenciadas por organização
Guias de configuração GitHub e GitLab com exemplos de CI YAML para copiar e colar
Projetado especificamente para stories do Storybook ao invés de capturas de página inteira que perdem regressões de componentes.
Status de commits no GitLab bloqueiam merges até que mudanças visuais sejam explicitamente aprovadas.
Upload via CLI se encaixa em jobs existentes de build-storybook no CI com um passo extra.
Diff, 2-Up e navegação por teclado aceleram revisão de dezenas de capturas de stories.
Implantações auto-hospedadas permitem que equipes mantenham dados de screenshots dentro de sua própria infraestrutura.
Requer Storybook no seu repositório e acesso de Maintainer para adicionar variáveis de CI do GitLab.
Sem página de preços pública, portanto o custo depende da implantação VizDiff da sua organização.
Baixa autoridade de domínio sugere um produto mais novo ou de nicho com cobertura limitada de terceiros.
O que o VizDiff testa?
O VizDiff captura capturas de tela das histórias dos componentes do Storybook em cada build do CI. Ele as compara com as linhas de base aprovadas e destaca diferenças no nível de pixel para que as equipes possam identificar regressões visuais antes de fazer o merge.
Quais hosts Git o VizDiff suporta?
O VizDiff integra-se com merge requests do GitLab imediatamente, incluindo status de commits e links de revisão. Um guia separado para GitHub cobre fluxos de trabalho de pull request para equipes no GitHub.
Como conecto o VizDiff ao GitLab CI?
Adicione uma variável CI/CD VIZDIFF_PROJECT_TOKEN no GitLab, construa o Storybook para storybook-static, depois execute npx @vizdiff/cli upload no seu pipeline. O VizDiff lê automaticamente as variáveis CI predefinidas do GitLab.
O que acontece na primeira execução do VizDiff?
Na primeira execução do VizDiff para um branch, toda captura de tela do Storybook aparece como Nova porque ainda não existe uma linha de base. Faça outro commit no mesmo merge request e o VizDiff sinaliza apenas as histórias onde a interface realmente mudou.
Como aprovo mudanças visuais no VizDiff?
Abra a página de revisão do VizDiff pelo link de status do commit no GitLab, inspecione cada captura de tela e então aprove ou rejeite o build. O VizDiff atualiza o status do commit para sucesso ou falha imediatamente após sua decisão.
O VizDiff exige autorização pessoal do GitLab?
Não. O VizDiff usa um token de serviço de implantação configurado pelo seu administrador para ler metadados do projeto e postar status de commits. Os desenvolvedores se autenticam no VizDiff através do provedor SSO da organização.