Attach file with Capybara - Element is not currently visible and > so may not be interacted with

Question

I'm trying to attach file using Capybara. Input element is:

<input type="file" multiple="multiple" name="uploadfile[]" style="position: absolute; margin: 0px 0px 0px -175px; padding: 0px; width: 220px; height: 30px; font-size: 14px; opacity: 0; cursor: pointer; display: block; z-index: 2147483583; top: 3331px; left: 436px;">

Code for attaching file is:

attach_file 'uploadfile[]', '/home/user/image.jpg'

But it returns error:

biske@biske:~/Documents/Aptana Studio 3 Workspace/AddPlace$ ruby
test.rb  [remote server]
file:///tmp/webdriver-profile20130223-30353-dw596v/extensions/fxdriver@googlecode.com/components/command_processor.js:7537:in
`fxdriver.preconditions.visible': Element is not currently visible and
so may not be interacted with
(Selenium::WebDriver::Error::ElementNotVisibleError)  from [remote
server]
file:///tmp/webdriver-profile20130223-30353-dw596v/extensions/fxdriver@googlecode.com/components/command_processor.js:10207:in
`DelayedCommand.prototype.checkPreconditions_'  from [remote server]
file:///tmp/webdriver-profile20130223-30353-dw596v/extensions/fxdriver@googlecode.com/components/command_processor.js:10226:in
`DelayedCommand.prototype.executeInternal_/h'   from [remote server]
file:///tmp/webdriver-profile20130223-30353-dw596v/extensions/fxdriver@googlecode.com/components/command_processor.js:10231:in
`DelayedCommand.prototype.executeInternal_'   from [remote server]
file:///tmp/webdriver-profile20130223-30353-dw596v/extensions/fxdriver@googlecode.com/components/command_processor.js:10171:in
`DelayedCommand.prototype.execute/<'  from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/response.rb:52:in
`assert_ok'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/response.rb:15:in
`initialize'  from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/http/common.rb:59:in
`new'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/http/common.rb:59:in
`create_response'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/http/default.rb:66:in
`request'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/http/common.rb:40:in
`call'  from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/bridge.rb:615:in
`raw_execute'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/bridge.rb:593:in
`execute'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/remote/bridge.rb:400:in
`sendKeysToElement'   from
/usr/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.29.0/lib/selenium/webdriver/common/element.rb:126:in
`send_keys'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/selenium/node.rb:33:in
`set'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/node/element.rb:79:in
`block in set'  from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/node/base.rb:78:in
`synchronize'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/node/element.rb:79:in
`set'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/node/actions.rb:144:in
`attach_file'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/session.rb:341:in
`block (2 levels) in <class:Session>'   from
/usr/lib/ruby/gems/1.9.1/gems/capybara-2.0.2/lib/capybara/dsl.rb:51:in
`block (2 levels) in <module:DSL>'  from test.rb:19:in `add_place'
  from test.rb:11:in `run'  from test.rb:33:in `<main>'

How to solve this issue?

Answer 1

The :visible option did nothing for me. There seems to be a :make_visible option:

attach_file 'uploadfile[]', '/home/user/image.jpg', :make_visible => true

or instead of true with a Hash of custom style properties which will be set to overwrite before attempting to open the file dialog.

Answer 2

attach_file('locator', 'path/to/file.jpg', :visible => false )

Should do the trick. Capybara ignores hidden fields by default, all you need to do is pass in a visibility option

Answer 3

Because Ruby is not very good with page loading, if I were you, I'll solve it like this:

!30.times { if (driver.find_element(:xpath, "//input[@type='file']")rescue false) then break else sleep 1; end }

Basically the code above will try 30 times (every 1 sec) to search for the element that you are trying to attach and will exit the loop if the element is present. You can use variables after the break or after the sleep command to direct your flow if you want.

Best of luck