So laden Sie eine Datei in AngularJS E2E Winkelmesser-Tests hoch

Ich möchte das Hochladen von Dateien mit einem AngularJS E2E-Test testen. Wie machen Sie das in e2e-Tests? Ich führe mein Testskript durch Grunzkarma aus.

So mache ich es:

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. Verwenden Sie das pathModul, um den vollständigen Pfad der Datei aufzulösen, die Sie hochladen möchten.
2. Legen Sie den Pfad zum Element input type = "file" fest .
3. Klicken Sie auf die Schaltfläche zum Hochladen.

Dies funktioniert nicht auf Firefox. Winkelmesser beschwert sich, weil das Element nicht sichtbar ist. Zum Hochladen in Firefox müssen Sie die Eingabe sichtbar machen. Das ist was ich mache:

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

Sie können nicht direkt.

Aus Sicherheitsgründen können Sie keinen Benutzer simulieren, der eine Datei auf dem System in einer Funktionstestsuite wie ngScenario auswählt.

Mit Protractor sollte es möglich sein, diesen Trick zu verwenden, da es auf WebDriver basiert

F: Unterstützt WebDriver das Hochladen von Dateien? A: Ja.

Sie können nicht direkt mit dem Dialogfeld des nativen Betriebssystem-Dateibrowsers interagieren, aber wir tun etwas Magisches, damit es das Richtige tut, wenn Sie WebElement # sendKeys ("/ path / to / file") für ein Datei-Upload-Element aufrufen. Stellen Sie sicher, dass WebElement nicht # auf das Element zum Hochladen von Dateien klickt (), da der Browser sonst sonst hängen bleibt.

Das funktioniert gut:

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

Hier ist eine Kombination aus den Ratschlägen von Andres D und davidb583, die mir bei der Bearbeitung dieser ...

Ich habe versucht, Winkelmessertests gegen die flowjs-Kontrollen durchzuführen.

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

Das funktioniert bei mir.

Dies ist, was ich mache, um eine Datei auf Firefox hochzuladen. Dieses Skript macht das Element sichtbar, um den Pfadwert festzulegen:

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

Ich habe festgestellt, dass die Dateieingabe in der Web-App, die ich teste, nur in Firefox sichtbar ist, wenn sie mit JavaScript in die Ansicht gescrollt wird. Deshalb habe ich scrollIntoView () in Andres Ds Code hinzugefügt, damit sie für meine App funktioniert:

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

        callback();
    });

(Ich habe auch alle Stile für das Dateieingabeelement entfernt.)

// So laden Sie eine Datei aus C: \ Directory hoch

{

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

};

Die aktuell dokumentierten Lösungen funktionieren nur, wenn Benutzer jQuery laden. In allen verschiedenen Situationen erhalten Benutzer eine Fehlermeldung: Fehlgeschlagen: $ ist nicht definiert

Ich würde vorschlagen, eine Lösung mit nativem AngularJS-Code zu dokumentieren.

zB würde ich vorschlagen, anstatt vorzuschlagen:

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

vorschlagen:

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

Letzteres ist mehr Standard, auf eckigen und wichtiger, erfordern keine Abfrage