如何在angularjs e2e量angular器testing中上传文件
我想用angularjs e2etesting来testingfile upload。 你如何在e2etesting中做到这一点？ 我通过咕噜的业力运行我的testing脚本。
这是我如何做到的：
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模块来parsing您想上传的文件的完整path。 - 设置inputtypes=“文件”元素的path。
- 点击上传button。
这不会在Firefox上工作。 量angular器会抱怨，因为元素不可见。 要在Firefox中上传，您需要使input可见。 这就是我所做的：
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();
你不能直接。
出于安全原因，您不能在ngScenario等functiontesting套件中模拟正在系统中select文件的用户。
使用量angular器，因为它是基于WebDriver，应该可以使用这个技巧
这是Andres D和davidb583的build议的组合，当我通过这个工作的时候会帮助我…
我正在尝试对flowjs控件执行量angular器testing。
// 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);
我意识到，我正在testing的Web应用程序中的文件input仅在Firefox中使用JavaScript滚动到视图中时才可见，所以我在Andres D的代码中添加了scrollIntoView（）以使其适用于我的应用程序：
browser.executeAsyncScript(function (callback) { document.querySelectorAll('input')[2] .style = ''; document.querySelectorAll('input')[2].scrollIntoView(); callback(); });
（我也删除了文件input元素的所有样式）
这是我做的上传文件在Firefox上，这个脚本使元素可见，以设置path值：
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
var imagePath = 'http://placehold.it/120x120&text=image1'; element(by.id('fileUpload')).sendKeys(imagePath);
这是为我工作。
目前logging的解决scheme将工作只有当用户加载jQuery。 我所有不同的情况下，用户将得到这样一个错误：失败：$未定义
我会build议使用原生的angularjs代码来logging一个解决scheme。
例如，我会build议，而不是build议：
$('input[type="file"]') .....
build议：
angular.element(document.querySelector('input[type="file"]')) .....
后者更为标准，更重要的是不要求jquery
