Percy e Chromatic para Storybook

Percy é uma plataforma de VRT baseada na nuvem que se integra aos fluxos de CI. Ela captura telas de páginas da web e histórias do Storybook, armazena linhas de base na nuvem e gera revisões de diferenças visuais acessíveis por uma interface web. Ela oferece suporte a Playwright, Cypress, Selenium e Storybook.

Chromatic é uma plataforma de VRT criada especificamente para o Storybook. Ela captura todas as histórias em navegadores na nuvem, compara-as com as linhas de base e gera uma interface para revisão das diferenças. O Chromatic também publica o Storybook como um site hospedado de documentação de componentes.

Percy e Chromatic descobrem e capturam automaticamente todas as histórias do Storybook. Nenhum código adicional de teste é necessário — escreva histórias para seus componentes, execute a CLI e cada estado visual será testado automaticamente. Isso torna rápida a adoção em projetos existentes do Storybook.

Instale @percy/cli e @percy/storybook, adicione a variável de ambiente PERCY_TOKEN à CI e adicione percy storybook ./storybook-static ao fluxo de CI. O Percy captura todas as histórias e publica automaticamente uma execução de VRT no painel do Percy.

Instale chromatic, adicione CHROMATIC_PROJECT_TOKEN à CI e execute chromatic --project-token=.... A primeira execução estabelece as linhas de base. As execuções seguintes comparam os resultados com as linhas de base e publicam links de revisão nas verificações de PR do GitHub.

Ambas as ferramentas adicionam uma verificação de PR que mostra "X alterações detectadas." Ao clicar nela, a interface de revisão é aberta com diferenças lado a lado ou sobrepostas. Os revisores aprovam alterações intencionais, estabelecendo novas linhas de base, ou solicitam correções para regressões acidentais.

Use os argumentos do Storybook (controles) para criar várias variantes de uma história: Padrão, Carregando, Erro, Desativado, LongText, SmallViewport. Cada variante se torna uma captura de VRT separada — cobertura abrangente de estados sem escrever arquivos de teste separados.

Chromatic e Percy oferecem suporte a várias larguras de janela de visualização por captura. Configure as janelas de visualização na história ou globalmente em .storybook/preview.js. Execute o VRT para cada janela de visualização e cada tema (claro/escuro) para detectar simultaneamente regressões responsivas e de tema.

Aceite todas as alterações ao lançar uma versão principal ou fazer uma reformulação intencional. Ambas as ferramentas oferecem suporte à aceitação em lote. Após uma atualização importante do sistema de design, aceite todas as diferenças de uma só vez; as novas capturas de tela se tornarão a linha de base para futuras alterações incrementais.

Combine a função play() do Storybook (testes de interação) com o VRT: play() simula interações do usuário (clique em um botão, abra uma janela modal) e, em seguida, a captura de VRT registra o estado resultante. Isso testa a saída visual de componentes interativos complexos.

Percy e Chromatic cobram por captura. Suítes grandes do Storybook, com centenas de histórias, várias janelas de visualização e temas, geram milhares de capturas por PR. Monitore o uso, utilize os decoradores de histórias com eficiência e considere ignorar o VRT em histórias focadas exclusivamente na lógica.

O que torna o Chromatic especialmente adequado para projetos do Storybook em comparação com ferramentas genéricas de VRT?

Percy e Chromatic automatizam o VRT para o Storybook ao descobrir e capturar todas as histórias em navegadores na nuvem, gerar revisões das diferenças nas PRs e gerenciar linhas de base. Combinados com argumentos de histórias para cobertura de estados e play() para testes de interação, eles oferecem uma garantia abrangente da qualidade visual de bibliotecas de componentes.