2

I am writing a Selenium test case where one of the steps is to upload a file via Dropzone.js.

(As Selenium can run Javascript in the browser, so if it can be done programmatically in Javascript that would be fine too.)

I want to avoid going all the way to simulate opening the file browser window, selecting file etc, as that goes outside of what the web driver can handle and gets very complicated. In pseudo code, I'd like to do something like this:

1. Select some Dropzone element 2. Set file path 3. Submit (upload the file)

There is one likely approach mentioned in an existing question (Unable to upload file using python selenium webdriver on http://www.dropzonejs.com), which uses the "dz-hidden-input" element (a DOM file input).

Unfortunately it does not work (at least not in the current version of Dropzone) - after setting the file to the element, the Dropzone .files is still empty and no upload takes place.

After looking in the Dropzone source, I came up with a working solution by extending the above:

1. Set file path in the "dz-hidden-input" element 2. Use javascript to retrieve the File object from the element 3. Pass the file to dropzone.addFile(file)

But my concern is it is really a hack, as both the hidden-input and .addFile are not documented, and the test will break in the future if Dropzone changes implementation etc.

Is there any better / documented way to do this?

(To clarify - I am trying to upload a new file, not to show an existing file as mentioned in the Dropzone FAQ)

Community
  • 1
  • 1
Ken Goh
  • 1,049
  • 11
  • 8
  • We are doing through server side soap request and as a UI automation through selenium, for e.g. click to Input button -> Use web driver clipboard/java robot -> Paste/type file location + file name > Hit robot enter. I'm sorry but i don't have idea of dropzone js idea but these are the two ways other than the one that you want through javascript level uploading programatically. – Jitesh Sojitra Sep 11 '16 at 06:13
  • Thanks, yes I also got it working by using the Java Robot to simulate GUI actions as you mentioned (though I'd preferred not having to go that route if possible...). For reference, I found some sample code in this: http://sqa.stackexchange.com/questions/12851/how-can-i-work-with-file-uploads-during-a-webdriver-test, but for it to work I had to insert some Thread.sleep between actions. (also, although Dropzone isn't a regular file input element, it's possible to find it by ID then invoke click, which would open the file browser window). – Ken Goh Sep 14 '16 at 02:15
  • Yes you need to add sufficient no. of sleeps because that interacts with file explorer and takes some time for opening and after uploading also, it needs required sleeps according to file size. Adding as an answer... – Jitesh Sojitra Sep 14 '16 at 03:56

1 Answers1

1

Click to Input button -> Use web driver clipboard/java robot -> Paste/type file location + file name > Hit robot enter.

final String fileName = "textfile.txt";
final String filePath = "\\data\\public\\other\\" + fileName;
zUploadFile (filePath );

public void zUploadFile (String filePath) throws HarnessException {

    // Put path to your image in a clipboard
    StringSelection ss = new StringSelection(filePath);
    Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);
    // OR use java robot for entire filepath
    Thread.sleep(10000);

    // Imitate mouse events like ENTER, CTRL+C, CTRL+V
    Robot robot;
    try {
        robot = new Robot();
        robot.keyPress(KeyEvent.VK_CONTROL);
        robot.keyPress(KeyEvent.VK_V);
        robot.keyRelease(KeyEvent.VK_V);
        robot.keyRelease(KeyEvent.VK_CONTROL);

        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        robot.keyPress(KeyEvent.VK_ENTER);
        robot.keyRelease(KeyEvent.VK_ENTER);

    } catch (AWTException e) {
        e.printStackTrace();
    }
}
Jitesh Sojitra
  • 3,655
  • 7
  • 27
  • 46
  • Just to confirm that this approach does work. But as I mentioned in my question that I prefer not to go to simulate GUI actions like opening browser (and having to add arbitrary wait which is a bit non-deterministic), I am still looking for a solution that works with Dropzone directly (if such approach exist :-) – Ken Goh Sep 14 '16 at 04:40
  • Thanks Ken. Can you tell me which server side solution you use for your project? I meant this is 2nd alternative and 3rd one is probably through Dropzone that unfortunately i'm not aware as a tool. – Jitesh Sojitra Sep 14 '16 at 17:35
  • 1
    I use node.js on the server, taking standard HTTP multipart file request. But this is more of a client side issue. Dropzone.js is a client-side Javascript component, which can handle drag-drop file but for the simplest use case, it can act like a normal HTML file input control - click it and it opens a file browser. For a normal HTML file input control, upload file is easy using just WebDriver calls, e.g. `driver.findElement(By.xpath("//input[@type='file']")).sendKey("foo.txt")` ; but unfortunately the same doesn't work for the Dropzone component. – Ken Goh Sep 15 '16 at 05:18