Skip to content
fevereiro 12, 2010 / cassiomarques

Testando inputs com máscaras JavaScript usando Cucumber + Selenium

Continuando a série sobre Cucumber + Selenium…

Existem diversas bibliotecas JavaScript com a função de criar máscaras para inputs de texto em forms, mas de forma geral todas funcionam baseadas em alguns eventos como keypress, keydown, etc. Precisei criar testes com Cucumber + Selenium para uma parte da aplicação que possui muitas destas máscaras. Minha primeira tentativa foi a forma tradicional (e neste caso ingênua), usando helpers do Webrat:

Quando /^preencho "(.*)" com "(.*)"$/ do |field, value|
  fill_in field, :with => value
end

Não funcionou, pois quando o Webrat insere texto em um campo do form, mesmo que através da API “ponte” existente entre ele e o Selenium, nenhum evento é lançado. Ou seja, consigo inserir qualquer coisa, violando a máscara. Não há reprodução do comportamento por não ocorrerem eventos no JavaScript.

Minha segunda tentativa foi baixar pro nível do Selenium e usar algum método que realmente digitasse nos campos. Tentei então o método ‘type’, mas ele acabou funcionando de forma similar ao ‘fill_in’ do Webrat, não lançando os eventos. Por fim, encontrei a solução no método ‘type_keys’ do Selenium:

Quando /^digito "([^\"]*)" em "([^\"]*)"$/ do |value, field|
  selenium.type_keys("css=input##{field}", value)
end

O método ‘type_keys’ funciona como se realmente houvesse alguém usando um teclado para inserir os dados, digitando-os caracter por caracter, enquanto os eventos JavaScript são corretamente lançados. Funciona perfeitamente.

Para escrever os cenários, usei trechos parecidos com isso:


Quando limpo o campo "foobar"
E digito "1x2y3" em "foobar"
Então o campo "foobar" deve conter "123"

Na primeira linha limpo tudo o que está dentro do campo. Em seguida realizo a digitação usando o step descrito acima com o ‘type_keys’ e depois verifico o valor atual do campo, que deve ter sido filtrado. Neste exemplo, o campo não pode permitir caracteres não numéricos. Estou passando sempre o id do input, mas isso pode ser adaptado alterando-se o selector CSS usado nos métodos do Selenium. O código dos demais steps é algo como:

Quando /^limpo o campo "([^\"]*)"$/ do |field|
  fill_in field, :with => ""
end

Então /^o campo "([^\"]*)" deve conter "([^\"]*)"$/ do |field, value|
  selenium.value("css=input##{field}").should == value
end

Usando essa técnica é possível variar os valores digitados/esperados para os inputs, tudo dentro do mesmo cenário.

2 Comentários

Deixe um comentário
  1. Lucas Catón / fev 13 2010 12:11 am

    Boa Cássio! Valeu por mais uma :)

  2. diegorv / set 16 2011 5:58 am

    Pena, achei que isso ia ser minha solução, mas não funciona mais! :(

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: