Testes automatizados para layouts visuais responsivos

Hoje o assunto é teste. Em 2015, muitos desenvolvedores conhecem o TDD e eu, pessoalmente, acho que o teste é um dos principais fatores para produtos de qualidade. Mas e quanto aos testes em um ambiente de front-end? Como os senhores escrevem seus testes para uma página responsiva ou para um layout específico? Como os senhores sabem se um layout quebra ou não sem a verificação do navegador?

Ninguém sabe. (Pelo menos a maioria dos desenvolvedores front-end…)

Hoje encontrei a resposta e ela se chama Estrutura Galen. Podemos escrever uma especificação que descreva o layout de uma determinada página e, em seguida, a estrutura executará testes com base nessa especificação. Vamos ver juntos como podemos usar isso.

Este artigo é uma visão diferente do grande artigo Desenvolvimento orientado por testes visuais para design de interface responsivo escrito pelo autor do Galen Framework, Ivan Shubin. Gostaria de compartilhar minha opinião pessoal sobre essa estrutura e como ela pode ser usada hoje em dia em uma visão geral rápida.

Sobre a Galen Framework

Não vou me aprofundar em como essa estrutura funciona, mas o Galen foi projetado para testar a capacidade de resposta em mente.

É muito fácil de usar e a ideia principal é que Galen teste a localização dos objetos relativamente entre si.

Quando todos os testes são concluídos, o Galen fornece um relatório limpo com os testes aprovados e reprovados. O arquivo de relatório pode ser aberto em um navegador e o Galen fornece algumas capturas de tela quando um teste falha.

Filosofia de teste:

Não sou especialista no conceito de TDD, mas tenho algumas noções. Devemos sempre escrever nossos testes antes de começar a codificar. Um teste é como a especificação do produto ou de uma determinada funcionalidade e é por isso que escrevemos nosso teste de especificação antes de escrever o código.

Inicialização:

Para o exemplo, criaremos uma amostra rápida de HTML que fornece uma caixa com um texto de introdução e dois botões projetados com uma metodologia mobile-first em mente.

O cenário que projetaremos é apenas uma maneira rápida de ver como o Galen funciona para que o senhor tenha uma compreensão geral desse produto.

Testaremos essa amostra em dois ambientes: Celulares & Tablets.

Visualização do cenário testado.

1 – Estrutura de pastas

Aqui está a estrutura de pastas que precisamos ter:

automated-tests/
|
|--- page/
|      |--- css/
|            |--- normalize.css       /* 1 */
|            |--- main.css            /* 2 */
|      |--- example.html              /* 3 */
|--- galen/
|      |--- reports/                  /* 4 */
|      |--- specs/
|            |--- spec-example.spec   /* 5 */
|      |--- tests/
|            |--- test-example.test   /* 6 */

1. CSS reset, o senhor pode obtê-lo em http://necolas.github.io/normalize.css/
2. Arquivo CSS usado em example.html, vazio nesta etapa.
3. Exemplo de página HTML. Nosso cenário e página testada, vazia neste estágio.
4. Diretório de relatórios. O Galen gerará todos os relatórios aqui.
5. Specification file (Arquivo de especificação), é aqui que escrevemos nossos testes, vazio nesta etapa.
6. Arquivo Test Suite, onde escrevemos o que esperamos que o Galen teste, vazio neste estágio.

2 – Galen Install

Para podermos executar nossos testes, precisaremos do Galen 1.6+ instalado em nossa máquina. Basta seguir as instruções no site do página de instalação do Galen.

Configuração de testes:

Na primeira etapa, precisamos escrever um arquivo de teste de especificação. Galen seguirá essas instruções durante os testes.

Então, vamos preencher o spec-example.spec com esse conjunto de códigos:

==================================================
login-box         css           .login-box
sign-up           css           .buttons .sign-up
sign-in           css           .buttons .sign-in
==================================================
@ mobile
-------------------
login-box
    width: 100 % of screen/width
sign-up
    above: sign-in
@ tablet
-------------------
login-box
    width: 500 px of screen/width
sign-up
    aligned horizontally all: sign-in

Explicações sobre o código:

As três primeiras linhas que declaramos são a Definição de objeto, onde vinculamos nossos elementos DOM ao Galen. Em seguida, declaramos nossa especificação de teste seguindo a linha Documentação do Galen.

Em um inglês simples, nós declaramos:

• Quero que a largura da caixa de login seja 100% da área de visualização no caso de dispositivos móveis.
• Quero que o botão “Sign Up” fique localizado acima do botão “Sign In” no caso do celular.
• Quero que a largura da caixa de login seja 500px da janela de visualização no caso do Tablet.
• Quero que os botões “Sign Up” e “Sign In” sejam alinhados horizontalmente no caso do Tablet.

O Galen também precisa de um arquivo Test Suite para executar o teste que acabamos de escrever. É como uma configuração antes de executar o teste. Precisamos indicar onde nosso ambiente de trabalho está hospedado e o que significa “Mobile” e “Tablet”. Esse arquivo Test Suite será chamado de um terminal para executar nossos testes.

Aqui está o conjunto de testes que devemos escrever para o test-example.test arquivo:

@@ Set
    page_name       example.html
    page_url        http://localhost/automated-tests/page/${page_name}
    page_spec_url   ../specs/spec-example.spec
@@ Parameterized
    | viewport  | size      |
    | mobile    | 320x480   |
    | tablet    | 768x1024  |
${page_name} ${viewport} viewport ${full_name}
    ${page_url} ${size}
        check ${page_spec_url} --include "${viewport}"

Explicações sobre o código

• O arquivo Test Suite pode ser criado de várias maneiras diferentes. O senhor pode encontrar todos os detalhes na página página Sintaxe do Galen Test Suite.
• As primeiras linhas são como variáveis, definimos o nome da página que queremos testar e o URL absoluto onde a página testada está hospedada. Na minha configuração pessoal, hospedei meu diretório atual em um servidor local, portanto, o senhor precisará atualizar a instrução page_url. Também fornecemos o URL onde está localizado o arquivo de especificação que acabamos de criar.
• Em seguida, declaramos o tamanho de nossas viewports, que é relativo ao nosso arquivo de especificação.
• Por fim, as últimas 3 linhas de código indicam que Galen deve executar o teste. (Será invocado um loop para cada viewport declarada).

Configuração de exemplo de código

Como temos nossa especificação de teste e o Galen instalados, criaremos um cenário simples com base no exemplo que temos no #Inicialização parte.

Então, vamos criar o example.html com alguns arquivos HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="https://davidwalsh.name/css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="login-box">
        <h1 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
        <p class="desc">Modi recusandae similique dolor reprehenderit, vel! Recusandae ipsa dolore dignissimos aliquid deserunt exercitationem!</p>
        <div class="buttons">
            <a href="#" class="btn btn-success sign-up" title="Sign up">Sign up</a>
            <a href="#" class="btn btn-success sign-in" title="Sign in">Sign in</a>
        </div>
    </div>
</body>
</html>

…e depois adicionar algumas CSS (arquivo main.css):

/* Main CSS
---------------------------------------*/
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.login-box {
    padding:20px;
    margin-top:50px;
    background-color: #337AB7;
    border-radius: 6px;
}
.login-box .title,
.login-box .desc {
    margin-bottom:8px;
    color:#FFF;
    font-weight:normal;
}
.login-box .title {
    padding-bottom:8px;
    border-bottom:1px solid #92B3DD;
    font-size:20px;
}
.login-box .desc {
    font-size:12px;
}
.login-box .buttons {
    padding-top:10px;
    text-align: center;
}
.login-box .btn {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    font:normal 14px/1.4 Arial, Verdana, sans-serif;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    border:1px solid transparent;
    text-decoration: none;
}
.login-box .btn-success {
    color: #337AB7;
    background-color: #FFF;
    border-color:#337AB7;
}
/* Medium Breakpoint */
@media all and (min-width:480px){
    .login-box {
        margin:50px auto;
    }
    .login-box .title {
        font-size:24px;
    }
    .login-box .desc {
        font-size:14px;
    }
    .login-box .buttons {
        text-align: left;
    }
    .login-box .btn {
        display:inline-block;
    }
}

Vamos fazer os testes:

Tudo está pronto, portanto, devemos iniciar nossos testes agora. Abra um terminal e vá para o diretório /automated-tests/galen/tests usando cd.

Em seguida, basta digitar o seguinte comando:

galen test test-example.test --htmlreport ../reports

Galen executará os testes no Firefox usando o Selenium, portanto, o senhor precisa ter o navegador Firefox instalado.

(n.b.: Galen também pode executar esses testes em outro navegador, mas o Firefox é o padrão. Esse teste também foi testado em um Mac; para usuários do Windows, os senhores podem ter uma configuração diferente).

Quando o teste é concluído, um relatório é criado no diretório de relatórios. Basta abrir o arquivo report.html e aqui está o que o senhor deve ter:

Depois de ler o relatório, podemos ver que todos os testes não foram aprovados. Se o senhor clicar nos links das páginas, abrirá uma versão mais detalhada de cada teste de viewport.

Aqui está o que o senhor pode ver se clicar em “example.html tablet viewport”:

O que há de errado aqui? 2 testes falharam: Galen diz que nossos botões não estão acima uns dos outros na área de visualização móvel e que a largura da “caixa de login” não é de 500px na área de visualização de tablets.

Galen fornece boas explicações usando nomes de definição de objeto em relatórios quando um teste falhou ou passou. O senhor também pode ter uma boa captura de tela em um pop-up após clicar no teste com falha. Isso mostrará ao senhor o que está errado em um relance.

Agora, vamos corrigir o último teste atualizando nosso main.css arquivo:

.login-box .btn {
    /* display: inline-block; */
    display: block;
}
/* Medium Breakpoint */
@media all and (min-width:480px){
    .login-box {
        max-width: 500px;
        margin:50px auto;
    }
}

(Acabamos de atualizar nosso CSS anterior com essas novas propriedades).

Assim que nossos problemas forem corrigidos, teremos que executar nosso teste novamente para verificar o uso do comando anterior:

galen test test-example.test --htmlreport ../reports

O Galen agora executará o mesmo teste de antes, mas nosso CSS está atualizado. Um novo relatório criado substituirá o anterior.

Agora, todos os nossos testes foram aprovados:

Nesta etapa, apenas o Firefox foi testado, mas o Galen pode ser iniciado em diferentes navegadores usando o Selenium. Ele também pode ser executado com o BrowserStack que é uma ótima notícia para executar seus testes em dispositivos reais.

Conclusão:

A execução de testes automatizados em um ambiente de front-end deve ser um novo hábito e, depois de experimentar o Galen, eu realmente gostei. Mas certifique-se de não escrever muitos detalhes em seu arquivo de especificação. À primeira vista, pode ser muito útil escrever testes, mas pode facilmente se tornar um pesadelo para a manutenção.

Na minha opinião pessoal, eu o usaria para as linhas principais de um projeto, como o layout global de uma determinada página ou quando um recurso realmente precisa de um layout específico.

Eu recomendaria usar o Galen além de seus testes diários, pois ele é apenas mais uma segurança antes de entrar em produção. Mas não se esqueça de testar você mesmo.

Este artigo foi um exemplo muito rápido do que o senhor pode conseguir hoje usando testes automatizados para layouts responsivos visuais. Juntamente com um executor de tarefas de automação como o Grunto senhor pode criar um ambiente de teste mais fácil de manter.

Para um cenário de teste visual avançado usando o Grunt, hospedei um diretório chamado visual-responsive-testing no GitHub. Todos os arquivos de origem estão disponíveis e seguem as linhas principais deste artigo.