Monitoramento visual de páginas
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. Diferenças relevantes marcam a verificação como mudança detectada, e o registro fica disponível pela API para o seu sistema consultar. Os prints funcionam também como evidência histórica: quando alguém pergunta desde quando o site está daquele jeito, existe resposta com data.
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.
Preço
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. Sem assinatura: monitoramento encerrado é gasto encerrado no mesmo instante.
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?
As capturas ficam associadas às verificações para permitir a comparação e a consulta do histórico pela API. São páginas públicas, capturadas como qualquer visitante as veria.
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.
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.
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
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
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 '{"input":"…"}'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({
"input": "…"
})
});
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={
"input": "…"
},
)
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" => '{"input":"…"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"input":"…"}`)
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
{
"input": "…"
}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. |