Skip to content
agosto 2, 2010 / cassiomarques

Como testar autocomplete com Cucumber + Capybara + Selenium

Uma dica rápida sobre como escrever testes funcionais para aquele autocomplete bacana que você colocou na sua aplicação.

Para testar campos de texto que possuam autocomplete você vai precisar usar algum driver que seja capaz de executar JavaScript. Com o Capybara, os dois mais comuns são o Selenium (através do Selenium Webdriver) e o Culerity. No meu caso o Selenium funcionou melhor. A idéia é simples:

  1. Digite alguns caracteres no campo, o que deve disparar a busca do autocomplete
  2. Selecione a opção desejada
  3. Verifique o resultado obtido

Isso pode facilmente ser obtido com a seguinte feature:


Quando eu preencho "Programadores" com "Dijkstra"
E seleciono a opção que contém "Edsger Dijkstra" no autocomplete
E pressiono "Pesquisar"
Então eu devo ver "Ele está observando você."

E o step para a seleção da opção do autocomplete pode ser implementado assim:

Quando(/^seleciono a opção que contém "([^\"]*)" no autocomplete$/) do |text|
  locate("li:contains('#{text}')").click
end

Aqui eu me aproveito da estrutura do HTML gerado pelo plugin de autocomplete do jQuery, que gera os resultados como uma lista, onde cada item está em um elemento <li>. Note que essa solução pode não funcionar com outros tipos de autocomplete.

A solução acima é bastante simplista, visto que ela poderia não funcionar caso houvesse mais de um autocomplete na mesma página. Usando outros seletores CSS na implementação do step é possível filtrar um pouco mais os elementos encontrados na página.

Com o Capybara, basta colocar a tag @selenium sobre o cenário em seu arquivo .feature para forçar que a execução ocorra usando este driver.

One Comment

Deixe um comentário
  1. Gabriel Sobrinho / ago 3 2010 2:18 am

    Valeu pela dica, precisei disso algum tempo atrás e fiquei meio perdido.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: