Aprendendo automação sem cursos caros

Quanto mais fazemos algo, ficamos mais experientes no que praticamos. Sabemos disso, pois não adiantam cursos e mais cursos de inglês se não introduzirmos no nosso dia a dia, não adianta ler um bom livro técnico se não introduzirmos o conhecimento no nosso cotidiano e etc. Com automação não é diferente.

Mas como podemos introduzir automação no nosso dia a dia se nem ao menos trabalhamos com isso?

Terminal usando irb e Firefox com os resultados para os comandos executados usando Watir-Webdriver e Ruby

Existe uma maneira muito simples e totalmente gratuita de se acostumar com os frameworks de automação que temos por aí, e quando falamos de acostumar com esses frameworks, não estamos falando puramente de sintaxe, mas das limitações que eles nos oferecem, com tecnologias e técnicas secundárias que nos confrontamos durante automação de testes (como json, css, xpath, etc), com HTML e Javascript, com os erros retornados pelo código, com a linguagem de programação que eles usam, com a documentação desses frameworks etc.

Para isso você não precisa de cursos caros, ferramentas milagrosas, um sistema operacional diferente ou quaisquer outras coisas. Pra ser bem sincero você só precisa de muita vontade de aprender, pois a tarefa que vem aí, embora seja bem simples e fácil, é meio chata no começo.

A linguagem de programação ruby nos fornece um recurso para trabalhar no console/terminal executando pequenos pedaços de código chamada Interactive Ruby Shell mais conhecido como irb. O irb é muito usado por desenvolvedores para testar pequenos pedaços de código, executar tarefas simples, debugging entre outras atividades. Ele fornece uma forma de executar pequenos trechos de código com muita flexibilidade e com todos os recursos que a linguagem ruby oferece.

Com a ajuda desse recurso vamos praticar um pouco de automação hoje com esse breve tutorial e você vai poder praticar diariamente usando o seu framework preferido.

Como?

Você vai praticar watir-webdriver ou selenium-webdriver, ou ambos agora :) Basta escolher. Mesmo sem nenhum conhecimento em automação de testes ao final você vai postar um comentário neste post utilizando apenas um terminal e algumas linhas de comando :) Para isso, escolha a sua ferramenta e siga as instruções abaixo.

Instalando o ambiente básico:

Nada aqui pode (ou deveria) danificar o seu pc ou mac, mas é sempre bom fazer um backup ou preferencialmente usar uma máquina virtual. Para facilitar eu recomendo o uso de um sistema operacional baseado em unix como o OSX ou o Linux, mas caso esteja usando o Windows conseguirá terminar esse tutorial da mesma forma.

Para ambos os casos você terá que instalar o Ruby. Ele possui instalação para os principais sistemas operacionais, entre eles o Windows, OSX e Linux. Siga as instruções do seu sistema operacional aqui para OSX ou Linux e aqui para Windows.

Uma vez instalado, usando o OSX ou Linux basta abrir o terminal e continuar os passos abaixo, caso esteja usando o Windows, ele criará um terminal especial chamado ruby ou “start prompt with ruby” no menu iniciar > Todos os programas > Ruby, entre nele. A partir daqui os comandos são os mesmos independente de sistema operacional.

Instalando as gems

O conceito de gem para o ruby é basicamente o de um pacote. É um conjunto de classes que juntas fornecem uma interface para algum serviço ou aplicação. Para entender mais sobre ruby e um pouco mais sobre o framework rails eu recomendo a apostila gratuita e muito boa da Caelum que pode ser baixada aqui.

Nota: De agora em diante vamos trabalhar em um terminal. Para facilitar o entendimento, vamos usar o caractere “$” (cifrão) para delimitar o início de uma linha de comando. Não inclua esse item no seu comando, estamos usando aqui para simplificar a identificação dos comandos e das linhas de texto.

Para instalar as gems que vamos usar nesse exercício, basta executar os seguintes comandos:

$ gem install “watir-webdriver”

$ gem install “selenium-webdriver”

Para cada caso vamos ter uma mensagem parecida com “1 gem installed”. Para ter certeza que as gems foram instaladas basta usar o comando:

$ gem list

O comando acima vai mostrar uma lista com todas as gems que estão instaladas no seu ruby ou rvm. Caso após o comando acima as duas gems estejam na lista de gems instaladas, inicie o nosso irb usando o seguinte comando:

$ irb

Quando fizer isso, o terminal deve mudar para algo parecido com:

1.8.7 :001 >

Os três primeiros números são a versão do ruby que foi instalada. Caso o texto acima seja apresentado, continue para o próximo passo.

Watir-Webdriver

O Watir-Webdriver é um framework que implementa uma DSL (Domain Specific Language) para o selenium, ou seja, ela implementa um novo dicionário ao selenium, permitindo usemos um conjunto de recursos do selenium com uma nova sintaxe, mais simples e mais focada no jeito QA de fazer os testes.

Iniciando do nosso passo anterior do terminal, vamos executar o seguinte comando:

$ require “watir-webdriver”

Caso esteja usando o ruby 1.8.7, será necessário fazer o seguinte comando antes do comando anterior:

$ require “rubygems”

O comando acima importa a nos permite usar todos os recursos do watir-webdriver.

Para facilitar a nossa tarefa, vamos usar a documentação da ferramenta que descreve quais as classes e métodos que podemos usar: http://rubydoc.info/gems/watir-webdriver

Na referência acima podemos pesquisar por dezenas de classes e sues métodos, ver exemplos de uso. Para iniciar o uso, vamos usar o exemplo que essa página nos oferece e pesquisar por Webdriver Rocks, executando um comando de cada vez e conferindo o resultado no browser que a própria aplicação vai iniciar:

browser = Watir::Browser.new :firefox

O comando acima cria uma instancia do browser Firefox*. Nesse ponto, verifique se uma aba do browser foi aberta na home page ou em branco e se a resposta no terminal foi algo parecido com “=> #<Watir::Browser:0x10d38ff00 url=”about:blank” title=””>”.

*Caso não tenha o Firefox instalado, basta omitir o parâmetro “:firefox” que o webdriver vai reconhecer qual o browser padrão.

O próximo passo é usando uma linha de comando, indicar qual página o browser deve visitar, para isso usamos a próxima linha do material de referência do Watir:

browser.goto “http://google.com”

Agora o nosso browser deve estar na página do Google e o nosso termina deve ter uma resposta parecida com “=> “http://www.google.com.br/””.

O próximo passo é informar para o google o que queremos pesquisar, para isso vamos usar um metodo chamada text_field, que sabe quais as ações um usuário pode realizar com aquele elemento na página. Para usar essa classe precisamos informar qual a nossa forma de acesso, que segundo o nosso exemplo é usando a propriedade name do elemento. Para isso usamos o seguinte comando:

$ browser.text_field(:name => ‘q’).set(“WebDriver rocks!”)

O comando acima estamos pedindo ao webdriver que encontre um elemento do tipo text field com a propriedade name igual a “q” e preencha-o com o valor “WebDriver rocks!”. Feito isso devemos ver o campo de pesquisa do Google preenchido e o nosso terminal deve nos retornar algo parecido com ” => “” “. Agora vamos pedir ao webdriver para clicar no botão:

browser.button(:name => ‘btnG’).click

O comando acima faz exatamente a mesma coisa do comando anterior, mas agora procuramos por um elemento do tipo button cujo name é “btnG” e pedimos que ele realize a operação de clicar nesse elemento. Os próximo comandos escrevem a url da página no terminal, que pode ser usado como uma asserção e fecha o browser:

$ puts browser.url

$ browser.close

Agora que já entendemos como isso funciona, vamos usar o mesmo modelo para fazer um comentário no The Bug Bang Theory, mas de uma maneira muito mais user-friendly do que o nosso script anterior.

Inicialmente, vamos iniciar o nosso browser e ir para a página como fizemos anteriormente.

Para estimular a tentativa e erro, a partir de agora os comandos abaixo estão com fonte na cor branca. Aproveite para experimentar combinações diferentes. Caso precise ver o código basta selecionar as linhas abaixo depois do cifrão com o mouse.

browser = Watir::Browser.new :firefox

browser.goto “www.bugbang.com.br”

Agora vamos dar uma olhada na página. Queremos fazer um comentário sem avaliar a estrutura interna do html. Inicialmente vamos clicar no nosso post, para isso use a interface do objeto do tipo link e a propriedade text que é o título do :

browser.link(:value => “Aprendendo automação sem cursos caros”).click

No exemplo acima estamos usando o text para identificar o elemento do tipo link que queremos clicar, mas caso prefira, pode usar qualquer outra propriedade como o name, id, css location, etc.

Agora vamos dar uma olhada na página e vamos ver quais são os elementos que podemos preencher. Para comentar temos que preencher os campos “Nome (obrigatório)”, “Email (não será publicado) (obrigatório)”, opcionalmente o campo “Site” e o textarea “Comentar”. Tente fazer isso.

Nota: Quando comentar esse post usando esse modele, por favor post a hashtag #webdriver junto do comentário :), assim todo mundo que ler o artigo vai saber que você conseguiu.

browser.text_field(:label => “Nome (obrigatório)”).set “Meu nome”

browser.text_field(:label => “Email (não será publicado) (obrigatório)”).set “meu@email.com”

browser.text_field(:label => “Site”).set “www.meusite.com.br”

browser.textarea(:label => “Comentar”).set “Meu comentário feliz #webdriver”

Com todos os campos preenchidos agora temos que clicar no botão para submeter o nosso comentário:

$  browser.button(:label => “Enviar Comentário”).click

Nesse ultimo passo, é bem possível ter algum problema com o encoding se tentar usar o label. O erro deve se parecer com o erro abaixo:

Watir::Exception::UnknownObjectException: unable to locate element, using {:tag_name=>”button”, :label=>”Enviar Coment\303\241rio”}

Existem muitas soluções usando enconding para esse problema, mas para contorná-lo nesse ponto, podemos usar um comando como o abaixo, que lista o name e o text de todos os elementos desse tipo, para então usar o id como parâmetro:

$ browser.buttons.map { |b| puts b.id + ” – ” + b.text  }

Nesse caso, usando o id o comando seria:

$  browser.button(:id => “submit”).click

Ou siga o tutorial http://stackoverflow.com/questions/10385944/cant-enter-umlauts-in-ruby-1-9-3-irb (inglês).

Selenium-Webdriver

O Selenium-Webdriver é a fusão dos trabalhos do então ThoughtWorker Jason Huggins, que buscava uma forma de automatizar testes de aceite, especialmente para executar em múltiplos browsers, e por isso escreveu o core do selenium usando javascript para iteração de elementos de págins web, o que permitia trocar de um browser para outro sem muito esforço, com o Webdriver, trabalho do Googler Simon Stewart, que não era baseado em javascript mas em um conjunto de apis do browser, o que permitia fazer upload de arquivos por exemplo. Um dia o Huggins foi contratado pelo Google e então eles deram vida ao que chamamos de Selenium-Webdriver (Thank you J). Para mais detalhes dessa história leia o depoimento do Simon Stewart no livro “How Google Tests Software”.

Para Iniciar com Selenium-Webdriver, precisamos também iniciar o terminal. Com o terminal aberto vamos executar o seguinte comando:

require “Selenium-webdriver”

Caso esteja usando o ruby 1.8.7, será necessário fazer o seguinte comando antes do comando anterior:

$ require “rubygems”

O comando acima importa a nos permite usar todos os recursos do selenium-webdriver.

Para facilitar a nossa tarefa, vamos usar a documentação da ferramenta que descreve quais as classes e métodos que podemos usar: http://rubydoc.info/gems/selenium-webdriver

Se pesquisarmos na documentação acima, vamos chegar até a página de wiki da ferramenta no link http://code.google.com/p/selenium/wiki/RubyBindings. Basicamente, esse tutorial exlica o que vamos fazer inicialmente, mas caso tenha dificuldade com inglês ou queira algo mais passo a passo explicando o que cada comando faz, pode usar a referência abaixo:

browser = Selenium::WebDriver.for :firefox

O comando acima cria uma instancia do browser Firefox. Nesse ponto, verifique se uma aba do browser foi aberta na home page ou em branco e se a resposta no terminal foi algo parecido com ” => #<Selenium::WebDriver::Driver:0x..fcdfbb7acb91a899e browser=:firefox> “.

O próximo passo é usando uma linha de comando, indicar qual página o browser deve visitar, para isso usamos a próxima linha do material de referência do Selenium:

browser.navigate.to “http://google.com”

Agora o nosso browser deve estar na página do Google e o nosso termina deve ter uma resposta parecida com ” => “” “.

Note que essa reposta é diferente da resposta do Watir-Webdriver, que trouxe o site que visitamos como resposa ao nosso comando, ao invés de uma string vazia.

O próximo passo é informar para o google o que queremos pesquisar, para isso vamos usar um método chamado find_element.

Ao contrário do Watir, que possui métodos para cada tipo de elemento HTML, o selenium possui um “finder” padrão que conhece diferentes tipos de identificadores. Esses identificadores podem ser usados para buscar todos os tipos de elementos. Por exemplo, para buscar um elemento qualquer podemos usar o identificador :name ou :id. Para ver a lista completa consulte a documentação no link http://rubydoc.info/gems/selenium-webdriver/Selenium/WebDriver/SearchContext – find_element-instance_method.

Para incluir o texto precisamos usar o comando:

browser.find_element(:name, ‘q’).send_keys(“WebDriver rocks!”)

O comando acima estamos pedindo ao webdriver que encontre um elemento com a propriedade name “q” e preencha-o com o valor “WebDriver rocks!”. Feito isso devemos ver o campo de pesquisa do Google preenchido e o nosso terminal deve nos retornar algo parecido com ” => “” “. Agora vamos pedir ao webdriver para clicar no botão:

browser.find_element(:name, ‘btnG’).click

O comando acima faz exatamente a mesma coisa do comando anterior, mas agora procuramos por um elemento cuja propriedade name é “btnG” e pedimos que ele realize a operação de clicar nesse elemento. Os próximo comandos escrevem o título da página no terminal, que pode ser usado como uma asserção e fecha o browser:

puts browser.title

browser.close

Agora que já entendemos como isso funciona, vamos usar o mesmo modelo para fazer um comentário no The Bug Bang Theory, mas de uma maneira muito mais user-friendly do que o nosso script anterior.

Inicialmente, vamos iniciar o nosso browser e ir para a página como fizemos anteriormente.

Para estimular a tentativa e erro, a partir de agora os comandos abaixo estão com fonte na cor branca. Aproveite para experimentar combinações diferentes. Caso precise ver o código basta selecionar as linhas abaixo depois do cifrão com o mouse.

browser = Selenium::WebDriver.for :firefox

browser.navigate.to “www.bugbang.com.br”

Agora vamos dar uma olhada na página. Queremos fazer um comentário sem avaliar a estrutura interna do html. Inicialmente vamos clicar no nosso post, para isso use a interface do objeto do tipo link e a propriedade text que é o título do :

browser.find_element(:link_text, “Aprendendo automação sem cursos caros”).click

Ou de uma forma mais prática, pegando o texto parcial:

browser.find_element(:partial_link_text, “Aprendendo automação”).click

No exemplo acima estamos usando o text do elemento para identificar o elemento do tipo link que queremos clicar, mas caso prefira, pode usar qualquer outra propriedade como o name, id, etc.

Agora vamos dar uma olhada na página e vamos ver quais são os elementos que podemos preencher. Para comentar temos que preencher os campos “Nome (obrigatório)”, “Email (não será publicado) (obrigatório)”, opcionalmente o campo “Site” e o textarea “Comentar”. Tente fazer isso.

Nota: Quando comentar esse post usando esse modelo, por favor post a hashtag #webdriver junto do comentário :), assim todo mundo que ler o artigo vai saber que você conseguiu.

browser.find_element(:id, “author”).send_keys “Meu nome”

browser.find_element(:id, “email”).send_keys “meu@email.com”

browser.find_element(:id, “url”).send_keys “http://www.meusite.com.br”

browser.find_element(:id, “comment”).send_keys “Meu comentário feliz #webdriver”

Com todos os campos preenchidos agora temos que clicar no botão para submeter o nosso comentário:

$ browser.find_element(:id, “submit”).click

Com isso terminamos o Selenium-Webdriver. Particularmente eu prefiro o Watir por ter maior legibilidade. Você lê o step e sabe se é um text field ou text area por exemplo. Mas ambas as ferramentas funcionam da mesma forma.

Agora você já tem o ambiente setado e já sabe o básico do básico, então aproveite a oportunidade e tire uma hora ou mesmo alguns minutos do seu dia para praticar navegando dessa forma. Em alguns dias, aproveite o conhecimento e crie alguns scripts para automatizar coisas rotineiras como um cadastro, uma time sheet ou um login do Facebook.

Claro que esse post passa o básico do básico sobre watir-webdriver e selenium-webdriver, e não engloba nenhum dos aspectos complexos de arquitetura de automação, mas se mostra uma boa opção para iniciar no mundo cheio de códigos dos testes automatizados e é fácil de entender. Praticando todos os dias, aos poucos a automação vai se tornar parte do seu dia a dia e quando menos perceber estará apto(a) para começar a trabalhar em um projeto que precisa de automação.

Divirta-se e bons testes :)

Nota de Atualização: Obrigado a Natalie Volk por me ajudar e motivar a escrever a parte do selenium-webdriver :)

Camilo Ribeiro

Test Engineer at Klarna
Desenvolvedor, testador e agilista desde 2005, atualmente trabalhando na Suécia.

28 thoughts on “Aprendendo automação sem cursos caros

  1. Achei muito bacana a sua iniciativa em postar um texto com a ferramenta tão bacana. Está de parabéns!

  2. As labels mudaram de nome, mas foi muito legal porque testou o meu aprendizado. Consegui #webdriver

Leave a Reply