Skip to content
fevereiro 11, 2010 / cassiomarques

Forçando submit de forms com a tag button em testes de Cucumber + Selenium

Em um projeto atual nosso designer criou forms onde o submit é feito por um elemento button, com a seguinte estrutura:

<button class="button">
  <span>Salvar</span>
</button>

Todos os forms da aplicação foram projetados dessa forma (nosso designer já entrega a maioria das views prontas em HAML). Se um form possui uma tag <button>, a maioria dos browsers já entende que esse botão tem o papel de fazer o submit do form e tudo funciona bem. Entretando, passei por apuros quando comecei a escrever testes com o Cucumber + Selenium para as partes da aplicação que dependem de JavaScript para funcionar. Tentando a abordagem tradicional do Webrat para clicar em botões não funcionou. Ou melhor, funcionou, mas só para testes com Cucumber + Webrat, com Cucumber + Selenium não (os steps definidos para uso com o Webrat estão disponíveis e em geral funcionam bem nos testes com o Selenium):

When /^pressiono "(.*)"$/ do |button|
  click_button(button)
end

O locator do Webrat para o Selenium encontrava o botão, mas “pressioná-lo” não realizava o submit do form. Levei um tempo até perceber que seria necessário deixar mais explicito para o Selenium que este era um botão para submit, entretanto sem alterar o design do form. A solução foi simples (mas não tão óbvia):

<button class="button" type="submit">
  <span>Salvar</span>
</button>

Adicionando-se o atributo type=”submit” à tag <button> o submit passou a funcionar com o mesmo step do Webrat descrito acima.

2 Comentários

Deixe um comentário
  1. Carlos A. da Silva / fev 11 2010 7:00 pm

    Muito bacana Cássio,

    tive esse problema com botões testando com o Capybara e Culerity nas primeiras versões do Capybara, agora já está tudo funcionando…
    Só um typo: na última frase está type=”button”, seria type=”submit” certo?

    Valeu Cássio!

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: