问题描述:

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?

网友答案:

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.

相关阅读:
Top