How to test Dropzone.js upload with Rails, Cucumber and Capybara?

Question

I have a Rails project using Cucumber and Capybara for tests. I have a file upload page using Dropzone.js.

My uploads work great using the dialog box or drag and drop. Testing is another matter.

I have the following field in my form:

<input id="photo_image" multiple="multiple" name="image" type="hidden">

However, in the step definitions, I've tried a few methods of finding and attaching the file data, but none of them work.

I've tried fill_in:

fill_in "photo_image",  with: photo

I've tried find with css selectors:

find('#photo_image').set photo

I've tried find with xpath:

find(:xpath, "//input[@id='photo_image']").set photo

But none of them see the hidden field.

Unable to find css "#photo_image" (Capybara::ElementNotFound)

Unable to find xpath "//input[@id='photo_image']" (Capybara::ElementNotFound)

Unable to find field "photo_image" (Capybara::ElementNotFound)

Is there any testing method that can handle the upload using Dropzone.js or is it hopeless?

Answer 1

Capybara 2.1 doesn't find hidden elements by default.

You can either set ignore_hidden_elements to false:

Capybara.ignore_hidden_elements = false

or add :visible option to your method:

attach_file('photo_image', path_to_file, visible: false)

I prefer the second variant as in most of cases elements to be found in tests are visible and it's better to keep Capybara to throw exception if one of them is hidden.

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.)

Answer 2

Since I just had to help someone figure this out, this is an updated answer for current versions of Capybara and dropzone.js.

By default Dropzone adds a hidden file field to the body of the page at initialization with a class of 'dz-hidden-input'. To add a file to that for testing purposes you can do

attach_file(file_path, class: 'dz-hidden-input', make_visible: true)

Explanation: There is no known id/name/label text so we don't pass a locator, instead we pass the class option to limit the found file inputs to ones with the specified class. Then we specify the make_visible: true to have Capybara temporarily change the CSS so the file input becomes visible, adds the file, then restores the original CSS.

Answer 3

The point here is: dropzone only uses the input field as a marker or as a fallback. It deletes it from the dom. If you inspect the source of the page after successful dropzone initialization you will not be able to find the element any more.

So it's not about a hidden input field but about a deleted one 'which is gone' and can't be found since it's not part of the dom anymore.

What I ended up doing was adding the input field manually in the specs:

page.execute_script(%|$('#your-form').append('<input id="photo_image" name="image" type="file">');|)

This will make your form behave as in the dropzone fallback mode.

Answer 4

You do not need to add a new page execution, all you need to do is find .dz-hidden-input and attach_file to it...

   attach_file("path/to/file", class: "dz-hidden-input", make_visible: true)

Answer 5

Dropzone.js uses the next input to attach files(take it from my website):

<input type="file" multiple="multiple" class="dz-hidden-input" accept="image/*,application/pdf" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

So everything you need is just to run the following code to attach file through dropzone.js:

page.find('.dz-hidden-input', visible: false).set('file_path_here'))

Answer 6

U can use

it "should upload a file" do
  visit upload_file_path
  attach_file "uploadfile(id of field)", /path/to/file/to/upload
  click_button "Upload File"
end

Steps between do ... end should work with both rspec + capybara or cucumber + capybara

and why not use :js => true , It will help out to find hidden elements tooo..

Answer 7

I think Capybara is not finding is because you're not creating a file field.

<input id="photo_image" multiple="multiple" name="image" type="file">

type="file" is what you want. An input with type="hidden" should just accept a string.

I too am trying to test a dropzone.js area in rspec/capybara and hitting a wall. Did you ever get this figured out?

I was trying the solution here, with no luck: Using Selenium to imitate dragging a file onto an upload element

Answer 8

your input type is hidden,pls remove it as capybara wont be able to see it on the browser.Try this,it works for me:-

web_steps.rb

When /^I attach the file "([^"]*)" to "([^"]*)"$/ do |path, field|
  attach_file(field, File.expand_path(path))
end

upload_picture.feature

 ###.....some other steps too
 When I attach the file "app/assets/images/default/accept.jpg" to "image[image]"