Na semana passada, apresentei o PhantomJS, uma ferramenta WebKit sem cabeça, que permite fazer capturas de tela, automatizando eventos na página e assim por diante. O PhantomJS é uma excelente ferramenta que faz muitas coisas, mas o fato de estar preso ao mecanismo WebKit não ajuda se o senhor quiser testar outros mecanismos de renderização, como o Firefox. Mais mecanismos, mais problemas.
Felizmente SlimerJS existe. O SlimerJS é muito parecido com o PhantomJS: um sistema de automação baseado em promessas que usa o mecanismo de renderização Gecko do Firefox em vez do WebKit. Vamos dar uma olhada em como automatizar a criação de capturas de tela usando o SlimerJS!
Como criar uma captura de tela
O SlimerJS é baseado em Node.js, portanto, o senhor escreverá o código de captura de tela com JavaScript:
var webpage = require('webpage').create();
webpage
.open('https://davidwalsh.name')
.then(function(){
webpage.render('dwb.png', { onlyViewport: true });
slimer.exit()
});
Com seu script escrito, o senhor executará:
slimerjs take-screenshot.js
O SlimerJS tem sua própria ferramenta de linha de comando, que o senhor obterá durante a instalação.
Definição do tamanho da tela
O SlimerJS, assim como o PhatomJS, permite definir a janela de visualização para que o usuário possa fazer capturas de tela em qualquer tamanho:
var webpage = require('webpage').create();
webpage
.open('https://davidwalsh.name')
.then(function(){
webpage.viewportSize = { width: 1042, height: 768 };
webpage.render('dwb.png', { onlyViewport: true });
slimer.exit()
});
… o que também é importante para os testes do Firefox em dispositivos móveis. Recomendo a configuração de um script para tirar capturas de tela em todos os tamanhos populares quando o senhor entregar projetos a um cliente ou simplesmente quiser verificar a integridade do seu site!
