Question

如何E2E测试ng-file-upload？

<div id="fileBTSToUpload"  ngf-drop ngf-select ng-model="fileBTS"  class="drop-box" ngf-accept="'.txt'" ngf-drag-over-class="'dragover'"> Drag and Drop here
        </div>

Answer 1

问题在于，仅使用Protractor，您无法将文件实际拖放到指定的页面上。另一个问题是，如果您设法打开浏览器的上传对话框窗口，则无法通过Protractor / WebDriverJS来控制它。

一种常见的方法是找到input元素type="file"并向其发送包含您要上传的文件的绝对路径的密钥。 input必须位于页面上才能上传，但input通常是隐藏的，您需要将其设为可见才能执行＆＃34;发送密钥＆＃34;。请参阅此处的示例解决方案：

How to upload file in angularjs e2e protractor testing

Answer 2

将您的量角器版本设置为＆＃34; 1.6.1＆＃34;和ng-file-upload到＆＃34; 9.0.1＆＃34;。要做到这些，请按以下步骤操作： npm install protractor@1.6.1

编辑文件：bower.json并设置版本：

"ng-file-upload": "~9.0.1",

然后执行以下命令：

bower install

Angular代码还必须包含一个按钮才能工作：

<div id="fileBTSToUpload"  ngf-drop ngf-select ng-model="fileBTS"  class="drop-box" ngf-accept="'.txt'" ngf-drag-over-class="'dragover'"> Drag and Drop
        </div>

        <button id="btn2" ng-click="uploadFileToUrl(fileBTS, btsUrl);">upload</button>

E2E测试的Jasmine代码如下：

it('a sample test...',function(){
//Assemble
browser.get('/the_page_url');
//Act
var fileToUpload = './some-file.csv';
var path = require('path');
var absolutePath = path.resolve(__dirname,fileToUpload);
var input = element(by.css('input[type=file]'));
input.sendKeys(absolutePath);
element(by.id('btn2')).click();
browser.waitForAngular();  
//Assert
expect(2).toEqual(2);
//browser.sleep(5000);
//browser.pause();  
});

要安装路径，请执行以下操作：

npm install path

ng-file-upload的量角器E2E测试

2 个答案: