Monitoramento visual de páginas
Pegue a página de checkout que virou texto sem estilo ou a imagem principal quebrada, mesmo quando o texto da página continua idêntico. Cada checagem exibe a página como um visitante a veria, compara com a última captura e avisa se o visual mudou. Você paga por checagem, sem assinatura.
Esse monitor abre a página num navegador real em horários agendados, tira um print e compara a imagem com a da verificação anterior. Quando a aparência muda — layout quebrado, banner sumido, elemento fora do lugar —, a mudança fica registrada. Está em beta. É a vigilância do que o olho vê.
Quando o visual conta mais que o código
Tem defeito que nenhuma comparação de HTML pega: a folha de estilos que não carregou e deixou o site pelado, a fonte que virou serifa genérica, o banner da campanha que sumiu do carrossel, o botão de compra empurrado para fora da tela por um aviso. O código pode estar idêntico — e a página, irreconhecível. O monitoramento visual compara o que o visitante enxerga, que é a única camada em que esses desastres existem.
Como funciona por baixo
Em cada verificação, um navegador real carrega a página com JavaScript executado (limite de 30 segundos), captura a imagem e a compara com a captura anterior. Não é um diagnóstico do que mudou nem um álbum de prints para baixar: é o sinal de que a página mudou de aparência desde a última verificação, com data e hora.
Beta: calibrando o que é mudança
A parte difícil do monitoramento visual é quase filosófica: nem toda diferença de pixels é problema. Carrossel que gira, anúncio que troca, vídeo em destaque — tudo isso muda a imagem sem que nada esteja errado. Em beta, páginas com muito conteúdo dinâmico podem gerar detecções em excesso.
A recomendação prática: comece por páginas visualmente estáveis (checkout, página institucional, landing de campanha) e acompanhe os primeiros dias antes de confiar cegamente no sinal.
Casos de uso
Agência que dorme melhor
Uma agência mantém 15 sites de clientes em plataformas variadas. Depois que uma atualização de plugin desmontou o site de um cliente numa sexta à noite — e ninguém viu até segunda —, o monitoramento visual diário virou padrão: site desfigurado agora aparece no registro da manhã seguinte, com print de prova.
Checkout sob vigília
Num e-commerce, a página de pagamento é onde o defeito visual custa mais caro. O monitor captura o checkout toda madrugada; um selo de segurança que sumiu ou um botão desalinhado aparecem na comparação antes de derrubarem a conversão da semana.
O site institucional que ninguém abre
A Padaria Pão Dourado tem um site simples, feito por um sobrinho que hoje mora fora. Ninguém da padaria abre o próprio site — os clientes, sim. O monitoramento visual semanal custa centavos e garante que, se o site quebrar, a dona fica sabendo pelo registro, não por um cliente no balcão.
Perguntas frequentes
Qual a diferença para monitorar o conteúdo da página?
O monitoramento de conteúdo compara o que está escrito; o visual compara o que se vê. CSS quebrado, imagem que some e layout desmontado só aparecem na comparação visual — o texto da página continua idêntico.
Carrossel e banner rotativo vão disparar detecção toda hora?
Podem, e essa é a limitação honesta do beta: conteúdo que gira muda a imagem sem haver defeito. Prefira páginas visualmente estáveis, ou trate as primeiras detecções como calibragem antes de confiar no sinal.
Os prints ficam guardados?
A última captura fica guardada apenas para comparar com a verificação seguinte; não há um álbum de prints antigos para consultar. São páginas públicas, capturadas como qualquer visitante as veria.
Por que está em beta?
Porque separar mudança relevante de variação normal é o desafio central da comparação visual, e essa calibragem continua evoluindo. Casos reais reportados por quem usa são o que afina o filtro.
Preciso instalar algo no meu site?
Nada. O monitor visita a página por fora, como um visitante — não há script para incluir, plugin para instalar nem acesso para conceder.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Um POST autenticado cria a tarefa; o resultado chega por webhook ou por um link assinado. Esta capacidade está disponível pela API, não como ferramenta web interativa.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/web/monitor-visual \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com"}'const res = await fetch("https://api.kit.forhosting.com/web/monitor-visual", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "https://example.com"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/monitor-visual",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "https://example.com"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/monitor-visual", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"https://example.com"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://example.com"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/monitor-visual", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"url": "https://example.com"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.monitor_visual",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
422 | task_failed | A tarefa falhou do nosso lado. Você não paga nada por ela. |
Notas técnicas
Como funciona por baixo
Se a aparência mudou, a verificação é marcada como mudança detectada e o aviso fica disponível pela API para o seu sistema consultar.
Preço
Sem assinatura: monitoramento encerrado é gasto encerrado no mesmo instante. O custo é US$ 0,040 por solicitação mais US$ 0,001 por verificação — na prática, cerca de US$ 0,041 por captura, porque cada verificação envolve um navegador real, e preferimos publicar esse custo a escondê-lo. Vigiar a home e o checkout de uma loja com uma verificação diária em cada página fica em torno de US$ 2,46 por mês.
Perguntas técnicas
Quanto custa na prática?
US$ 0,040 por solicitação mais US$ 0,001 por verificação — cerca de US$ 0,041 por captura. Verificação diária de uma página: US$ 1,23 por mês, sem plano nem fidelidade.