Protractor

Question

I am using https://github.com/danialfarid/ng-file-upload for file upload. I have to test it so I wrote protractor test case but it not working.

代码

<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 模型而不是 files 模型中接收的，尽管文件格式是正确的。谁能建议我怎么做？

Answer 1

绝对路径对我有帮助：

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

（也讨论了 here）

Answer 2

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 3

我为此苦苦挣扎了一段时间，但发现 在尝试 sendKeys.[= 之前，我必须触发对 ngf-select 元素的点击16=]

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 添加输入。

此外，我能够像这样为文件使用相对路径（相对于规范文件的位置）：

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

运行时 DOM 元素更改 存在问题。因此我们可以逐个元素的运行时间更改属性并且对于文件上传情况，DOM 将属性更改为 'input[type="file"]'。否不管上传元素是否有input标签。

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

Protractor - 如何在不更改代码的情况下在测试用例中使用 ng-file-upload 上传文件？

Protractor - How to upload file using ng-file-upload in test case without changing code?

file-upload

angularjs