A arte de desenvolver testes - Cucumber + Capybara

[thiagompereira]

thiagompereira MVP última edição por thiagompereira

Esse é o segundo artigo sobre desenvolvimento de testes e dessa vez resolvi falar um pouco de cucumber + capybara e vem sendo o framework para meus testes. Hoje existem diversos artigos que falam sobre cucumber e minha intenção é mostrar como funciona os steps de forma mais fácil.

Bem, vamos primeiro partir para instalação e configuração do ambiente para começarmos a desenvolver os testes. Como eu venho utilizando MAC para desenvolvimento, vou focar a maior parte do tempo nele, porém fiquem a vontade para perguntar algo caso utilizem Linux ou Windows (o conceito será o mesmo).

Antes de mais nada, baixar o Xcode pelo link: https://developer.apple.com/xcode/downloads/. Aprendi que sempre que instalar o SO, a primeira coisa será instalar o Xcode.

Bem, depois do Xcode, vamos baixar o Homebrew via terminal com o comando: ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” . Para explicar o que é o homebrew basta dizer: “O Homebrew instala as coisas que você precisa que a Apple não forneceu para você.” - fonte: http://brew.sh/index_pt-br.html. Ou seja, é um gerenciador de pacotes.

Reinicie a máquina (isso mesmo, para “completar as instalações”).

Com o Homebrew instalado, será necessário instalar o “Qt” - Framework multiplataforma para desenvolvimento de interfaces gráficas - fonte: (http://pt.wikipedia.org/wiki/Qt) e serve basicamente para podermos utilizar o selenium como driver padrão de execução para os testes. Para instalar o Qt, é bem simples: “brew install qt”.

Por default o ruby já vem instalado, mas vou deixar registrado os comandos para instalar a versao 1.9.3-p545:

curl -sSL https://get.rvm.io | bash -s stable --ruby=1.9.3-p545

Ps: Caso o “curl” não estiver instalado, basta instalar com “brew install curl”

Bem, agora vamos ao que de fato insteressa, as gems, então vamos a lista das básicas:

 gem install cucumber
 gem install capybara
 gem install capybara-webkit
 gem install selenium-webdriver
 gem install rails
 gem install rspec

Com isso tudo já da para trabalhar um pouquinho \o/.

Bem, a estrutura básica para um projeto em cucumber é essa:

Para explicar, dentro da pasta “specifications” se encontra aquela famosa estrutura que vemos em todos os artigos por ai:

language: pt (colocar cerquilha antes)

Funcionalidade: Aprendendo a trabalhar com capybara

Cenario: Exemplo basico de cadastro

Dado que eu acesse o facebook
Quando eu preencher os campos de cadastro
E clicar em Abrir uma conta
Então primeiro cadastro completo

Até ai beleza e depois???

Depois salve o arquivo como “cadastro.feature”.

Depois que escrevemos, vamos a parte das “configurações” no arquivo “env.rb”, pois é lá que definimos as gems que eu vou utilizar e claro, definir o driver que eu vou utilizar como base para execução dos testes. O modelo básico vai ficar da seguinte forma:

 require 'capybara/cucumber'
 require "selenium-webdriver"
 require 'gherkin'

 Capybara.default_driver = :selenium
 Capybara.default_wait_time = 20
 Capybara.javascript_driver = :webkit

Depois de configurar (por hora são apenas essas), vamos deixar o teste pronto para “desenvolver”, então, basta ir no terminal, navegar até a pasta features de seu projeto e executar o comando “cucumber”. É só isso??? Não!! O que fizemos apenas foi pedir para o cucumber “ajustar” os steps para podermos dar vida ao desenvolvimento, e vai ficar algo mais ou menos assim:

language: pt (colocar cerquilha antes)
Funcionalidade: Aprendendo a trabalhar com capybara

Cenario: Exemplo basico de cadastro       # features/specifications/cenario1.feature:5
Dado que eu acesse o facebook             # features/specifications/cenario1.feature:8
Quando eu preencher os campos de cadastro # features/specifications/cenario1.feature:9
E clicar em Abrir uma conta               # features/specifications/cenario1.feature:10
Então cadastro inicial completo           # features/specifications/cenario1.feature:11

 1 scenario (1 undefined)
 4 steps (4 undefined)
 0m0.081s

 You can implement step definitions for undefined steps with these snippets:

 Dado(/^que eu acesse o facebook$/) do
    pending # express the regexp above with the code you wish you had
 end

 Quando(/^eu preencher os campos de cadastro$/) do
   pending # express the regexp above with the code you wish you had
 end

 Quando(/^clicar em Abrir uma conta$/) do
   pending # express the regexp above with the code you wish you had
 end

 Então(/^cadastro incicial completo$/) do
   pending # express the regexp above with the code you wish you had
 end

Agora a brincadeira vai começar a ficar engraçada, como vocês viram, não executou por estar apenas em português estruturado como algumas pessoas já me perguntaram, pois eu preciso agora dar o caminho das pedras para que cada step possa fazer sentido, pois é a partir daí que vamos começar a desenvolver. A primeira dica que eu dou é seguir passo a passo, ou seja, sempre que você executar e terminar um passo, começe outro. Alguns lugares falam pra copiar tudo e colocar já em um arquivo.rb, mas faça isso não, vai um por um que você tem melhores resultados ;). Então, vamos pegar o primeiro passo e colocar em um arquivo novo:

 encoding: utf-8 (colocar o cerquilha antes)
 !/usr/bin/env ruby (colocar o cerquilha antes)

 Dado(/^que eu acesse o facebook$/) do
   pending # express the regexp above with the code you wish you had
 end

Considere cada passo como um método a ser executado, e em ruby todo método finaliza com um end, com cucumber, os inícios Dado, Quando, Então, E são os inícios desses métodos.

A base de execução do cucumber é em cima de Expressões Regulares (regex), o que quer dizer que vamos nos deparar sempre com os caracteres (/^ $/), etc. Mas não vou entrar no contexto das expressões regulares agora, mas explicando a regex (/^que eu acesse o facebook$/), sempre que em alguma feature eu escrever “Dado que eu acesse o facebook”, ele será executado, sem que eu precise escrever o código todo de novo, ou seja, economizo muito tempo =).

Bom, mãos na massa, e para isso, a frase “pending # express the regexp above with the code you wish you had” será substituída por comandos da gem capybara (https://github.com/jnicklas/capybara).

Como eu falei no primeiro post A arte de desenvolver testes, o coração da automação está em fazer as tarefas que são repetitivas se tornarem automáticas e para isso eu tenho que encontrar e trabalhar em cima dos elementos da minha página e para isso eu tenho ferramentas que me facilitam, a que eu mais gosto é o Firebug (complemento do firefox) e posso encontrar os elementros apenas selecionando, e posso escolher id, css ou xpath para poder indicá-los. Partindo deste princípio, o desenvolvimento fica muito mais fácil, pois geralmente o que eu faço nos elementos é clicar, informar um valor e validar. No capybara basicamente se utilizam os comandos:

visit ‘https://google.com.br’ – Para visitar alguma url.

page.find(:id, “id do elemento”).click – Clica em um elemento definido por ID.
page.find(:css, “css do elemento”).click – Clica em um elemento definido por CSS.
page.find(:xpath, “xpath do elemento”).click – Clica em um elemento definido por XPATH.

page.all(:id, “id do elemento”)[0].click – Clica no primeiro elemento dentro de uma lista definido por ID.
page.all(:css, “css do elemento”)[0].click – Clica no primeiro elemento dentro de uma lista definido por CSS.
page.all(:xpath, “xpath do elemento”)[0].click – Clica no primeiro elemento dentro de uma lista definido por XPATH.

PS: Quando nos depararmos com um checkbox, radiobutton, utilizar da seguinte forma:

page.find(:radio_button, ‘nome do radiobutton’).set(true) – Nesse caso, ele vai selecionar aquele radiobutton.
page.find(:checkbox, ‘nome do checkbox’).set(true) – Nesse caso, ele vai selecionar aquele checkbox.

fill_in ‘nome do elemento para inserir valor’, :with => “Aprendendo Capybara” – Irá inserir no elemento a string Aprendendo Capybara.

select ‘Nome do item no Drop Down’, from: ‘nome do elemento drop down’ – Seleciona um item de um drop down.
ex: select ‘Apto’, from ‘tipo_moradia’

click_button ‘Cadastrar’ – Clic no botão cadastrar.

click_link ‘Home’ – Clica no link Home caso haja algum na página.

expect(page).to have_content ‘Cadastro efetuado com sucesso’ – Procura a mensagem e caso tenha, será sucesso.

Basicamente é isso =).

Vou colocar todos os steps abaixo para mostrar como ficaria =) para não ficar maior que já está essa mini aula rs:

Salve o arquivo com o nome cenario1.rb.

No terminal, navegue até a pasta do projeto e digite cucumber. O resultado será esse:

Note que o mais legal de trabalhar com cucumber é a facilidade que ele tem de chamar um cenário ou outro através de frases, frases essas que são nada mais nada menos que os próprios critérios de aceite de uma estória, ou seja, desenvolver o critério de aceite se torna rápido e fácil, e para o review, mostrar tudo verdinho é segurança de deploy =).

Desculpem-me por alongar esse assunto, mas acho necessário passar uma visão mais simplista de como desenvolver os testes, não fizemos mágica alguma para realizar a primeira etapa do cadastro do facebook em 14 segundos. Para quem está começando, esse é o caminho das pedras!!! Há formas de rodar em background (sem abrir navegador), o que vai mais rápido ainda o teste, mas isso vai ficar para a próxima.

Dúvidas, sugestões, críticas são muito bem vindas, meu email é [email protected] caso alguém queira saber de cara como rodar em background.

Desenvolver testes é muito mais legal do que parece!!! =)

Algumas fontes legais:

Capybara doc: https://github.com/jnicklas/capybara
Regex doc (as que eu mais gosto): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions e https://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html
http://keeptesting.com.br/2014/11/11/ricas-de-ruby-para-testers-regex/

[Eduardo Souza]

Eduardo Souza última edição por Eduardo Souza

Parabéns Thiago!
Atitudes como esta fazem a área cada vez melhor. Obrigado por compartilhar seus conhecimentos o/

Abraços,
Eduardo Souza

[Leonardo Galani]

Leonardo Galani última edição por

Bom artigo sr marques!

Não querendo fazer jabar a suas custas grande @thiagompereira …rs mas aqui segue algumas dicas para projetos ruby :) http://keeptesting.com.br/2014/11/04/dicas-avancadas-de-ruby-capybaracucumber/

Principalmente a questão do bundle… que quanto mais o teste cresce, mais dependências ele pode ter… e é bom ter algo gerenciando isso, caso vc precise mudar de máquina ou que outras pessoas acessem e executem seus testes.

Capybara.javascript_driver já vem como default o :webkit… então nao sei se é interessante colocar para quem esta começando.

Eu também prefiro manter o padrão de escrita em inglês… ( já que a empresa que eu trabalho é internacional…) … mas vai de cada um…

;0) congrats e continue ajudando a comunidade !

[thiagompereira]

thiagompereira MVP última edição por @Leonardo Galani

@Leonardo-Galani Valeu!! Na próxima vamos debater umas idéias para gerar um novo registro para ajudar os mais novos =).

[robsonagapito]

robsonagapito última edição por

Parabéns Biro.

Para ajudar tenho um padrão para brincar com BDD em cucumber no Git, quem quiser pode baixar o mesmo brincar com ele.

Está inclusive preparado para usar com o Poltergeist, mas tem que ter instalado o PhantomJS.

Segue o link:
https://github.com/robsonagapito/padrao-bdd

E continue escrevendo que ajuda muito a todos da comunidade.

Abraços.

[thiagompereira]

thiagompereira MVP última edição por thiagompereira @robsonagapito

@Robson-Agapito-Corrêa valeu pelos exemplos, o propósito dessa mini aula é exatamente para aqueles que não tem muito acesso a qualquer linguagem de programação. Creio que partir já para configurações mais avançadas não seria o propósito, como no caso de usar o Poltergeist, pois muitos mal sabem o que significa cucumber, imagina partir para algo mais alto nível =). Logo em breve vou escrever um outro falando exatamente sobre esses “meandros” do desenvolvimento em capybara.

[allan_tester]

allan_tester última edição por

@thiagompereira valeu por compartilhar cara !! Vou começar a estudar estas ferramentas e tentar utiliza-las em nossos testes no dia a dia. Abraço!

[thiagompereira]

thiagompereira MVP última edição por @allan_tester

@allan_tester da uma analisada pra ver se a ferramenta se encaixa no contexto da sua empresa, do seus testes e também analise a linguagem que queira trabalhar e que você se sinta bem. Precisando, da um salve =).

[Fred Moreira]

Fred Moreira ADM última edição por

Muito bom Thiago…parabéns!

[Kaio Azevedo]

Kaio Azevedo última edição por

Parabéns Biro… Post antigo mas bem legal… Vou começar a brincar de migrar os nossos testes em Java para Ruby… Vai ser uma brincadeira bem legal… Abrs

[ReinaldoMateus]

ReinaldoMateus última edição por

Muito bom o Post, você por acaso não teria um exemplo em java??? Queria entender como usar o Page Objects nesse caso.

[thiagompereira]

thiagompereira MVP última edição por @ReinaldoMateus

@Reinaldo infelizmente em Java eu não tenho! Como eu venho me especializando em capybara, não venho estudando muito a respeito. Mas o @Eduardo-Souza trabalha com automação em Java e ele pode te dar uma luz!

[stefanteixeira]

stefanteixeira última edição por @ReinaldoMateus

@Reinaldo Tenho um projeto de exemplo em Java no GitHub com Selenium WebDriver, Page Objects e Gradle: https://github.com/stefanteixeira/exemplo-ghostdriver-gradle

Tem detalhes que eu faria um pouco diferente hoje (o projeto foi feito há quase 1 ano e meio atrás), mas acho uma boa pra começar a ter uma noção de como funciona.

Abs

[ReinaldoMateus]

ReinaldoMateus última edição por @stefanteixeira

@stefanteixeira obrigadão Stefan, interessante esse Gradle, não tinha ouvido falar, tem bastante recurso, tem algum exemplo usando o cucumber integrado?

[stefanteixeira]

stefanteixeira última edição por @ReinaldoMateus

@Reinaldo O Gradle é uma ferramenta de build, assim como o Ant e o Maven. A diferença é que ele pegou o melhor dos dois mundos: a flexibilidade do Ant e a convenção sobre configuração do Maven (além dos repositórios). Em vez de ficar escrevendo seu build em XML, vc escreve scripts em Groovy. Pra desenvolver em Android, o Gradle é a ferramenta de build padrão, inclusive.

Sobre integração com o Cucumber, eu não cheguei a usar, mas no repositório do Cucumber-JVM tem umas instruções pra usar com o Gradle: https://github.com/cucumber/cucumber-jvm/tree/master/examples/java-gradle

Abs

[Um ex-usuário]

Um ex-usuário última edição por

Muito bom @thiagompereira estava obrigado pela clara explicação.

Abç

[thiagompereira]

thiagompereira MVP última edição por @Visitante

@Luis-Henrique-Chagas-Leite esse já ta meio obsoleto. Da uma olhadinha na iniciativa Automation For all - Capybara for All no meu Github: https://github.com/thiagomarquessp/capybaraforall.

Qualquer dúvida, crítica e coisas do tipo da um toque =).

Abs.

[Lucas Silva]

Lucas Silva última edição por

Ola @thiagompereira,

Muito legal a iniciativa tentando ajudar a galera a dar uma up-skill em automacao. Eu trabalho com testes de aplicativos mobile (Android e IOS). Recentemente comecei a estudar Ruby e queria tentar aplicar esse conhecimento em automacao (web e/ou mobile).

Comecei a seguir o teu tutorial: https://github.com/thiagomarquessp/capybaraforall/blob/master/Configuracoes.md, e o primeiro empecilho que encontro e relacionado a permissoes, pois eu uso Mac, quando tento instalar o gem file (gem install bundler). O erro gerado e esse:

GUESTs-MacBook-Pro:~ GUEST$ gem install bundler
Fetching: bundler-1.12.5.gem (100%)
ERROR: While executing gem … (Gem::FilePermissionError)
You don’t have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

Dei uma pesquisada no stackoverflow e outros lugares tentando encontrar resposta para esse problema, mas ate agora nada… Nao sei se tu ou alguem mais desse forum ja passou por algum problema semelhante?

Valeu a a atencao,
Lucas

[Bruno Fernandes]

Bruno Fernandes última edição por

@Lucas-Silva , não sei como se faz isto no Mac, mas você já tentou dar permissão de escrita no diretório /Library/Ruby/Gems/2.0.0 directory ? Estes problemas de permissão costumam ter a mesma solução independentemente do SO.

[thiagompereira]

thiagompereira MVP última edição por @thiagompereira

@thiagompereira Vc instalou direitinho o ruby no seu mac com rvm ou rbenv? Não tem segredo … é mais fácil pra MAC inclusive… eu uso no meu dia a dia. me chama no skype ai: thiagobirobiro