Configurando Jenkins para um projeto com PhantomCSS (+ Chuck Norris plugin)

Na palestra sobre Visual Regression Testing com PhantomCSS, mostrei um exemplo de como configurar o Jenkins para um projeto com PhantomCSS. Neste post, vou explicar com mais detalhes como fazer isso, mas já adianto que é bem simples! :)

Setup

O projeto que vamos usar é o mesmo que criei para apresentar na palestra, clique aqui para acessá-lo. Lembre-se de que é necessário instalar o PhantomJS e o CasperJS na máquina que irá rodar o Jenkins. O README do projeto contém instruções para instalação em ambiente Windows, Ubuntu ou OS X.

Para rodar o script de exemplo, navegue até o diretório do projeto e digite o seguinte comando:

casperjs test testes/teste.js

Instalando o Chuck Norris plugin

Para instalar o plugin, basta acessar as opções "Gerenciar Jenkins" -> "Gerenciar Plugins" -> aba "Disponíveis" -> pesquisar por "ChuckNorris Plugin" e instalar. Caso surja alguma dúvida, no último post sobre Jenkins tem um passo-a-passo (com imagens) da instalação de plugins. ;)


Criando e configurando o job

Para criar um novo job, clique na opção "Novo Item", no lado esquerdo da tela principal. Dê um nome ao job, selecione a opção "Construir um projeto de software free-style" e clique em OK:

jenkins phantomcss

Na seção "Gerenciamento de código fonte", selecione "Git" e informe a URL do repositório. Na figura, coloquei a URL do repositório do projeto de exemplo no meu GitHub: https://github.com/stefanteixeira/exemplo-phantomcss-palestra.git

phantomcss 2

Na seção "Build", clique em "Adicionar passo no build" e, em seguida, na opção "Executar shell":

phantomcss 3

Na caixa de texto, digite o comando para rodar o script de teste, mas incluindo o parâmetro "xunit=log.xml". Ou seja:

casperjs test testes/teste.js --xunit=log.xml

Esse parâmetro vai fazer com que o CasperJS gere um arquivo XML de log que vamos publicar no Jenkins. :)

phantomcss 4

Agora, vamos habilitar o Chuck Norris plugin. Na seção "Ações pós-builds", clique em "Add post-build action" e na opção "Activate Chuck Norris":

phantomcss 5

Para terminar, vamos configurar o Jenkins para publicar o relatório de testes. Clique novamente em "Add post-build action" e, dessa vez, escolha a opção "Publicar relatório de testes do JUnit":

phantomcss 6

No campo "Relatório XML de teste", informe "log.xml", já que o arquivo será criado na raiz do projeto:

phantomcss 7


Primeira execução (build failure)

Para executar o build, clique em "Construir agora":

phantomcss 8

Aparecerá um build em execução na caixa "Histórico de builds". Clique nele e selecione a opção "Console output" para acompanhar a execução. Observe no log que o PhantomCSS gerou novos screenshots, e que o build ficou com status "FAILURE", já que nenhum teste foi executado:

phantomcss 9

Na página inicial do build, podemos ver que o Chuck Norris não ficou muito feliz com essa falha:

phantomcss 10


Segunda execução (build success)

Executando o build novamente, podemos ver no log que os testes passaram, ou seja, o PhantomCSS não encontrou mudanças nos screenshots. Com isso, o build terminou com status "SUCCESS":

phantomcss 11

Na página inicial do build, podemos ver que o Chuck Norris ficou feliz :)

phantomcss 12

Também nesse build, é possível ver que foi publicado o resultado de testes:

phantomcss 13


É isso! Qualquer dúvida ou sugestão, podem postar nos comentários ou entrar em contato! :)

Até o próximo post!


Referências

https://wiki.jenkins-ci.org/display/JENKINS/ChuckNorris+Plugin
https://github.com/Huddle/PhantomCSS
http://casperjs.org/
https://www.packtpub.com/web-development/instant-testing-casperjs-instant


Sobre o autor: Stefan Teixeira trabalha como QA Engineer e, desde o final de 2014, tem se aventurado no mundo DevOps. É Bacharel em Ciência da Computação pela UFRJ e MBA em Garantia de Qualidade de Software pela Escola Politécnica da UFRJ. Entusiasta de Testes Automatizados (e de tudo que possa ser automatizado!), Agile Testing e da cultura DevOps.

Contatos: stefanfk@gmail.com | Twitter | LinkedIn


comments powered by Disqus