Documentação do QA Proof

Tudo o que você precisa para instalar o QA Proof no seu site, executar seu primeiro teste e ler os resultados. O caminho mais rápido é o plugin do WordPress — a maioria dos usuários nunca precisa mexer diretamente na API.

O que é o QA Proof?

O QA Proof é um serviço hospedado que usa IA para verificar seu site ao vivo em busca de problemas visuais, de layout e de acessibilidade. Você executa testes sob demanda ou agenda um monitor que verifica páginas de forma recorrente e envia um e-mail quando algo muda.

O plugin do WordPress permite gerenciar tudo a partir do seu painel WP: executar testes, ver capturas de tela lado a lado, agendar monitores e baixar relatórios em PDF.

Início rápido

Três passos para o seu primeiro teste:

1. Crie uma conta e escolha um plano

Crie uma conta em qaproof.io/signup. O plano Gratuito oferece 10 gerações de IA como teste vitalício único e 1 monitor — o suficiente para avaliar o produto. Depois de usar todas as 10, é necessário fazer upgrade.

2. Obtenha sua chave de API

Abra qaproof.io/app/api-keys e copie a chave exibida ali. Ela se parece com qap_live_sk_…. Trate-a como uma senha — qualquer pessoa com essa chave pode executar testes usando a cota da sua conta.

3. Instale o plugin do WordPress

Baixe o plugin, faça o upload através de Plugins → Adicionar Novo → Enviar Plugin no seu painel WP e então ative. Abra QAProof → Configurações, cole sua chave de API no campo Configuração da API e clique em Salvar Alterações. O cartão abaixo do campo mostrará o e-mail da sua conta, o plano e o uso de gerações de IA — esse é o sinal de que a conexão está funcionando.

A partir daqui você pode executar um teste avulso (abaixo) ou configurar um monitor recorrente (abaixo).

Plugin: Instalar e conectar

1. Faça o upload do .zip do QAProof via Plugins → Adicionar Novo → Enviar Plugin, e então clique em Ativar. Um novo menu QAProof aparece na barra lateral do WP.
2. Abra QAProof → Configurações, cole sua chave de API e clique em Salvar Alterações.
3. Clique em Testar Conexão — você deve ver "Conectado! Status da API: ok".

Plugin: Executar um teste

Abra QAProof → Testes, e então:

1. Escolha um tipo de teste — Fidelidade de Design, Responsivo, Regressão Visual, Acessibilidade ou Auditoria de Design. Veja Tipos de Teste para saber o que cada um verifica.
2. Insira a URL da página que você deseja verificar.
3. Para Fidelidade de Design, cole também uma URL do Figma ou faça upload de uma imagem.
4. Clique em Executar Teste. Tempo total de execução: 30 a 90 segundos.

Quando terminar, você verá a pontuação, um resumo, todos os problemas detectados com etiquetas de severidade e uma visualização lado a lado das capturas de tela. Cada resultado é salvo automaticamente no Histórico de Testes.

Plugin: Configurar um monitor

Um monitor executa um teste de Regressão Visual contra uma baseline salva em um cronograma (diário, semanal ou mensal) e envia um e-mail caso a página divirja.

1. Abra QAProof → Monitores → clique em Adicionar Monitor.
2. Insira a URL da página, o cronograma e o e-mail de notificação.
3. Clique em Criar — o plugin captura a primeira captura de tela como baseline.
4. Cada execução agendada a partir de agora compara a página ao vivo com essa baseline. Se a pontuação cair abaixo do seu limite, você recebe um e-mail com um botão Baixar Relatório Completo.

Plugin: Histórico de testes e relatórios em PDF

Cada teste que você executa — manual ou agendado — é salvo em QAProof → Testes → Histórico de Testes. A partir daí você pode:

• Reabrir um resultado e inspecionar as capturas de tela, diferenças e recomendações.
• Baixar um relatório em PDF com a análise completa — o mesmo formato do arquivo vinculado nos e-mails de notificação.

Fidelidade de Design

Compara sua página ao vivo com um design do Figma (ou uma imagem enviada) e informa onde a implementação se desviou do design. Retorna uma pontuação de 0 a 100 e divide a diferença em Layout, Cores, Tipografia, Espaçamento e Componentes.

Use quando: um desenvolvedor acabou de publicar uma nova página e você quer confirmar se ela corresponde ao design aprovado antes de anunciar o lançamento.

Responsivo

Captura a mesma página em três viewports — desktop (1440×900), tablet (768×1024) e mobile (375×812) — e sinaliza problemas de layout específicos de cada um, como rolagem horizontal no mobile, textos sobrepostos ou CTAs ocultos.

Use quando: você fez alterações de CSS ou de layout e quer uma leitura rápida sobre se mobile/tablet ainda funcionam.

Regressão Visual

Compara a página atual com uma captura de tela previamente aprovada (a baseline) e informa quaisquer diferenças de pixel/texto/estilo. Pontuação 100 = nada mudou; pontuações menores = diferenças reais detectadas.

Usado tanto como um teste avulso quanto como o motor por trás dos monitores.

Use quando: você quer detectar mudanças não intencionais — um deploy que quebrou uma seção sem querer, uma atualização do CMS que alterou a página inicial ou imagens ausentes.

Acessibilidade

Audita sua página em relação à WCAG 2.1 (nível configurável: A, AA ou AAA). Sinaliza barreiras do mundo real: contraste de cores insuficiente, texto alternativo ausente, hierarquia de títulos quebrada, alvos de toque pequenos demais, rótulos de formulário ausentes, indicadores de foco que desaparecem ao passar o mouse, etc.

Use quando: você precisa verificar a acessibilidade antes de publicar ou relatar a conformidade a uma parte interessada.

Auditoria de Design

Inspeciona seu design system no nível da página: quantas cores, fontes, estilos de botão e valores de espaçamento distintos são realmente usados. Identifica cores quase duplicadas, valores fixos no código que deveriam ser variáveis CSS e componentes inconsistentes. Gera um Design Debt Score.

Use quando: sua base de código cresceu de forma orgânica e você quer uma leitura quantificada do desvio do design system.

Planos e limites

Os planos pagos (Pro / Business / Scale) têm limites mensais de gerações de IA que são redefinidos a cada ciclo de cobrança. O plano Gratuito é um teste vitalício único — 10 gerações no total, nunca redefinido. Veja Preços para detalhes completos sobre o que cada plano inclui.

Solução de problemas: "Falha na captura da baseline"

Se a criação da baseline falhar, algumas imagens da sua página não carregaram durante a captura de tela. Isso geralmente acontece quando o site limita temporariamente nossas requisições. Aguarde 1 a 2 minutos e tente novamente.

Solução de problemas: "A captura parece instável"

Se você vir uma pontuação de 100 com a mensagem "A captura parece instável", isso significa que a página tem elementos dinâmicos (como carrosséis de imagens ou animações) que foram renderizados de forma diferente entre as capturas. Basta reexecutar o teste — geralmente funciona na segunda tentativa.

Solução de problemas: "Você atingiu o limite do seu teste gratuito"

Os usuários do plano Gratuito veem isso assim que usam suas 10 gerações do teste vitalício. O plano Gratuito não é redefinido mensalmente — faça upgrade em Faturamento para continuar executando testes. Os planos pagos não são bloqueados — o excedente é cobrado no fim do período.

Solução de problemas: o plugin do WP mostra o plano errado

Se o plano exibido no plugin não corresponder ao que você vê no qaproof.io, a chave de API no plugin provavelmente pertence a uma conta diferente daquela em que você está logado no site. Verifique novamente o endereço de e-mail exibido sob o campo Chave de API no plugin — essa é a conta a que a chave pertence.

Precisa de ajuda?

• Navegue pela Central de Ajuda para guias passo a passo com capturas de tela.
• Envie um e-mail para support@qaproof.io — planos pagos recebem resposta prioritária.