Pixel-perfect (fix e section)

Quando uma única seção renderiza diferente, o parity fix e o parity section capturam tudo o que um agente precisa para deixá-la pixel-perfect.

parity fix — o atalho

O fix roda o section com todos os sinais ligados e produz um bundle em Markdown pronto para LLM:

parity fix --prod https://old.com --cand https://new.dev --selector "[data-section='Hero']"

Escreve em parity-output/:

• section-<hash>-prod.png / -cand.png — screenshots recortados da seção em cada lado
• section-<hash>-heatmap.png — sobreposição do pixelmatch com os pixels divergentes
• section-<hash>-bundle.json — diff de HTML + diff de estilos computados + listas de assets
• section-<hash>-prompt.md — um prompt pronto para colar
• um parágrafo do LLM diagnosticando a diferença (com chave de API; --no-llm pula)

parity section — escolha as facetas

O section é o comando de nível mais baixo — capture exatamente as facetas que você quer:

parity section --prod ... --cand ... --selector "footer" \
  --screenshot --computed-styles --heatmap --css-source --prompt

Inspecionando regras de CSS — parity css-trace

Para ver quais regras CSS afetam um elemento (URL única) ou como os estilos computados diferem entre os dois lados:

# Toda regra que casa com um seletor numa URL
parity css-trace --url https://loja.com --selector ".price"
 
# Diff de estilos computados prod vs cand
parity css-trace --prod ... --cand ... --selector ".price" --json

Veja também

• parity run --only visual — o módulo visual de página inteira
• Comandos de inspeção — css-trace, html, console