How to test Dropzone.js upload with Rails, Cucumbe

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

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 2

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.