Crie capturas de tela de páginas da Web com o Node.js e o PhantomJS

A automação na Web tornou-se incrivelmente acessível e avançada, em grande parte devido a utilitários como PhantomJS. O PhatomJS permite que o senhor faça testes de renderização do WebKit sem cabeça, monitoramento de rede, automação de páginas e muito mais. Uma das tarefas simples para as quais gosto de usar o PhatomJS é a criação de capturas de tela. Claro que eu poderia usar outro serviço ou outro utilitário, mas o PhantomJS é tão flexível e fácil de usar que não há necessidade de procurar em outro lugar!

Como criar uma captura de tela

Supondo que você tenha baixado o PhatomJS, crie um arquivo JavaScript (screenshot.js por exemplo) com o seguinte conteúdo:

var page = require('webpage').create();
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog.png');
  phantom.exit();
});

Com esse script criado, abra sua ferramenta de linha de comando e execute o seguinte:

phantomjs screenshot.js

Isso é tudo o que é preciso para criar uma captura de tela de um site!

Definição do tamanho da tela

O PhantomJS também facilita a configuração do tamanho da janela de visualização, com apenas uma configuração a ser alterada:

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open('https://davidwalsh.name/', function() {
  page.render('davidwalshblog1920.png');
  phantom.exit();
});

Modificar os tamanhos de configuração é bom para que o senhor possa automatizar rapidamente diferentes tamanhos de consulta de mídia com base nas especificações do seu site!

A cada poucas semanas, faço capturas de tela do meu site para garantir que não fiz nenhuma alteração de design que tenha prejudicado algum dos meus designs. Também usarei essa estratégia para criar capturas de tela de ideias de redesenho. Adoro a facilidade com que a automação desses tipos de tarefas se tornou hoje em dia!