如何使用Capybara和Dropzone.js测试上传文件？
如何使用Capybara和Dropzone.js测试上传文件？
提问于 2015-10-01 14:10:04
我已经改用Dropzone.js插件来实现文件的拖放上传。如何编写Capybara测试以确保此功能继续工作？
以前我有一个带有输入文件元素的模板：
<input type="file" name="attachments">测试很简单：
When(/^I upload "([^"]*)"$/) do |filename|
attach_file("attachments", File.expand_path(filename))
# add assertion here
end然而，这不再有效，因为Dropzone没有可见的文件输入。
回答 4
Stack Overflow用户
发布于 2020-06-24 17:30:22
这些天，我发现这种方式更加优雅
page.attach_file(Rails.root.join('spec/fixtures/files/avatar.png')) do
page.find('#avatar-clickable').click
end其中是，在我的例子中，#avatar-clickable是一个包含Dropzone form标签的div。
Stack Overflow用户
发布于 2019-06-05 03:14:59
基于@deepwell的答案，这里有一个解决方案，使用vanilla JS来处理事件和事件分派，并使用中立选择器来处理dropzone：
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故意使用全局变量，所以我可以在js控制台中测试，但可以自由地确定它们的范围。
Stack Overflow用户
发布于 2016-07-07 06:40:46
如果有人感兴趣，我将@deepwell的函数移植到javascript中，以便将其与javascript风格的selenium一起使用：
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);
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32880524
复制相关文章
相似问题
腾讯云开发者
