angularjs e2e分度器テストでファイルをアップロードする方法

Question 1

angularjs e2eテストを使用してファイルのアップロードをテストしたいと思います。e2eテストでこれをどのように行いますか？私は自分のテストスクリプトをうなりカルマを通して実行します。

Question 2

これが私のやり方です：

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モジュールを使用して、アップロードするファイルの完全パスを解決します。
パスをinput type = "file"要素に設定します。
アップロードボタンをクリックします。

これは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();

Question 3

直接はできません。

セキュリティ上の理由から、ngScenarioなどの機能テストスイート内でシステム上のファイルを選択しているユーザーをシミュレートすることはできません。

Protractorでは、WebDriverに基づいているため、このトリックを使用できるはずです。

Q：WebDriverはファイルのアップロードをサポートしていますか？A：はい。

ネイティブOSファイルブラウザーダイアログを直接操作することはできませんが、ファイルアップロード要素でWebElement＃sendKeys（ "/ path / to / file"）を呼び出した場合に適切な処理が行われるように、いくつかの魔法をかけています。ファイルアップロード要素をWebElement＃click（）しないでください。そうしないと、ブラウザーがハングする可能性があります。

これはうまくいきます：

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

Question 4

これは、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);

Question 5

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

これは私のために働いています。

Question 6

これは私がfirefoxにファイルをアップロードするために行うことです、このスクリプトはパス値を設定するために要素を可視にします：

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

Question 7

私がテストしているWebアプリでのファイル入力は、JavaScriptを使用してスクロールして表示した場合にのみFirefoxで表示されることに気付いたので、Andres DのコードにscrollIntoView（）を追加して、アプリで機能させるようにしました。

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

        callback();
    });

（私はまた、ファイルinput要素のすべてのスタイルを削除しました）

Question 8

// C：\ Directoryからファイルをアップロードするには

{

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

};

Question 9

現在ドキュメント化されているソリューションは、ユーザーがjQueryをロードしている場合にのみ機能します。私はすべての異なる状況のユーザーが次のようなエラーを受け取ります：失敗：$が定義されていません

ネイティブのangularjsコードを使用してソリューションを文書化することをお勧めします。

例えば、私は提案する代わりに提案します：

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

提案する：

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

後者はより標準的で、角度の上にあり、より重要なのはjqueryを必要としないことです