vitorbritto/responsive-test.md

## responsive-test.md

      
    Raw
  

              responsive-test.md
            
          
    Teste para projetos responsivos

Problema

Testar/verificar a disposição dos elementos de uma determinada página em determinadas resoluções de tela.
Solução

Executar captura de telas de acordo com os viewports definidos em um script, com a ajuda do PhantomJS.

Necessário ter o NodeJS instalado.

Passo 1: instalação do PhantomJS através do NPM ou Brew:
NPM

$ sudo npm install -g phantomjs
Brew

$ brew update && brew install phantomjs
Passo 2: instalação dos módulos async e system no diretório do projeto.
// vá até o diretório do projeto e execute os comandos abaixo
$ npm install async
$ npm install system
Passo 3: criação do script responsável pelas capturas de telas.
/*
 * Necessários: phantomjs, async e system
 * Uso: phantomjs capture.js <dist> <project> <url>
 * 
 * Onde:
 * <dist>    : pasta destino (ex.: ./screenshoots).
 * <project> : nome do projeto .
 * <url>     : a URL que será avaliada para capturas de telas.
 * 
 */
var async   = require("async"),
    system  = require('system'),
	dist    = system.args[1],
    project = system.args[2],
    url     = system.args[3],
    sizes   = [         // Resoluções
        [320, 480],     // 320x480   - iPhone (portrait)
        [480, 240],     // 480x240   - iPhone (landscape)
        [320, 568],     // 320x568   - Android
        [768, 1024],    // 768x1024  - iPad (portrait)
        [1024, 768],    // 1024x768  - iPad (landscape) e Desktops
        [1280, 800],    // 1280x800  - Common Desktops
        [1440, 900],    // 1440x900  - Desktops mais recentes
        [1660, 1050]    // 1660x1050 - Tela grande
    ];

function capture(sizes, callback) {
    var page = require("webpage").create();
    page.viewportSize = {
        width: sizes[0],
        height: sizes[1]
    };
    page.zoomFactor = 1;
    page.open(url, function (status) {
        var savedir = url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, ''),
            filename = project + "_" + sizes[0] + "x" + sizes[1] + ".png";
        page.render("./" + dist + "/" + savedir + "/" + filename); // Diretório das telas capturadas
        page.close();
        callback.apply();
    });
}

async.eachSeries(sizes, capture, function (e) {
    if (e) console.log(e);
    console.log("Captura de telas realizada com sucesso!"); // Mensagem de sucesso!
    phantom.exit();
});

Passo 4: salve o script na pasta raiz do seu projeto como capture.js
Passo 5: abra o seu terminal e execute dentro do diretório do seu projeto o comando phantomjs capture.js <dist> <project> <url>
Passo 6: confira as telas capturadas na pasta definida através do primeiro argumento da linha de comando. =D
===
Exemplo de uso:
$ phantomjs capture.js telas meu-projeto http://www.capturar-telas-desta-url.com.br