blocks|key|4464296|text|如果有人感兴趣，我将@deepwell的函数移植到javascript中，以便将其与javascript风格的selenium一起使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4464297|this.dropInDropzone+=+function(filePath)+{
++var+script+=+"fakeFileInput+=+$('#fakeFileInput');+if+(fakeFileInput.length+===+0)+fakeFileInput+=+window.$('<input/>').attr({id:+'fakeFileInput',+type:'file'}).appendTo('body');";
++//+Generate+a+fake+input+selector
++return+driver.executeScript(script).then(function()+{
++++//+Attach+the+file+to+the+fake+input+selector
++++return+driver.findElement(webdriver.By.css('#fakeFileInput')).sendKeys(filePath);
++}).then(function()+{
++++//+Add+the+file+to+a+fileList+array
++++return+driver.executeScript("var+fileList+=+[fakeFileInput.get(0).files[0]]");
++}).then(function()+{
++++//+Trigger+the+fake+drop+event
++++script+=+"var+e+=+jQuery.Event('drop',+{+dataTransfer+:+{+files+:+[fakeFileInput.get(0).files[0]]+}+});+$('.dropzone')[0].dropzone.listeners[0].events.drop(e);"
++++return+driver.executeScript(script);
++});
};|code-block|syntax|javascript|4464298|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In case anyone is interested, I ported @deepwell's function to javascript, to use it with javascript flavoured selenium:

<pre class="lang-js prettyprint-override"><code>this.dropInDropzone = function(filePath) {
 var script = "fakeFileInput = $('#fakeFileInput'); if (fakeFileInput.length === 0) fakeFileInput = window.$('&lt;input/&gt;').attr({id: 'fakeFileInput', type:'file'}).appendTo('body');";
 // Generate a fake input selector
 return driver.executeScript(script).then(function() {
 // Attach the file to the fake input selector
 return driver.findElement(webdriver.By.css('#fakeFileInput')).sendKeys(filePath);
 }).then(function() {
 // Add the file to a fileList array
 return driver.executeScript("var fileList = [fakeFileInput.get(0).files[0]]");
 }).then(function() {
 // Trigger the fake drop event
 script = "var e = jQuery.Event('drop', { dataTransfer : { files : [fakeFileInput.get(0).files[0]] } }); $('.dropzone')[0].dropzone.listeners[0].events.drop(e);"
 return driver.executeScript(script);
 });
};
</code></pre>

blocks|key|4464583|text|基于@deepwell的答案，这里有一个解决方案，使用vanilla+JS来处理事件和事件分派，并使用中立选择器来处理dropzone：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4464584|++def+drop_in_dropzone(file_path,+zone_selector)
++++#+Generate+a+fake+input+selector
++++page.execute_script+<<-JS
++++++fakeFileInput+=+window.$('<input/>').attr(
++++++++{id:+'fakeFileInput',+type:'file'}
++++++).appendTo('body');
++++JS

++++#+Attach+the+file+to+the+fake+input+selector
++++attach_file("fakeFileInput",+file_path)

++++#+Add+the+file+to+a+fileList+array
++++page.execute_script("fileList+=+[fakeFileInput.get(0).files[0]]")

++++#+Trigger+the+fake+drop+event
++++page.execute_script+<<-JS
++++++dataTransfer+=+new+DataTransfer()
++++++dataTransfer.items.add(fakeFileInput.get(0).files[0])
++++++testEvent+=+new+DragEvent('drop',+{bubbles:true,+dataTransfer:+dataTransfer+})
++++++$('#{zone_selector}')[0].dispatchEvent(testEvent)
++++JS
++end|code-block|syntax|javascript|4464585|故意使用全局变量，所以我可以在js控制台中测试，但可以自由地确定它们的范围。|4464586|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Building off of @deepwell's answer which didn't quite work for me, here is a solution using vanilla JS for the events and event dispatching, and a neutral selector for the dropzone:

<pre class="lang-rb prettyprint-override"><code> def drop_in_dropzone(file_path, zone_selector)
 # Generate a fake input selector
 page.execute_script &lt;&lt;-JS
 fakeFileInput = window.$('&lt;input/&gt;').attr(
 {id: 'fakeFileInput', type:'file'}
 ).appendTo('body');
 JS

 # Attach the file to the fake input selector
 attach_file("fakeFileInput", file_path)

 # Add the file to a fileList array
 page.execute_script("fileList = [fakeFileInput.get(0).files[0]]")

 # Trigger the fake drop event
 page.execute_script &lt;&lt;-JS
 dataTransfer = new DataTransfer()
 dataTransfer.items.add(fakeFileInput.get(0).files[0])
 testEvent = new DragEvent('drop', {bubbles:true, dataTransfer: dataTransfer })
 $('#{zone_selector}')[0].dispatchEvent(testEvent)
 JS
 end
</code></pre>

uses global vars on purpose, so I could test in js console, but feel free to scope them.

blocks|key|4464394|text|这些天，我发现这种方式更加优雅|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4464395|page.attach_file(Rails.root.join('spec/fixtures/files/avatar.png'))+do
++page.find('#avatar-clickable').click
end|code-block|syntax|javascript|4464396|其中是，在我的例子中，#avatar-clickable是一个包含Dropzone+form标签的div。|offset|length|style|CODE|4464397|entityMap^0|0|0|B|H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

These days I find this way more graceful
<pre><code>page.attach_file(Rails.root.join('spec/fixtures/files/avatar.png')) do
 page.find('#avatar-clickable').click
end
</code></pre>
Where is in my case <code>#avatar-clickable</code> is a div which contain Dropzone form tag.

blocks|key|4464429|text|自Capybara+3.21.0以来，您可以像这样将文件放在元素上：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4464430|find(".dropzone").drop(Rails.root.join("spec/fixtures/file.txt"))|code-block|syntax|javascript|4464431|有关详细信息，请参阅Element#drop+source。|style|CODE|4464432|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/History.md#version-3210|1|https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/node/element.rb#L425^0|A|6|0|0|0|A|C|N|6|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@$A|12|B|13|K|L]]|9|@$A|14|B|15|1|16]]|C|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Since Capybara <a href="https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/History.md#version-3210" rel="nofollow noreferrer">3.21.0</a>, you can drop files on elements like this:
<pre class="lang-rb prettyprint-override"><code>find(&quot;.dropzone&quot;).drop(Rails.root.join(&quot;spec/fixtures/file.txt&quot;))
</code></pre>
See the <code>Element#drop</code> <a href="https://github.com/teamcapybara/capybara/blob/f7ab0b5cd5da86185816c2d5c30d58145fe654ed/lib/capybara/node/element.rb#L425" rel="nofollow noreferrer">source</a> for details.

I've switched to using the <a href="http://www.dropzonejs.com/" rel="noreferrer">Dropzone.js</a> plugin for drag-and-drop file uploads. How can I write a Capybara test to ensure this functionality keeps on working?

Previously I had a template with an input file element:

<pre><code>&lt;input type="file" name="attachments"&gt;
</code></pre>

And the test was simple:

<pre><code>When(/^I upload "([^"]*)"$/) do |filename|
 attach_file("attachments", File.expand_path(filename))
 # add assertion here
end
</code></pre>

However this no longer works because Dropzone doesn't have a visible file input.

How do you test uploading a file with Capybara and Dropzone.js?

jQuery

我已经改用插件来实现文件的拖放上传。如何编写Capybara测试以确保此功能继续工作？以前我有一个带有输入文件元素的模板：<input type="file" name="attachments">测试很简单：When(/^I upload "([^"]*)"$/) do |filename| attach_file...

问如何使用Capybara和Dropzone.js测试上传文件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Capybara和Dropzone.js测试上传文件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Capybara和Dropzone.js测试上传文件？
EN