Selenium can't find fields with type number

Question

I'm having a problem getting Cucumber to find fields with the HTML5 type="number". I'm not a big fan of the way they look in the browser, but I have a few fields that need the number keyboard on mobile, and this seems to be the easiest way to get it. I'm using SimpleForm to build forms and when I set :as => :text everything works, but if I set :as => :number, the fields don't get filled out. I don't get any error, the field just doesn't get filled.

To be specific, when I have a step like this:

And I fill in "application_form_age" with "52"

then this tag won't get filled in:

<input class=​"numeric integer required" id=​"application_form_age" min=​"0" name=​"application_form[age]​" size=​"50" step=​"1" type=​"number">​

but this one works:

<input class=​"string required" id=​"application_form_age" name=​"application_form[age]​" size=​"50" type=​"text">​

Also, it only happens in @javascript scenarios. In situations where @javascript isn't necessary and the scenario doesn't launch a browser, that works fine too.

Versions of things:

capybara (2.2.1)
cucumber (1.3.14)
selenium-webdriver (2.41.0)
simple_form (2.1.1)
webrat (0.7.3)

Firefox 29.0

I'm stumped. I tried yanking out a bunch of my application JS and CSS to see if something I'm doing is breaking it, but no luck with that. I'm just patching it out by forcing those fields not to have HTML5 type number in my test environment, but I don't want to live like that. Is anyone else seeing this? I haven't been able to find any references to it, which makes it seem like it's something I'm doing. But I haven't been able to figure it out.

Answer 1

First off, I think you have some confusion regarding those frameworks. Cucumber is a BDD framework, which doesn't automate browsers in any way, so this question has nothing to do with it (This is why I removed it from your question title).

Looks like you are using Capybara, which is an ATDD framework. You might probably consider showing us the Capybara code you use in order diagnose your problem.

Under the hood, I assume you use Selenium WebDriver, I can confirm that Selenium works fine with <input type="number"> (Tested with Firefox 28, which is the one selenium-webdriver (2.41.0) supports to).

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox

DEMO_PAGE = <<-eos
  data:text/html,
  <input class=​"numeric integer required" id=​"application_form_age" min=​"0" name=​"application_form[age]​" size=​"50" step=​"1" type=​"number">
eos

driver.get(DEMO_PAGE)
driver.find_element(:tag_name, 'input').send_keys('25')

So you might want to create a similar demo using Capybara to test this functionality.

If the demo works, then we need take a closer look at your application. Othwewise, please raise a ticket for Capybara developers.

Answer 2

Ok, I have found firefox has an option to disable number input field support: 'dom.forms.number'.

So if you add the following lines in your env.rb, number input gets disabled and tests work again.

Capybara.register_driver :selenium do |app|
  profile = Selenium::WebDriver::Firefox::Profile.new
  profile["dom.forms.number"] = false
  Capybara::Selenium::Driver.new(app, :browser => :firefox, :profile => profile)
end