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 node e o npm instalados

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

$ sudo npm install -g phantomjs

$ brew update && brew install phantomjs

Passo 2: instalação dos módulos async e system no diretório do projeto.

$ 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 http://www.enderecoqualquer.com.br
 */
var async   = require("async"),
    system  = require('system'),
    url     = system.args[1],
    project = "nome_do_projeto", // Defina o nome do projeto
    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("./screenshots/" + 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 http://www.enderecoqualquer.com.br

Passo 6: confira as telas capturadas na pasta definida no seu script. =D

alexfigueiredo/responsive-test.md

Teste para projetos responsivos

Solução