Os modelos de email são traiçoeiros. O suporte de HTML e CSS varia imenso entre Gmail, Outlook, Apple Mail e clientes móveis. Um modelo que fica perfeito numa caixa de entrada pode partir-se completamente noutra.
As caixas temporárias dão aos designers de email e às equipas de QA uma forma rápida de testar como os modelos renderizam sem encher caixas pessoais ou ambientes de staging.
Porque é que os testes de modelos de email importam
Modelos de email partidos prejudicam taxas de abertura, taxas de clique e a confiança na marca. Problemas comuns de renderização incluem:
- CSS não suportado no Outlook (motor de renderização baseado em Word)
- inversões de cor no modo escuro no iOS e macOS
- layouts responsivos que se partem no telemóvel
- imagens bloqueadas por defeito em alguns clientes
- fontes de recurso com aspeto errado
- variáveis dinâmicas que aparecem como marcadores brutos
Para fluxos de teste relacionados, veja Email temporário para testes de aplicações e Testes de QA.
Fluxo recomendado de testes de modelos
Use uma caixa temporária para cada caso de teste de renderização. Isto mantém os resultados organizados e facilita a depuração.
1. Crie uma caixa temporária para o destinatário de teste. 2. Envie o modelo de email a partir do seu ESP ou da aplicação. 3. Abra o email na caixa temporária. 4. Verifique a renderização HTML, a alternativa em texto simples e as variáveis dinâmicas. 5. Repita com variações do modelo e casos limite.
Use a Pré-visualização de Assunto de Email para verificar o assunto e o preheader antes de enviar.
O que verificar em cada modelo
Renderização HTML
Confirme que:
- o layout funciona em larguras de desktop e móvel
- as imagens carregam corretamente e têm texto alternativo
- os botões e as ligações são clicáveis
- as cores de fundo e os espaçamentos estão corretos
- as tabelas não se partem em ecrãs estreitos
Versão de texto simples
Alguns clientes e ferramentas de acessibilidade preferem texto simples. Verifique sempre:
- a versão de texto simples existe e é legível
- as ligações importantes ficam visíveis em texto simples
- nenhuma etiqueta HTML em bruto vaza para o modo de texto
Variáveis dinâmicas
Teste se os tokens de personalização são resolvidos corretamente:
- o nome do destinatário aparece na saudação
- os códigos de verificação são preenchidos
- datas e valores são formatados corretamente
- os valores de recurso funcionam quando faltam dados
Use o OTP Parser para confirmar que os códigos de verificação são extraíveis do email renderizado.
Lista de verificação para testes entre clientes
Teste o seu modelo pelo menos nestes ambientes:
- Gmail (web, iOS, Android)
- Outlook (desktop, web)
- Apple Mail (macOS, iOS)
- Yahoo Mail
- ProtonMail
Para cada cliente, verifique:
- o assunto e o preheader são mostrados corretamente
- as imagens carregam ou mostram texto alternativo adequado
- o modo escuro não parte o design
- os tamanhos de letra são legíveis no telemóvel
Testar com webhooks
Para testes automatizados de modelos, use webhooks para capturar emails recebidos de forma programática:
1. Crie uma caixa temporária através da API. 2. Acione o envio do email a partir da sua aplicação. 3. Receba o payload do webhook com o conteúdo da mensagem. 4. Analise o corpo HTML e execute asserções.
Veja a documentação da API do TempMailito e o Webhook Payload Tester para detalhes de implementação.
Erros comuns de modelos a apanhar
- Etiquetas de merge em falta ou partidas que aparecem como `{{variable}}` em bruto
- Largura do email que excede o viewport móvel
- Espaçamento dos botões demasiado pequeno para alvos táteis
- Modo escuro que inverte cores inesperadamente
- Estrutura MIME multipart em falta
- Problemas de charset no Content-Type
Use o Simulador de Encaminhamento de Email para pré-visualizar o formato bruto do email antes de enviar.
Automatização com a API
Com a API do TempMailito, as equipas de QA podem automatizar testes de modelos:
- criar caixas programaticamente
- acionar envios de email a partir de pipelines de CI
- analisar mensagens recebidas à procura do conteúdo esperado
- capturar imagens da renderização HTML para regressão visual
Ferramentas úteis:
Notas de segurança
As caixas temporárias são ideais para QA de modelos, staging e testes de regressão visual. Não as use para envios de produção, dados de subscritores ou fluxos críticos de conformidade.
Em resumo
Os testes de modelos de email são essenciais para a entregabilidade e a experiência do utilizador. As caixas temporárias tornam fácil testar renderização, variáveis e comportamento entre clientes sem risco para dados pessoais.