如何在angularjs e2e量角器测试中上传文件

我想使用angularjs e2e测试来测试文件上传。您如何在e2e测试中做到这一点？我通过咕unt的业力运行测试脚本。

这是我的方法：

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

1. 使用 path模块可解析您要上传的文件的完整路径。
2. 将路径设置为输入type =“ file”元素。
3. 点击上传按钮。

这不适用于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();

你不能直接。

出于安全原因，您无法在ngScenario之类的功能测试套件中模拟正在系统上选择文件的用户。

对于量角器，由于它基于WebDriver，因此应该可以使用此技巧

问：WebDriver是否支持文件上传？答：是的。

您无法直接与本机OS文件浏览器对话框进行交互，但是我们做了一些魔术，因此，如果在文件上载元素上调用WebElement＃sendKeys（“ / path / to / file”），则可以完成正确的操作。确保您没有使用WebElement＃click（）这个文件上传元素，否则浏览器可能会挂起。

这很好用：

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

这是Andres 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);

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

这对我有用。

这是我在firefox上上传文件的操作，此脚本使元素可见以设置路径值：

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

我意识到正在测试的Web应用程序中输入的文件仅在使用JavaScript滚动到视图中时才在Firefox中可见，因此我在Andres D的代码中添加了scrollIntoView（）以使其适用于我的应用程序：

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

        callback();
    });

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

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

};

如果您想选择一个文件而没有打开下面的弹出窗口，那么答案是：

var path = require('path'); 
var remote = require('../../node_modules/selenium-webdriver/remote'); 
browser.setFileDetector(new remote.FileDetector()); 
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload); 
element(by.css('input[type="file"]')).sendKeys(absolutePath);

当前记录的解决方案仅在用户加载jQuery时有效。在所有不同情况下，用户都会收到以下错误：失败：未定义$

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

例如，我建议而不是建议：

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

建议：

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

后者是更标准的，在角度之上，更重要的是不需要jquery