Componentes Reais

Os componentes UI reais — cards de produto, tabelas de admin, barras de navegação, dropdowns, modais, carrosséis, tabelas de preços, kanbans — combinam várias propriedades CSS em sistemas visuais densos e interdependentes. Testar um componente isoladamente com um screenshot de referência do Storybook não basta, porque uma regressão pode surgir apenas quando o componente é integrado em seu contexto real: um dropdown que abre atrás de uma tabela porque um overflow: hidden foi adicionado para resolver outro bug, uma modal descentralizada porque o posicionamento do body foi alterado para um componente sticky, ou um carrossel que exibe duas slides em vez de uma porque o container pai mudou de largura. Em interfaces de negócio, essas regressões afetam frequentemente funcionalidades críticas — botões de arquivamento escondidos em uma tabela, opções de validação invisíveis em uma modal — e seu impacto operacional vai bem além do simples desconforto visual. A coerência de um design system depende exatamente da estabilidade desses componentes integrados às suas páginas reais, sprint após sprint. O Delta-QA captura as páginas completas que contêm esses componentes, em seus diferentes estados interativos (menu aberto, modal exibida, linha selecionada), e compara os snapshots à baseline visual. O diff de comparação de páginas evidencia os componentes cujas dimensões, posicionamento, conteúdo visível ou profundidade de sobreposição mudaram entre versões. Essa abordagem permite validar via regressão visual que uma mudança em uma parte do sistema não quebrou outro componente à distância, e dá às equipes de QA cobertura sobre os padrões UI completos que os testes unitários de componente isolado não conseguem captar por construção.