full-page-screenshot

Visão geral da skill full-page-screenshot

O que a full-page-screenshot faz

full-page-screenshot é uma skill de Browser Automation para capturar uma página web inteira em um único PNG, incluindo o conteúdo abaixo da dobra. Ela é construída em torno de um script Node.js independente que se comunica com o Chrome pelo Chrome DevTools Protocol, então consegue lidar com páginas longas, conteúdo carregado sob demanda, single-page apps e páginas em que um screenshot comum da viewport deixaria a maior parte do conteúdo de fora.

Usuários e casos de uso mais indicados

Instale esta skill se você precisa que um agente de IA gere screenshots de página inteira com confiabilidade durante QA, revisão visual, documentação, auditorias de design, relatórios de bug, pesquisa competitiva ou walkthroughs autenticados de produto. Ela é especialmente útil quando a página de destino já está aberta no Chrome, porque a skill consegue listar as abas disponíveis e capturar a aba selecionada sem pedir que o usuário refaça o estado de login.

Principais diferenciais

O principal valor da skill full-page-screenshot é a confiabilidade operacional: ela usa diretamente o Chrome DevTools Protocol, não tem dependências de pacotes externos além de Node.js 22+ e Chrome/Chromium, e oferece suporte tanto à captura de abas existentes quanto à captura por URL. O fluxo com aba existente é o diferencial importante para dashboards autenticados, ambientes de staging e páginas protegidas por SSO.

Restrições de adoção para verificar primeiro

Antes de instalar, confirme que seu ambiente consegue executar Node.js 22+ e que a depuração remota do Chrome está disponível. A skill não é uma API hospedada de screenshots e não contorna autenticação, CAPTCHAs, restrições de rede local, banners de cookies nem páginas que bloqueiam automação intencionalmente. Ela funciona melhor quando o usuário consegue abrir a página normalmente no Chrome e deixar o agente capturá-la a partir dali.

Como usar a skill full-page-screenshot

Instalação e verificação de prontidão da full-page-screenshot

Instale a skill a partir do caminho do repositório:

npx skills add alirezarezvani/claude-skills --skill full-page-screenshot

Depois da instalação, comece por SKILL.md e, em seguida, inspecione scripts/full-page-screenshot.mjs. O script é a camada de execução, então vale a pena lê-lo antes de usar a skill em um ambiente restrito ou parecido com CI.

Execute a verificação de prontidão:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check

Se a depuração do Chrome não estiver disponível, abra chrome://inspect/#remote-debugging e habilite a depuração remota para a instância do navegador, ou inicie o Chrome/Chromium com uma porta de depuração conforme a política local.

Uso de aba existente para páginas logadas

Para páginas autenticadas, painéis administrativos ou qualquer coisa que dependa da sua sessão atual no navegador, use o fluxo de aba existente. Primeiro liste as abas abertas:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list

Encontre a aba pelo título ou pela URL e capture-a:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1

Isso evita a perda de cookies de sessão e normalmente é mais confiável do que abrir uma URL nova em segundo plano. Use uma largura que corresponda ao breakpoint de design que você quer revisar, como 390 para um layout parecido com mobile, 768 para tablet ou 1200/1440 para desktop.

Uso por URL para páginas públicas

Para páginas públicas, documentação, páginas de marketing ou páginas que não exigem login, use o modo por URL:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000

Aumente --wait quando a página depender de renderização atrasada, roteamento no cliente, conteúdo disparado por analytics ou seções carregadas sob demanda. Mantenha --dpr 1 para tamanhos de arquivo práticos e revisão mais rápida; use um DPR maior apenas quando a densidade de pixels for mais importante que o tamanho do arquivo de saída.

Padrão de prompt para uma invocação melhor

Um prompt fraco seria: “Tire um screenshot desta página.” Um prompt mais forte para usar a full-page-screenshot inclui URL ou contexto da aba, estado de autenticação, largura da viewport, necessidade de espera e caminho de saída:

Use the full-page-screenshot skill to capture the already-open Chrome tab for staging.example.com/dashboard. I am logged in. Use desktop width 1440, DPR 1, wait long enough for lazy charts to render, and save the PNG to /tmp/dashboard-full-page.png. If multiple matching tabs exist, list them first and ask me which target ID to use.

Isso dá ao agente informação suficiente para escolher entre --list, captura de aba existente e modo --url sem precisar adivinhar.

FAQ da skill full-page-screenshot

A full-page-screenshot é melhor que um prompt comum de screenshot?

Sim, quando o requisito é capturar a página completa, e não apenas a viewport visível. Um prompt genérico pode depender do recurso de screenshot que o ambiente expõe, muitas vezes gerando apenas a tela atual. A skill full-page-screenshot dá ao agente um fluxo específico baseado em CDP, uma estrutura de comandos e um caminho alternativo para abas que já estão abertas.

Iniciantes conseguem usar esta skill?

Sim, desde que consigam instalar skills e executar o Chrome com a depuração remota habilitada. Os comandos são diretos, mas a configuração é mais técnica do que uma extensão de navegador. Iniciantes devem começar com --check, depois --list e então capturar uma aba existente antes de tentar o modo por URL.

Quando eu não devo usar esta skill?

Não use esta skill quando você precisa de monitoramento agendado de screenshots, comparação de renderização entre navegadores, diff de screenshots, OCR, exportação para PDF ou execução em nuvem em escala. Esta skill captura screenshots PNG a partir do Chrome/Chromium; ela não substitui suítes de teste Playwright, plataformas de regressão visual nem APIs hospedadas de screenshot.

Ela funciona em fluxos de Browser Automation?

Sim. full-page-screenshot for Browser Automation é uma ótima opção quando um agente precisa de uma etapa de captura determinística depois de navegar, fazer login, aplicar filtros ou aguardar um estado da interface. Ela é mais útil como ferramenta final de captura dentro de um fluxo de navegador mais amplo, não como um framework completo de navegação ou testes por si só.

Como melhorar a skill full-page-screenshot

Melhore os inputs da full-page-screenshot

Inputs melhores geram screenshots melhores. Especifique o estado da página, não apenas o endereço: conta logada, filtros selecionados, estado de modal, largura da viewport, elementos que devem estar carregados e nome do arquivo de saída. Se a página for dinâmica, indique o elemento ou a seção que precisa estar visível antes da captura para que o agente saiba quando uma espera maior ou uma confirmação manual é necessária.

Reduza falhas comuns de captura

Os bloqueios mais comuns são a depuração remota do Chrome não estar habilitada, escolher o modo por URL para páginas que exigem login, capturar antes que o conteúdo carregado sob demanda termine de aparecer e usar a largura de viewport errada. Corrija isso executando --check, preferindo o modo de aba existente para páginas autenticadas, aumentando --wait para SPAs públicas e ajustando --width ao layout que você realmente quer inspecionar.

Itere depois do primeiro PNG

Revise a primeira saída procurando conteúdo final ausente, cabeçalhos fixos cobrindo seções, banners de cookies, imagens não carregadas ou um layout responsivo inesperado. Depois, execute novamente com outra largura, uma espera maior ou uma aba já preparada. Se aparecer um banner de cookies ou um modal, feche-o primeiro no Chrome e capture a aba existente, em vez de depender de uma URL nova em segundo plano.

Leia o script antes de estender

Se quiser personalizar a skill, leia scripts/full-page-screenshot.mjs antes de editar prompts. O script controla a descoberta de abas, a largura da viewport, o DPR, o comportamento de espera e a captura via CDP. Melhorias úteis podem incluir mensagens de erro mais claras, estratégias adicionais de espera, convenções de nomeação de saída ou tratamento opcional de CSS para ocultar sobreposições fixas quando o seu fluxo permitir.