如何上传angularjs E2E量角器测试文件 [英] How to upload file in angularjs e2e protractor testing

问题描述

我想用一个angularjs端到端测试，测试文件上传。如何在端到端测试中做到这一点？我通过咕噜人缘运行我的测试脚本。

解决方案

这是我如何做到这一点：

  VAR路径=要求（'路径'）;它（'应上传文件'，函数（）{
  VAR fileToUpload ='../some/path/foo.txt'，
      absolutePath = path.resolve（__目录名，fileToUpload）;  $（'输入[类型=文件]'）的SendKeys（absolutePath）;
  $（'＃uploadButton'）点击（）。
}）;
 

1. 使用路径模块来解决，你要上传的文件的完整路径。


2. 的路径设置为输入类型=文件元素。


3. 点击上传按钮。

这不会在Firefox上运行。量角器会抱怨，因为该元素是不可见的。在Firefox中上传您需要输入可见。这是我做的：

  browser.executeAsyncScript（函数（回调）{
  //你可以使用任何其他选择
  document.querySelectorAll（'＃输入文件元素'）[0]
      .style.display =内联;
  回电话（）;
}）;//现在你可以上传。
$（'输入[类型=文件]'）的SendKeys（absolutePath）;
$（'＃uploadButton'）点击（）。
 

I want to test file uploading using an angularjs e2e test. How do you do this in e2e tests? I run my test script through grunt karma.

解决方案

This is how I do it:

var path = require('path');

it('should upload a file', function() {
  var fileToUpload = '../some/path/foo.txt',
      absolutePath = path.resolve(__dirname, fileToUpload);

  $('input[type="file"]').sendKeys(absolutePath);    
  $('#uploadButton').click();
});

1. Use the path module to resolve the full path of the file that you want to upload.
2. Set the path to the input type="file" element.
3. Click on the upload button.

This will not work on firefox. Protractor will complain because the element is not visible. To upload in firefox you need to make the input visible. This is what I do:

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();

这篇关于如何上传angularjs E2E量角器测试文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！