如何在angularjs e2e量角器测试中上传文件
Posted
技术标签:
【中文标题】如何在angularjs e2e量角器测试中上传文件【英文标题】:How to upload file in angularjs e2e protractor testing 【发布时间】:2014-02-13 19:57:08 【问题描述】:我想使用 angularjs e2e 测试来测试文件上传。您如何在 e2e 测试中做到这一点?我通过 grunt karma 运行我的测试脚本。
【问题讨论】:
***.com/questions/13321994/… 【参考方案1】:这就是我的做法:
var path = require('path');
it('should upload a file', function()
var fileToUpload = '../some/path/foo.txt',
absolutePath = path.resolve(__dirname, fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
element(by.id('uploadButton')).click();
);
-
使用
path
模块解析您要上传的文件的完整路径。
设置 input type="file" 元素的路径。
点击上传按钮。
这不适用于 Firefox。量角器会抱怨,因为元素不可见。要在 Firefox 中上传,您需要使输入可见。我就是这样做的:
browser.executeAsyncScript(function(callback)
// You can use any other selector
document.querySelectorAll('#input-file-element')[0]
.style.display = 'inline';
callback();
);
// Now you can upload.
$('input[type="file"]').sendKeys(absolutePath);
$('#uploadButton').click();
【讨论】:
+1 这行得通。 Andres,您应该向 OP 寻求反馈,因为这可能会被接受为正确答案。 也使用量角器。 FWIW,__dirname
有时指向一个临时目录(可能是测试运行器复制测试的地方)。如果是这种情况,您可以使用process.cwd()
而不是__dirname
。
这在 chrome 中对我有用,但对于其他浏览器,量角器抱怨该元素不可见......有什么想法吗?
您无法使用 Firefox 上传,因为该元素不可见。您需要使元素可见以设置路径值。查看更新的答案。【参考方案2】:
你不能直接。
出于安全原因,您不能在 ngScenario 等功能测试套件中模拟正在系统上选择文件的用户。
使用Protractor,既然是基于WebDriver的,应该可以使用this trick
问:WebDriver 是否支持文件上传?答:是的。
您不能直接与本机操作系统文件浏览器对话框交互, 但我们会做一些魔术,所以如果你打电话 WebElement#sendKeys("/path/to/file") 在文件上传元素上,它确实 正确的事情。确保你没有 WebElement#click() 文件 上传元素,否则浏览器可能会挂起。
这很好用:
$('input[type="file"]').sendKeys("/file/path")
【讨论】:
这似乎没有回答问题,并链接到另一个网站【参考方案3】:这里是 Andres D 和 davidb583 的建议的组合,在我解决这个问题时会有所帮助...
我试图对 flowjs 控件执行量角器测试。
// requires an absolute path
var fileToUpload = './testPackages/' + packageName + '/' + fileName;
var absolutePath = path.resolve(__dirname, fileToUpload);
// Find the file input element
var fileElem = element(by.css('input[type="file"]'));
// Need to unhide flowjs's secret file uploader
browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileElem.getWebElement());
// Sending the keystrokes will ultimately submit the request. No need to simulate the click
fileElem.sendKeys(absolutePath);
// Not sure how to wait for the upload and response to return first
// I need this since I have a test that looks at the results after upload
// ... there is probably a better way to do this, but I punted
browser.sleep(1000);
【讨论】:
【参考方案4】:var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);
这对我有用。
【讨论】:
【参考方案5】:这是我在firefox上上传文件所做的,这个脚本使元素可见以设置路径值:
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
【讨论】:
【参考方案6】:如果上述解决方案不起作用,请阅读本文
首先,为了上传文件,应该有一个input
元素来获取文件的路径。通常,它紧挨着“上传”按钮... 但是我已经看到了,当按钮周围没有输入时,这似乎令人困惑。保持蛤蜊,输入必须在页面上!尝试在 DOM 中查找具有“上传”或“文件”之类的输入元素,请记住它可以在任何地方。
找到它后,获取它的选择器,然后输入文件的路径。请记住,它必须是绝对路径,从您的根目录开始(MAC 用户为/something/like/this
,Windows 为C:/some/file
)
await $('input[type="file"]').sendKeys("/file/path")
这可能行不通,如果...
protractor 的 sendKeys 只能输入可见的输入。通常,输入将被隐藏或具有0
像素大小。你也可以解决这个问题
let $input = $('input[type="file"]');
await browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
$input.getWebElement()
);
【讨论】:
【参考方案7】:我意识到我正在测试的网络应用程序中的文件输入只有在使用 javascript 滚动到视图时才在 Firefox 中可见,因此我在 Andres D 的代码中添加了 scrollIntoView() 以使其适用于我的应用程序:
browser.executeAsyncScript(function (callback)
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
);
(我还删除了文件输入元素的所有样式)
【讨论】:
【参考方案8】://从C:\目录上传文件
var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));
fileElem.sendKeys(absolutePath);
cb();
;
【讨论】:
那么变量fileToUpload
是干什么用的?【参考方案9】:
如果你想选择一个文件而不打开下面的弹出窗口就是答案:
var path = require('path');
var remote = require('../../node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
【讨论】:
【参考方案10】:当前记录的解决方案仅在用户加载 jQuery 时才有效。在所有不同的情况下,用户都会收到这样的错误:Failed: $ is not defined
我建议使用原生 angularjs 代码记录解决方案。
例如我会建议而不是建议:
$('input[type="file"]') .....
建议:
angular.element(document.querySelector('input[type="file"]')) .....
后者更标准,在 angular 之上,更重要的是不需要 jquery
【讨论】:
以上是关于如何在angularjs e2e量角器测试中上传文件的主要内容,如果未能解决你的问题,请参考以下文章
如何使用“ng e2e”对节点服务器而不是 webpack-dev-server 运行量角器测试