Nesse artigo vou mostrar rapidamente como tirar um Print Screen da página inicial de seu site utilizando diversos dispositivos. Algo que pode facilitar e muito a vida caso esteja desenvolvendo uma página responsiva.
Nesse exemplo vamos utilizar o NodeJS e o Selenium 2. As outras dependências necessárias estão especificadas no arquivo package.json. Arquivo que é usado para fornecer ao gerenciador de pacotes NPM, informações de como lidar com as dependências do projeto, a descrição do projeto, a licença utilizada, dentre outras.
Para facilitar nossa vida, utilizaremos um serviço de Cloud do SauceLabs. Esse serviço permite utilizar diversos tipos de navegadores. Logo, logo estarei escrevendo outros artigos, mostrando outros tipos de serviços parecidos, como por exemplo o BrowserStack. Todos esses serviços de Cloud fornecem uma chave de acesso. Para criar uma conta, basta acessar a página de cadastro e preencher o formulário. Posso te assegurar que o cadastro é simples e rápido.
Tendo a chave de acesso em mãos, vamos executar o seguinte script. Magicamente teremos um printscreen da página inicial do site do Tableless:
Esse script utiliza como padrão a última versão do navegador Chrome. Para utilizar outros navegadores, especificaremos via parâmetros direto no Terminal. Os detalhes de cada parâmetro são obtidos utilizando –help. Existe uma lista com centenas de navegadores e dispositivos, os quais podem ser vistos no seguinte link. Segue abaixo dois exemplos de como visualizar o site do Tableless em um tablet com Android e em um iPhone:
O resultado é ilustrado na imagem abaixo.
Caso se interessem e queiram modificar o script utilizado acima, fiquem a vontade. Para um melhor entendimento do script, deem uma lida nos seguintes artigos: (i) Introdução de como executar testes unitários em diferentes tipos de navegadores e (ii) JavaScript de forma assíncrona e legível. Espero que tenham gostado. Até a próxima.
