Javascript 使用Selenium模拟将文件拖到upload元素上

我有一个网页，当你点击一个按钮时会打开一个div。此div允许您将文件从桌面拖到其区域；然后将文件上载到服务器。我正在使用Selenium的Ruby实现

通过在Firefox中使用JavaScript调试器，我可以看到一个名为“drop”的事件被传递给一些JavaScript代码“handleFileDrop（event）”。我假设，如果我要创建一个模拟事件并以某种方式激发它，我就可以触发此代码

如果我找到了一个似乎为我指明了一个有希望的方向，但我还没有完全弄清楚。我能够使用Selenium的get_eval方法将JavaScript传递到页面。使用this.browserbot调用方法可以获得所需的元素

因此：

如何构建该文件对象 需要成为模拟下降的一部分 事件

如何启动投递事件 这样它就会像我一样被捡起来 在div里丢了一个文件

您可以使用Blueduck Sda(http://sda.blueducktesting.com) 是一个已经实现了所有selenium功能的OSS（它与selenium RC配合使用），但它允许您自动执行Windows操作。因此，您可以测试web，并与操作系统交互。 因此，您可以进行测试，然后，只需告诉鼠标单击元素并将其放到您想要的地方

---

很好的测试

我发布了一个RSpec测试，该测试使用SeleniumWebDriver模拟文件拖放。 它使用jQuery生成并触发一个伪“drop”事件

此代码模拟单个文件的拖放。为了简单起见，我剥离了允许多个文件删除的代码。如果你需要，告诉我

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

---

正如@Shmoopy所要求的，这里是@micred提供的代码的C#翻译

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);");
}

private void DropImage（字符串dropBoxId，字符串filePath）
{
var javascriptDriver=此.Driver作为IJavaScriptExecutor；
var inputId=dropBoxId+“FileUpload”；
//将输入附加到HTML以添加文件路径
javascriptDriver.ExecuteScript（inputId+“=window.$（''）.attr（{type:'file'}）.appendTo（'body'）；”；
this.Driver.FindElement（By.Id（inputId））.SendKeys（filePath）；
//触发指向插入文件路径的模拟事件
javascriptDriver.ExecuteScript（“e=$.Event（'drop'）；e.originalEvent={dataTransfer:{files:“+inputId+”.get（0.files}}；$”（“#“+dropBoxId+”）.trigger（e）；”；
}

注意：您还应该添加

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

---

这看起来可能是一个选项，尽管我在OSX中工作，而不是在Windows中。我对在JavaScript上下文中与browserbot交互和触发事件在技术上也很好奇。截至本文撰写之时，blueducktesting.com域正在出售中。这看起来不错——我没有在我当前的项目中与RSpec合作，因此如果其他人可以在评论中确认这一点，我将接受这个答案。在RSpec中确认-很好用！先生，你让我高兴极了！：）谢谢-我已经成功地翻译了代码，以便使用C#进行测试。@Shmoopy在下面添加了一个答案：）请注意，

drop_area_id

是html元素，它附带了ondrop事件处理程序。谢谢，这对我有所帮助。虽然我得到了一个错误

selenium意外错误。无法更改类型属性

。通过将

$（''）.attr（{type:'file'}）更改为
$（''）
进行修复。
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);");
}

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