StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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.</p> <pre><code>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 </code></pre> <p><strong>P.S.:</strong> remember to replace #fileDropArea with ID of your drop area.</p> <p><strong>P.P.S:</strong> don't use evaluate_script in place of execute_script, otherwise selenium get stuck evaluating complex jQuery objects!</p> <p><strong>UPDATE:</strong> I've write a method you can reuse and do the stuff written above.</p> <pre><code>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 </code></pre> <p>Usage: </p> <pre><code>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 </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload