O botão deve destacar-se com mais clareza. Depois da alteração, o cartão de oferta tem bom aspeto num ecrã grande. Numa vista estreita, porém, o botão mais largo empurra o preço para fora da linha. A alteração foi pequena; o seu efeito diz respeito a toda uma relação entre elementos de conteúdo.
O Playwright documenta comparações de capturas de ecrã com imagens de referência e assinala como o ambiente de captura as pode influenciar. O método oferece uma boa ocasião para um exercício próprio. Nem toda a diferença de píxeis é um erro, e uma imagem idêntica ainda não prova uma ação correta. O que importa é qual a expectativa visível que queres examinar com a comparação.
Escreve o que deve mudar e o que tem de ficar
Para o nosso cartão fictício, a intenção é: o botão torna-se mais fácil de reconhecer, enquanto o título, o preço e a nota necessária continuam totalmente legíveis. Esta frase contém a alteração desejada e os seus limites. «Melhora o botão» seria muito mais difícil de avaliar.
Prepara três casos de conteúdo: um título curto, um título longo e um título com uma condição adicional. Usa os mesmos dados antes e depois da alteração. Uma comparação com texto de preenchimento conveniente pode esconder precisamente a falta de espaço que surge mais tarde com conteúdo real.
Escolhe também pelo menos uma vista larga e uma estreita. Estas larguras fazem parte da pergunta e não são uma afirmação geral sobre todos os dispositivos. Um caso estreito testa se a relação se mantém quando há pouco espaço.
A referência precisa de um ambiente controlado
O navegador, o sistema operativo, os tipos de letra e outras condições podem afetar a captura. Uma imagem de antes obtida noutro ambiente é, por isso, uma referência mais fraca. Mantém constante o ambiente relevante e documenta-o juntamente com o teste.
Um pequeno exemplo próprio em Playwright para uma página de teste preparada poderia ter este aspeto. Pressupõe um projeto já configurado com um baseURL adequado e não foi executado para este artigo:
import { test, expect } from '@playwright/test';
test('Offer card stays readable when narrow', async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await page.goto('/angebot-demo');
await expect(page).toHaveScreenshot('angebot-390.png');
});Os nomes da página e dos ficheiros pertencem ao exemplo didático. A comparação de capturas de ecrã documentada confronta uma captura com a referência. O trabalho editorial importante continua a ser a interpretação: a diferença é intencional ou empurra para fora um elemento de conteúdo necessário?
Um desvio é, antes de mais, uma observação
Não olhes para a imagem de diferenças apenas em torno do botão. Verifica o preço, as quebras de linha e a nota adjacente. Talvez o botão maior esteja certo e o layout ao lado precise de mais flexibilidade. Talvez a suposta melhoria só fizesse sentido na vista larga.
Não aumentes por reflexo o desvio permitido até o teste voltar a ficar verde. Isso mudaria a pergunta sem compreender o problema. Uma tolerância pode justificar-se, mas tem de se adequar ao tipo de diferenças observadas.
Da mesma forma, uma nova referência é uma decisão. Um novo estado pretendido pode ter um aspeto diferente. Só deve tornar-se a base de comparação depois de o seu conteúdo ter sido avaliado. Caso contrário, um efeito secundário despercebido é simplesmente declarado a nova imagem-alvo.
O aspeto continua a precisar do percurso real de clique
Um botão idêntico pode desencadear a ação errada. Por isso, acrescenta à verificação visual um percurso completo: chega até ele com o teclado, aciona-o e observa o estado-alvo esperado. Uma captura de ecrã e um teste de comportamento respondem a perguntas diferentes.
Se fizeres o exercício num site WordPress teu, uma cópia de trabalho em KENJTEC WordPressBuilder ai pode manter o estado que estás a alterar separado do site em produção. Executas a comparação com o Playwright com a tua própria ferramenta, fora do KENJTEC. Transferir as alterações da cópia de trabalho é depois um passo separado, para o qual tem de ser escolhido o âmbito adequado.
A utilidade das vistas de comparação fixas não está em impedir a mudança. Elas tornam visível se a melhoria desejada respeita os elementos vizinhos. Só a expectativa, a observação e a utilização real em conjunto permitem um juízo fundamentado sobre o novo botão.
Fontes e estado
Pesquisa e documentação à data de 25 de outubro de 2026. Comparações visuais.
