How to automate dragging and dropping files into a mute browser window?

Question

I am creating a web application that includes drag'n'dropping files from the user system to a browser window.

I want to automate user interaction with the user interface using one of the available headless browsers (for test-based development purposes), so the virtual DOM receives a file drop event.

I spent two hours looking for a complete solution without any success. The only thing that can be automated is to upload a single file using the input [type = file]. This is not what I want.

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

Answer 1

I don't know a good solution, but I have a few workarounds:

You can run the browser on a VM or Xnest or VNC server on Linux. This gives you an interface. Protocols such as VNC also allow you to emulate a mouse, so you can open a file browser and drag and drop a file.

Pro: The real thing.
Con: Fragile. A lot of setup work.

What exactly are you testing? Component of downloading files in a browser? Or process files on the server?

If you are using an existing / nested component for multi-file upload, then why are you testing it? Not the people who wrote this for you, test? Why copy this effort?

If you're just wondering if the server handles files correctly, use the HTTP client library to manually download. Use an HTTP proxy such as Charles to find out what happens between the real client and server, if necessary.

If you want to test the interaction of your application and widget, everything becomes complicated. To check this, you need to enable logging / debugging in your browser to find out what events are triggered during the drop. JavaScript allows you to create any event. For phantoms, try --webdriver-loglevel=DEBUG

When you know what the drop event looks like, create an artificial file and send it to the widget.

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

This should give you enough information to create such an event from a test case. I suggest using jQuery during tests, as it has a good structure for creating events from scratch.