Teste a interface de sua aplicação web no melhor estilo ninja de testes com splinter

Automatize os testes de visitação de links, interações do mouse, formulários, cookies, verificação de existência de elementos na página...

Índice

Tabela de conteúdos do artigo:

Conteúdo teórico e informações úteis Conteúdo prático e orientações

Introdução - Interface, qualidade de software

splinter - O que é, quem fez e como funciona

Vídeo - Testes de interface e o splinter

Conclusão; Agradecimentos e créditos;

Instalação do splinter

Exemplo prático 1 - Testando a busca do meu site

Exemplo prático 2 - Exemplo ilustrado, eventos do mouse

Outros exemplos de uso do splinter - repositório no github

i hope you enjoy it!

Introdução

Fornecer software de qualidade não se limita em apenas escolher um bom banco de dados, boa estrutura de servidores, arquitetura de sistema bem planejada, linguagens e frameworks que a equipe saiba utilizá-los bem. Não que isto não leve à qualidade também, mas é que as "fábricas de software" há um tempo atrás, (algumas até hoje), sempre quiseram investir bastante em todos estes quesitos para que não dificultassem a manutenção dos softwares e que eles "rodassem" sem problemas.

E, basicamente, um software de qualidade era isto. Hoje, (na verdade há algum tempo, mas a conscientização ainda está em progresso), com a grande concorrência e a luta para agradar o usuário, precisamos ser ágeis e certeiros no investimento do tempo de desenvolvimento em relação a principal parte do software, aquela que vai ganhar o usuário, aquela que trará o sucesso para quem está criando a aplicação... A Interface.

Testando interfaces web "like a ninja" com  splinter

SplinterSplinter é um framework de testes para aplicações web que tem o objetivo de  automatizar o processo de testes executando as ações que você teria de realizar várias vezes manualmente a fim de tornar ágil, inteligente e sustentável a manutenção de interfaces do seu software.

Ele é escrito em Python, é open source e seu desenvolvimento é liderado pelo grupo de desenvolvimento open source Cobrateam. Mas há toda uma comunidade que o mantém, e você também pode ajudar no desenvolvimento. :)  Mais informações sobre o splinter:

Talk is cheap...

Imagem original em ( http://www.flickr.com/photos/benhusmann/4888266249/ ) é permitido o uso sob a licença Creative Common

A seguir alguns pequenos exemplos de uso do splinter, mas você terá de ter instalado ele em tua máquina.

Para os que já têm intimidade com Python basta um:

$ [sudo] pip install splinter

Se você é iniciante, (melhor que saiba pelo menos o mínimo de Python), e quer testá-lo basta:

  1. Baixar e intalar o Python. python.org // Se está no Mac ou Linux, provavelmente você já o tem instalado. Se tem dificuldades com inglês siga as instruções da Python Brasil
  2. Instale o pip, sem dúvidas é a melhor ferramenta para instalar pacoes Python. Busque saber mais sobre ele.
  3. Então basta instalar o splinter $ [sudo] pip install splinter
  4. Se a instalação não for bem sucedida verifique a saída que apareceu no console, verifique o arquivo de log do pip e copie e cole no Google a mensagem da exceção que foi lançada, você encontrará muitas soluções de muitas pessoas que já tiveram o mesmo problema. Caso não consiga mesmo entre em contato com a comunidade do pip no Google ou mesmo no GitHub  ajudaremos você. =)

NOTE: Para que ele funcione corretamente no Google Chrome siga as instruções específicas de configuração para este navegador.

 O código abaixo fará o seguinte:

  1. visitará meu website
  2. fará uma busca com a palavra-chave "python" // aguardará o término da animação do botão "Pesquisar"
  3. e verificará se há resultados para a busca

NOTE: A propósito o código deveria ter somente 15 linhas e tem este tamanho porque eu comentei ele bastante para tentar não deixar dúvidas.

# -*- coding: utf-8 -*-
import time
from splinter.browser import Browser
# Se eu não passar nenhum driver, Browser(),
# o padrão já será o firefox.
browser = Browser('firefox')

url = "http://douglasmiranda.com"
# Na linha abaixo eu visito a url,
# é neste momento em que o browser se abrirá
browser.visit(url)
# com o método fill eu preencho o campo de formulário,
# ele encontra este campo pelo atributo name do input
# para interagir com elementos veja mais formas em:
# http://splinter.cobrateam.info/docs/elements-in-the-page.html
palavra_chave = "python"
browser.fill('q', palavra_chave)

# estou inserindo este delay aqui porque ao preencher o campo de busca
# há uma animação no botão "Pesquisar", este é o tempo para que
# a animação esteja completa e o botão esteja clicável
# que é um ponto importante, pois o objeto precisa estar visível para
# que ele possa ser clicado
time.sleep(0.2)

# Encontrando o botão de submit do formulário
# que é um <input type="submit"... dentro de um
# formulário que tem o id="search-form"
# por um seletor CSS, se você é familiarizado
# com CSS vai achar bem simples o uso
# mais formas de encontar elementos na página em:
# http://splinter.cobrateam.info/docs/finding.html
botao_pesquisar = browser.find_by_css("#search-form input[type=submit]")
# Veja que ao encontrar o botão eu posso interagir com ele
# neste caso "estou clicando" nele, que vai submeter meu
# formulário #search-form, enviando a palavra "python" para ser
# pesquisada em meu banco de dados
botao_pesquisar.click()

# com o método is_element_present_by_id vou checar se apareceu
# a lista de posts que tem o id="posts-list"
# mais formas checar textos e elementos presentes no corpo da página em:
# http://splinter.cobrateam.info/docs/matchers.html
if browser.is_element_present_by_id('posts-list'):
    print "Oh yes! Já escrevi artigos sobre '%s'! =D" % palavra_chave
else:
    print "Não escrevi nenhum artigo sobre '%s'? OMG!" % palavra_chave

# Ao término eu fecho o browser
browser.quit()

Um exemplo ilustrado

Um exemplo clássico de evento que acontece quando o mouse passa sobre um elemento. Algumas vezes feitos com CSS apenas outras vezes com Javascript. Neste caso é feito com Javascript e é possível vê-lo em ação nesta página douglasmiranda.com/labs/projetos. A imagem abaixo ilustra o exemplo:

Exemplo de efeito mouse over, mouse out com Javascript que nós testaremos com splinter

Porque testar isto? Simples, no decorrer do tempo estou sempre aprimorando o Javascript e CSS do meu site e preciso me certificar que cada alteração que eu fizer não irá afetar o que já estava funcionando, então assim que eu faço minhas alterações mando rodar os testes e vejo se algum teste teve um resultado inesperado.

Código para testar este exemplo:

# -*- coding: utf-8 -*-
from splinter.browser import Browser

browser = Browser('chrome')
browser.visit('http://media.douglasmiranda.com/labs/exemplos/splinter_mouseover/exemplo.html')

li = browser.find_by_css('#ultimos-projetos li').first

li.mouse_over()
print 'Quando o mouse passa por cima da imagem, (mouseover), a descrição aparece? ', li.find_by_css('.descricao').visible

li.mouse_out()
print '...e quando o mouse está fora da imagem, (mouseout), a descrição está visivel ainda? ', li.find_by_css('.descricao').visible

browser.quit()

NOTE: Até o presente dia, em que estou escrevendo este artigo, 31-12-2011, mouse_over() e mouse_out() não funcionam no firefox.

Finalizando

O splinter, por ser open source e uma ferramenta muito útil, cresce a cada dia mais, tanto em comunidade, usuários e funcionalidades, até o presente momento podemos destacar que ele oferece:

  • Uma API simples, é realmente muito fácil entender o propósito de cada método.
  • Suporte para vários webdrivers (chrome, firefox, zopetestbrowser), sem contar as implementações em andamento.
  • Execução de Javascript, bem como a obtenção de valores retornados pelo Javascript.
  • Suporte a ajax, manipulação de elementos originados de requisições assíncronas.
  • Manipulação de cookies.
  • E trabalhando para obter uma API completamente documentada e outras coisas que talvez você também possa nos ajudar. =)

Se você leu até aqui , obrigado, dê sua opinião e talvez você queira ler outros artigos meus. :)

Estes e outros exemplos estão no meu repositório de exemplos de uso do splinter em meu github.

* Imagem usada neste artigo com licença Creative Common: link para imagem original

blog comments powered by Disqus