量角器 - 如何在测试用例中使用ng-file-upload上传文件而无需更改代码？

Question

  

我正在使用https://github.com/danialfarid/ng-file-upload进行文件上传。我必须测试它，所以我写了量角器测试用例，但它不起作用。

代码

<div class="col-lg-12 up-buttons">
     <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

测试用例

it('upload file', function(){   
  var fileToUpload = 'C:/Users/Anusha/Desktop/demo.csv';
  var absolutePath = path.resolve(fileToUpload);
  $('input[type="file"]').sendKeys(absolutePath);
  browser.sleep(1500);
})

我可以上传文件但是在 rejFiles 模型中收到它而不是文件模型，尽管文件格式正确。有人可以建议我怎么做吗？

Answer 1

HTML

<div class="col-lg-12 up-buttons">
    <div ng-file-select="" ng-model="files" ng-model-rejected="rejFiles" class="btn btn-default" ng-multiple="false" ng-accept="'*.csv'"  ng-model-rejected="rejFiles" tabindex="0">Choose file</div>
</div>

测试用例

var path = require('path');
var fileToUpload = file_path;
var absolutePath = path.resolve(fileToUpload);
element.all(by.css('input[type="file"]')).then(function(items) {
  items[0].sendKeys(absolutePath);
});
browser.sleep(500);

Answer 2

运行时DOM元素更改存在问题。因此我们可以逐个元素获取运行时更改的属性，对于文件上载的情况，DOM使用'input [type =“ file”]'更改属性。无论是否有input标签用于上传元素。

element(by.css('input[type="file"]')).sendKeys(absolutePathOfFile);

Answer 3

我在这方面挣扎了一段时间，但发现在尝试ngf-select之前，我必须触发sendKeys元素上的点击。

it('upload file', function(){
  var fileToUpload = 'C:/Users/Anusha/Desktop/demo.csv';
  var absolutePath = path.resolve(fileToUpload);
  var button = element(by.css('[ng-file-select]');
  button.click();
  var input = element(by.css('input[type="file"]'));
  input.sendKeys(absolutePath);
});

点击ngf-select指令按钮后，在页面底部通过ng-file-upload添加输入。

另外，我能够为文件使用相对路径（相对于spec文件的位置），如下所示：

it('upload file', function(){
  var path = require('path');
  var fileToUpload = '../demo.csv';
  var absolutePath = path.resolve(__dirname, fileToUpload);
  var button = element(by.css('[ng-file-select]');
  button.click();
  var input = element(by.css('input[type="file"]'));
  input.sendKeys(absolutePath);
});

这假设您已经运行npm install path --save-dev。

这是使用Protractor 2.0.0和ng-file-upload 4.0.4

Answer 4

绝对路径帮助了我：

var fileToUpload = 'D:/file.csv';
var absolutePath = path.resolve(fileToUpload);
$('input[type="file"]').sendKeys(absolutePath);
element(by.css('#doUpload')).click();

（还讨论了here）