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