Visualizando página responsiva em diversos navegadores

README.md

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 Selinium 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 vamos utilizar um serviço de Cloud do SauceLabs. Esse serviço permite utilizar diversos tipos de navegadores. Logo logo estarei escrevendo outros artigos utilizando outros tipos de serviços 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 script disponibilizado no seguinte gist. E magicamente teremos um print screen da página inicial do site do Tableless:

git clone https://gist.github.com/9875745.git visualizao-pagina-web

npm install

node script.js -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY --url 'http://tableless.com.br/' --screenshot 'printscreen-da-pagina-do-tableless.png'

Esse script utiliza como padrão a última versão do navegador Chrome. Para utilizar outros navegadores é preciso especificar via parâmetros. 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:

node script.js -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY --url 'http://tableless.com.br/' --screenshot 'printscreen-tableless-android.png' -b 'android' -p 'Linux' -v '4.0' --deviceType tablet --deviceOrientation landscape

node script.js -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY --url 'http://tableless.com.br/' --screenshot 'printscreen-tableless-iphone.png' -b 'iphone' -p 'OS X 10.9' -v '7.0'

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.

package.json

{
  "name": "visualizacao-de-pagina-web",
  "version": "0.0.1",
  "description": "Script para visualizacao de pagina web",
  "author": {
    "name": "Igor Ribeiro Lima",
    "email": "lima.igorribeiro@gmail.com",
    "website": "http://github.com/igorlima"
  },
  "keywords": [
    "saucelabs", "testing"
  ],
  "license": "MIT",
  "dependencies": {
    "optimist": "~0.6.0",
    "wd"      : "~0.2.0",
    "async"   : "~0.2.9",
    "extend"  : "~1.2.1",
    "colors"  : "~0.6.2"
  }
}

script.js

var webdriver = require('wd'),
    fs        = require('fs'),
    colors    = require('colors'),
    async     = require('async'),
    optimist  = require('optimist'),
    extend    = require('extend'),

    argv      = optimist
      .usage('Script para visualizacao de pagina web')
      .options('username', {
        'alias'   : 'u',
        'describe': 'Usuario do SauceLabs'
      })
      .options('accesskey', {
        'alias'   : 'k',
        'describe': 'Chave de acesso do SauceLabs'
      })
      .options('help', {
        'alias'   : 'h',
        'describe': 'Ajuda'
      })
      .options('browserNameSL', {
        'alias'   : 'b',
        'default' : 'chrome',
        'describe': "Especifica o tipo do navegador, exemplo: 'internet explorer', 'firefox', 'chrome'"
      })
      .options('versionSL', {
        'alias'   : 'v',
        'default' : '',
        'describe': 'Especifica a versao do navegador'
      })
      .options('platformSL', {
        'alias'   : 'p',
        'default' : 'Linux',
        'describe': "Especifica a plataforma ou sistema operacional, exemplo: 'Linux', 'Windows 7', 'Windows XP', 'OS X 10.6'"
      })
      .options('url', {
        'describe': 'Especifica o endereco a ser visualizado',
        'default' : 'http://www.google.com'
      })
      .options('screenshotFileName', {
        'alias'   : 'screenshot',
        'describe': 'Nome do arquivo do PrintScreen',
        'default' : 'snapshot.png'
      })
      .options('deviceType', {
        'describe': "Especifica o tipo do dispositivo movel, exemplo: 'tablet'"
      })
      .options('deviceOrientation', {
        'describe': "Especifica a orientacao do dispositivo movel, exemplo: 'landscape' ou 'portrait'"
      })
      .string([
        'versionSL', 'v'
      ])
      .argv,

      saveScreenshot = function(data, filename, callback) {
        fs.writeFile(filename, data.replace(/^data:image\/png;base64,/,''), 'base64', callback);
      },
      
      browser = undefined,
      desired = undefined;

if (argv.help) {
  optimist.showHelp();
  process.exit(0);
}

browser = webdriver.remote("ondemand.saucelabs.com", 80, argv.username, argv.accesskey);

browser.on('status', function(info) {
  console.log('\x1b[36m%s\x1b[0m', info.cyan);
});

browser.on("command", function(meth, path, data) {
  console.log(' > \x1b[33m%s\x1b[0m: %s', ' < ' + meth.yellow, path.cyan, ('' + (data || '')).grey);
});

desired = {
  'browserName': argv.browserNameSL,
  'version'    : argv.versionSL,
  'platform'   : argv.platformSL,
  'device-type': argv.deviceType,
  'device-orientation': argv.deviceOrientation,
  'public'     : 'public'
}

async.waterfall([
  function(callback_navegador_aberto) {
    browser.init(desired, callback_navegador_aberto);
  },
  function(id_da_sessao, recursos_webdriver, callback_pagina_aberta) {
    browser.get(argv.url, callback_pagina_aberta);
  },
  function(callback_screenshot) {
    browser.takeScreenshot(callback_screenshot);
  },
  function(screenshot, callback_arquivo_salvo) {
    saveScreenshot(screenshot, argv.screenshotFileName, callback_arquivo_salvo);
  },
  function(callback_navegador_fechado) {
    browser.quit(callback_navegador_fechado);
  }
], function(err){
  err ? console.log('algum erro ocorreu'.red, err) : console.log('PrintScreen tirado com sucesso!!!'.green);
  err && browser.quit();
});