4

I'm building a web application which involves drag'n'dropping of files from user's system into browser's window.

I want to automate the user's interaction with the UI using one of the headless browsers available (for the purpose of test driven development) so the virtual DOM gets files drop event.

I spent two hours looking for the out-of-the-box solution without any success. The only thing that can be automated is uploading a single file with input[type=file]. That's not what I want.

Is there any ready to use solution for Mac OS X or Linux?

Nek
  • 1,909
  • 20
  • 31
  • I meant document actually. I'll edit the question. – Nek Aug 13 '13 at 13:01
  • Hmm... actually I don't know how to put it in a different way. I need the DOM to get drop event. The topmost element to get it is "document". – Nek Aug 13 '13 at 13:02
  • I've added "...so the virtual DOM gets files drop event." I hope it clarifies. – Nek Aug 13 '13 at 13:04

1 Answers1

1

I know no good solution but I have a couple of workarounds:

You can run the browser in a VM or Xnest or VNC server on Linux. That gives you a UI. Protocols like VNC also allow you to emulate the mouse, so you can open a file browser and really drag a file over.

Pro: Does the real thing.
Con: Brittle. Lots of work to set up.

What exactly are you testing? The file upload component in the browser? Or processing the files on the server?

If you're using an existing / boxed component for multi file upload, then why are you testing it? Don't the people who wrote it for you test? Why replicate this effort?

If you're only interested whether the server processes the files correctly, use a HTTP client library to manually upload. Use a HTTP proxy like Charles to see what happens between the real client and the server if necessary.

If you want to test the interaction of your app and the widget, things get tricky. To test this, you need to enable logging/debugging in your browser to see which events are being triggered during the drop. JavaScript allows you to create any event. For phantomjs, try --webdriver-loglevel=DEBUG

When you know how the "drop" event looks like, create an artificial one and send it to the widget.

[EDIT] If you write your own file upload widget, then I suggest to log the "drop" event to the console. With many modern browsers, you will get an active element in the console that you can examine. Use this to find out which objects are used and what value is in each slot.

That should give you enough information to create such an event from a test case. I suggest to use jQuery during the tests since it has a nice framework to build events from scratch.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • I'm testing a custom file uploader. – Nek Aug 13 '13 at 15:39
  • And all your questions except one are answered in my original post. :) I can build a workaround but don't like the possible brittleness of it. Also I don't use jQuery. – Nek Aug 13 '13 at 15:45
  • Create a small test case which uses jQuery and which only tests the file uploader. That way, you can run the tests without having to start your huge real app. – Aaron Digulla Aug 14 '13 at 11:55
  • I can't get any useful info from your last comment. Please be more elaborate. Also why do you think my app is huge? :) Also why do you answer the questions I've never asked? I have a rather concrete request. There is a browser (preferably headless one), there is a drop event with FileList inside, and I want to simulate it somehow. – Nek Aug 15 '13 at 02:45
  • I'm trying to keep the answers a bit generic to make them useful for more than one person. I don't know of a browser which can simulate a file drop event out of the box and looking the lack of other answers, so does anybody else. – Aaron Digulla Aug 15 '13 at 07:33