如何上传angularjs E2E量角器测试文件如何上传angularjs E2E量角器测试文件(H

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

Answer 1:

这就是我要做的事：

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模块来解决，你要上传的文件的完整路径。
将路径设置为输入类型=“文件”元素。
点击上传按钮。

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

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

Answer 2:

你不能直接。

出于安全原因，你不能模拟这是一个功能性测试套件像ngScenario内选择系统上的文件的用户。

随着量角器，因为它是基于webdriver的，它应该是可以使用这一招

问：webdriver的支持文件上传？答：是的。
你不能用本地操作系统的文件浏览器直接对话框互动，但我们做了一些魔法，这样如果调用WebElement＃的SendKeys（“/路径/到/文件”）的文件上传元素，它做正确的事。确保你不WebElement＃点击（）的文件上传元素，或者浏览器可能会挂起。

这只是正常：

$('input[type="file"]').sendKeys("/file/path")

Answer 3:

这里是安德烈斯d和davidb583的意见，我通过这个工作，将帮助我的组合...

我试图让反对flowjs的控制来执行量角器测试。

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

Answer 4:

var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

这是为我工作。

Answer 5:

我意识到，当它使用JavaScript滚动到视图中的Web应用程序，我测试的文件输入只有在Firefox可见的，所以我在安德烈斯·D的代码添加scrollIntoView（），使之成为我的应用程序的工作：

  browser.executeAsyncScript(function (callback) {
        document.querySelectorAll('input')[2]
     .style = '';
        document.querySelectorAll('input')[2].scrollIntoView();

        callback();
    });

（我也删除了所有的样式文件输入元素）

Answer 6:

这是我做的上传在Firefox的文件，这个脚本使元素可见设置路径值：

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");

Answer 7:

//从C中上传文件：\目录

{

var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));

fileElem.sendKeys(absolutePath);
cb();

};

Answer 8:

如果用户加载的jQuery当前记录的解决方案只会工作。我的所有不同的情况下用户会看到一个错误这样的：失败：没有定义$

我会建议记录使用本机代码angularjs的解决方案。

例如，我反而建议提示的：

    $('input[type="file"]') .....

建议：

    angular.element(document.querySelector('input[type="file"]')) .....

后者是更标准的，顶部的角度，更重要的不需要的jquery的

文章来源: How to upload file in angularjs e2e protractor testing