Capybara::ElementNotFound: Unable to find file field "file"

Question

I am testing file upload i.e CSV. In my code as well as browser HTML I found file field but while testing the capybara is unable to find the file field. I tried hard and different approaches but unable to fix the problem. Here partial look like this:

#add_file_box
  %div.msg
  %h1.page-header
    = "Upload a CSV"
  %h4.title

  = form_tag dummy_path, multipart: true, class: "upload_csv" do
    = hidden_field_tag :dmp_id, @dmp.id
    .form-group
      .input-group
        %span.input-group-btn
          %span.btn.btn-primary.btn-file
            Choose file
            = file_field_tag :file, style: 'line-height: normal',  accept: "text/csv", class: "file_input"
        %input.form-control.input-custom{:readonly => "", :type => "text"}
    .form-group
      = submit_tag "Upload CSV", class: "btn btn-primary", id: "upload_csv"

And capybara test look like this

 within '.upload_csv' do
     page.attach_file('file', "#{Rails.root}/spec/acceptance/test_uploads/input_output.csv")
     click_button 'Upload'
   end

I will be thankful if you can help me fixing this problem?

Nuzzi

is the field visible on the page? – Moneybag

Yes the field is visible on the page. And the error message looks like this: Capybara::ElementNotFound: Unable to find file field "file" from /Users/theKing/.rvm/gems/ruby-2.1.2/gems/capybara-2.4.1/lib/capybara/node/finders.rb:41:in block in find' – Nuzzi

Try taking the page out of it. Like: attach_file('file', "#{Rails.root}/spec/acceptance/test_uploads/input_output.csv") – Moureaux

@TiagoFarias I had tried it but it doesn't help. – Nuzzi

Answer 1

Capybara 2x (capybara issue) doesn't find hidden elements by default.

You can either set ignore_hidden_elements to false:

Capybara.ignore_hidden_elements = false

Or simply add :visible option to your method:

within '.upload_csv' do
  attach_file('file', "#{Rails.root}/spec/acceptance/test_uploads/input_output.csv", visible: false)
    click_button 'Upload'
end

This solved my problem.

Note: :visible option is also supported by most of Capybara methods that internally work with Capybara::Query (like find, all, has_css?, have_selector etc.)

Nuzzi

So when I tried this, I got the following error. Any ideas? Capybara::Poltergeist::MouseEventFailed: Firing a click at co-ordinates [552.5, 617.5] failed. Poltergeist detected another element with CSS selector ... at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click'). – Unfeeling

Answer 2

In the case where the styling is hiding the file input you can also use the make_visible: true option on attach_file.

The possible option values are either a Hash of CSS values to apply to the file input (in order to make it visible), or true, which will attempt a few defaults.

From the docs:

make_visible (true, Hash) — A Hash of CSS styles to change before attempting to attach the file, if true, { opacity: 1, display: 'block', visibility: 'visible' } is used (may not be supported by all drivers).

Normative