Using Selenium to imitate dragging a file onto an upload element

Question

I have a web page that opens a div when you click a button. This div allows you to drag a file from your desktop onto its area; the file then gets uploaded to the server. I'm working with the Ruby implementation of Selenium.

By using the JavaScript debugger in Firefox, I can see that an event called "drop" is being passed to some JavaScript code "handleFileDrop(event)". I presume that if I were to create a mock event and fire it somehow that I could trigger this code.

If found an interesting article that seemed to point me in a promising direction, but I'm still short of figuring it all out. I am able to pass JavaScript to the page using Selenium's get_eval method. Calling methods using this.browserbot is getting me the elements I need.

So:

How do I build the file object that needs to be part of the mock drop event?
How do I fire the drop event such that it gets picked up as if I had dropped a file in the div?

micred · Accepted Answer · 2012-07-04 08:25:32Z

29

I post an RSpec test that simulate files drag and drop using Selenium webdriver. It use jQuery to make and trigger a fake 'drop' event.

This code simulate drag and drop of a single file. For sake of simplicity I've stripped code that allow multiple files dropping. Tell me if you need it.

describe "when user drop files", :js => true do
  before do
    page.execute_script("seleniumUpload = window.$('<input/>').attr({id: 'seleniumUpload', type:'file'}).appendTo('body');")

    attach_file('seleniumUpload', Rails.root + 'spec/support/pdffile/pdfTest.pdf')

    # Trigger the drop event
    page.execute_script("e = $.Event('drop'); e.originalEvent = {dataTransfer : { files : seleniumUpload.get(0).files } }; $('#fileDropArea').trigger(e);")
  end

  it "should ..." do
     should have_content '...'
  end

P.S.: remember to replace #fileDropArea with ID of your drop area.

P.P.S: don't use evaluate_script in place of execute_script, otherwise selenium get stuck evaluating complex jQuery objects!

UPDATE: I've write a method you can reuse and do the stuff written above.

def drop_files files, drop_area_id
  js_script = "fileList = Array();"
  files.count.times do |i|
    # Generate a fake input selector
    page.execute_script("if ($('#seleniumUpload#{i}').length == 0) { seleniumUpload#{i} = window.$('<input/>').attr({id: 'seleniumUpload#{i}', type:'file'}).appendTo('body'); }")
    # Attach file to the fake input selector through Capybara
    attach_file("seleniumUpload#{i}", files[i])
    # Build up the fake js event
    js_script = "#{js_script} fileList.push(seleniumUpload#{i}.get(0).files[0]);"
  end

  # Trigger the fake drop event
  page.execute_script("#{js_script} e = $.Event('drop'); e.originalEvent = {dataTransfer : { files : fileList } }; $('##{drop_area_id}').trigger(e);")
end

Usage:

describe "when user drop files", :js => true do
  before do
     files = [ Rails.root + 'spec/support/pdffile/pdfTest1.pdf',
               Rails.root + 'spec/support/pdffile/pdfTest2.pdf',
               Rails.root + 'spec/support/pdffile/pdfTest3.pdf' ]
     drop_files files, 'fileDropArea'
  end

  it "should ..." do
     should have_content '...'
  end
end

edited Jul 4, 2012 at 8:25

answered Jun 26, 2012 at 8:41

micred

1,5421 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ben Flynn Over a year ago

This looks good -- I'm not working with RSpec on my current project so if someone else can confirm this works in the comments then I'll accept this answer.

Szymon Przybył Over a year ago

Confirmed in rspec - works perfectly! Sir, you made my day! :)

Henry Wilson Over a year ago

Thanks for this - I've translated the code successfully to work for my tests using C#.

Henry Wilson Over a year ago

@Shmoopy added as an answer below :)

C.J. Over a year ago

Note here that drop_area_id is the html element that has the ondrop event handler attached to it.

|

Henry Wilson · Accepted Answer · 2014-05-05 09:54:21Z

3

As @Shmoopy asked for it, here's a C# translation of the code provided by @micred

private void DropImage(string dropBoxId, string filePath)
{
   var javascriptDriver = this.Driver as IJavaScriptExecutor;
   var inputId = dropBoxId + "FileUpload";

   // append input to HTML to add file path
   javascriptDriver.ExecuteScript(inputId + " = window.$('<input id=\"" + inputId + "\"/>').attr({type:'file'}).appendTo('body');");
   this.Driver.FindElement(By.Id(inputId)).SendKeys(filePath);

   // fire mock event pointing to inserted file path
   javascriptDriver.ExecuteScript("e = $.Event('drop'); e.originalEvent = {dataTransfer : { files : " + inputId + ".get(0).files } }; $('#" + dropBoxId + "').trigger(e);");
}

answered May 5, 2014 at 9:54

Henry Wilson

3,3615 gold badges34 silver badges47 bronze badges

1 Comment

Jay Sullivan Over a year ago

Thanks, this helped me. Although I got an error selenium Unexpected error. type property can't be changed. Fixed by changing $('<input id=\"" + inputId + "\"/>').attr({type:'file'}) to $('<input id=\"" + inputId + "\" type=\"file\" />').

Santiago Hernandez · Accepted Answer · 2011-03-04 02:41:32Z

0

You can use Blueduck Sda (http://sda.blueducktesting.com) Is an OSS that has implemented ALL selenium functions (It works with selenium RC) but it allows you to automate Windows actions. So you can test web, and interact with the OS. So you can make your test, and then, just tell the mouse to click on the element and drop it where you want!

Nice testing!

answered Mar 4, 2011 at 2:41

Santiago Hernandez

3062 silver badges8 bronze badges

2 Comments

Ben Flynn Over a year ago

That looks like it could be an option, though I am working in OSX, not Windows. I am also technically curious about interacting with the browserbot and firing events in the JavaScript context.

Stephan Over a year ago

As of this writing blueducktesting.com domain is for sale.

Gene · Accepted Answer · 2018-02-27 21:41:18Z

0

Note: you should also add

    e.originalEvent.dataTransfer.types = [ 'Files' ];

edited Feb 27, 2018 at 21:41

Gene

47.1k4 gold badges64 silver badges101 bronze badges

answered Mar 24, 2015 at 15:14

Michael Blake

2,1672 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using Selenium to imitate dragging a file onto an upload element

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related