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

Antworten:

137

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();
Andres D.
quelle
+1 Das funktioniert. Andres, du solltest das OP um Feedback bitten, da dieses als die richtige Antwort akzeptiert werden könnte.
Koma
1
Arbeitete auch mit Winkelmesser.
Ilia Barahovski
6
FWIW __dirnameverweist manchmal auf ein temporäres Verzeichnis (wahrscheinlich dort, wo Tests vom Testläufer kopiert werden). Sie können process.cwd()anstelle von verwenden, __dirnamewenn dies der Fall ist.
BorisOkunskiy
Dies funktioniert für mich in Chrome, aber für andere Browser beschwert sich Winkelmesser, dass das Element nicht sichtbar ist ... irgendwelche Ideen?
Omid Ahourai
Sie können nicht mit Firefox hochladen, da das Element nicht sichtbar ist. Sie müssen das Element sichtbar machen, um den Pfadwert festzulegen. Siehe die aktualisierte Antwort.
Andres D
13

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")
bdavidxyz
quelle
Dies scheint die Frage nicht zu beantworten und verlinkt auf eine andere Seite
activedecay
4

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);
Doug
quelle
2
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

Das funktioniert bei mir.

Koga
quelle
1

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')");
Rodrigo Salazar
quelle
0

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.)

pinkninja
quelle
0

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

};

zufälliger Typ
quelle
Wofür ist die Variable fileToUpload?
Lynx 242
-3

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

Giovanni Pellerano
quelle