Testar os pixels: controlo de qualidade por capturas de ecrã numa equipa pequena

Adotámos isto pela via honesta: depois de lançarmos regressões visuais que uma única captura de ecrã teria apanhado. Um painel fosco que saiu pálido sobre fundos escuros. Um menu que se desenhava mas não se conseguia clicar. Um campo de pesquisa que existia à largura de um telemóvel como uma lasca de 65 pixels. Todos eles passaram por uma bateria de testes verde, porque a bateria testava funções e os erros viviam nos pixels.

A montagem é mais pequena do que parece

A nossa é um ambiente local semeado, cheio de dados fictícios convincentes, um início de sessão headless cuja sessão é guardada em disco para nada abrandar, e um ciclo: páginas vezes temas vezes larguras de ecrã. Computador e telemóvel, claro e escuro, todas as superfícies que interessam. A coisa toda é um script curto, e uma varredura completa produz uma pasta de imagens em poucos minutos.

1import { chromium } from 'playwright';2 3const browser = await chromium.launch();4const ctx = await browser.newContext({5  storageState: 'auth.json', // login once, reuse everywhere6  viewport: { width: 1440, height: 900 },7});8const page = await ctx.newPage();9 10for (const [name, url] of PAGES) {11  await page.goto(BASE + url, { waitUntil: 'load' });12  for (const theme of ['light', 'dark']) {13    await page.evaluate((t) =>14      document.documentElement.setAttribute('data-theme', t), theme);15    await page.screenshot({ path: `shots/${name}-${theme}.png`, fullPage: true });16  }17}

Capturas de ecrã, mais a prova

As imagens apanham o que os olhos apanham. Para erros de interação, o que quer é que o navegador testemunhe. Duas linhas fazem quase todo o trabalho: o elementFromPoint no centro de um controlo diz-lhe o que receberia mesmo o clique, e o getBoundingClientRect diz-lhe se o controlo cabe de facto na largura de ecrã que diz suportar. Passámos a verificar as duas coisas para tudo o que já nos queimou.

1// Is the menu item really clickable, or is something invisible covering it?2const hit = await page.evaluate(() => {3  const el = document.querySelector('[role="menuitem"]');4  const r = el.getBoundingClientRect();5  const top = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2);6  return el === top || el.contains(top);7});8 9// Does the search input actually fit a 390px phone?10const fits = await page.evaluate(() => {11  const r = document.querySelector('input[name="q"]').getBoundingClientRect();12  return r.right <= window.innerWidth && r.width > 200;13});

Os dois temas, sempre

Os erros de modo escuro são uma categoria à parte porque se escondem de quem trabalha só num tema. Um preenchimento quase branco escrito à mão parece intencional numa página clara e radioativo numa escura. Trocar o atributo do tema dentro da mesma visita à página custa uma linha e duplica a cobertura. Tratamos qualquer superfície que não tenha sido fotografada nos dois temas como não testada.

O que é que apanha

• Erros de contexto de empilhamento: desenhado, visível e não clicável. Só um teste de clique vê isto.
• Fugas de tema: superfícies claras a brilhar em páginas escuras, gráficos que desaparecem, ilustrações com o fundo cozido lá dentro.
• Transbordo no telemóvel: barras fixas a tapar conteúdo, campos cortados em lascas, títulos cortados a meio da frase.
• Texto no contexto: o corte, a contradição, a frase que um linter nunca vai assinalar.

Nada disto substitui a bateria de testes unitários. A bateria prova as contas do dinheiro; as capturas de ecrã provam que um humano consegue chegar ao botão que as dispara. Uma equipa pequena não tem um departamento de qualidade, mas uma pasta de capturas de ecrã acabadas de tirar e revistas antes de cada lançamento é uma imitação decente disso. O teste é o olhar.

Os testes passam é uma afirmação sobre as suas funções. A captura de ecrã é uma afirmação sobre o seu produto.