Configurando Jenkins para um projeto com PhantomCSS (+ Chuck Norris plugin)
15 August 2014 on devops, jenkins, javascript, visual regression testing, phantomcss
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! :)
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:
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
Na seção "Build", clique em "Adicionar passo no build" e, em seguida, na opção "Executar shell":
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. :)
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":
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":
No campo "Relatório XML de teste", informe "log.xml", já que o arquivo será criado na raiz do projeto:
Primeira execução (build failure)
Para executar o build, clique em "Construir agora":
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:
Na página inicial do build, podemos ver que o Chuck Norris não ficou muito feliz com essa falha:
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":