Jak przesłać plik w testowaniu kątomierza angularjs e2e

Odpowiedzi:

138

Oto jak to robię:

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. Użyj pathmodułu, aby rozwiązać pełną ścieżkę pliku, który chcesz przesłać.
  2. Ustaw ścieżkę do elementu input type = "file" .
  3. Kliknij przycisk przesyłania.

To nie zadziała w przeglądarce Firefox. Kątomierz będzie narzekać, ponieważ element nie jest widoczny. Aby przesłać do przeglądarki Firefox, musisz pokazać dane wejściowe. To jest to, co robie:

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.
źródło
+1 To działa. Andres, powinieneś poprosić OP o opinię, ponieważ ta odpowiedź może zostać zaakceptowana jako właściwa odpowiedź.
śpiączka
1
Pracował też z Protractorem.
Ilia Barahovski
6
FWIW __dirnameczasami wskazuje katalog tymczasowy (prawdopodobnie tam, gdzie testy są kopiowane przez moduł uruchamiający testy). Możesz użyć process.cwd()zamiast, __dirnamejeśli tak jest.
BorisOkunskiy
U mnie to działa w chrome ale dla innych przeglądarek kątomierz narzeka, że ​​elementu nie widać ... jakieś pomysły?
Omid Ahourai
Nie możesz przesłać za pomocą przeglądarki Firefox, ponieważ element nie jest widoczny. Aby ustawić wartość ścieżki, musisz uczynić element widocznym. Zobacz zaktualizowaną odpowiedź.
Andres D
14

Nie możesz bezpośrednio.

Ze względów bezpieczeństwa nie można symulować użytkownika, który wybiera plik w systemie w ramach zestawu testów funkcjonalnych, takich jak ngScenario.

Z Protractor, ponieważ jest oparty na WebDriver, powinno być możliwe użycie tej sztuczki

P: Czy WebDriver obsługuje przesyłanie plików? Odp .: tak.

Nie możesz bezpośrednio wchodzić w interakcję z rodzimym oknem dialogowym przeglądarki plików systemu operacyjnego, ale robimy trochę magii, aby wywołać WebElement # sendKeys ("/ path / to / file") na elemencie wysyłania pliku, robi to dobrze. Upewnij się, że nie używasz WebElement # click () elementu upload pliku, w przeciwnym razie przeglądarka prawdopodobnie się zawiesi.

To działa dobrze:

$('input[type="file"]').sendKeys("/file/path")
bdavidxyz
źródło
To wydaje się nie odpowiadać na pytanie i linki do innej witryny
activedecay
4

Oto kombinacja porad Andresa D i davidb583, które pomogłyby mi, gdy pracowałem nad tym ...

Próbowałem wykonać testy kątomierza z kontrolkami 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);
Doug
źródło
2
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

To działa dla mnie.

Koga
źródło
1

Oto, co robię, aby przesłać plik do przeglądarki Firefox, ten skrypt sprawia, że ​​element jest widoczny, aby ustawić wartość ścieżki:

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
Rodrigo Salazar
źródło
0

Zdałem sobie sprawę, że plik wejściowy w testowanej aplikacji sieciowej jest widoczny tylko w przeglądarce Firefox, gdy jest przewijany do widoku za pomocą JavaScript, więc dodałem scrollIntoView () w kodzie Andresa D, aby działał dla mojej aplikacji:

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

        callback();
    });

(Usunąłem również wszystkie style dla elementu wejściowego pliku)

pinkninja
źródło
0

// Aby przesłać plik z 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();

};

losowa osoba
źródło
Więc do czego służy ta zmienna fileToUpload?
Lynx 242,
0

Jeśli chcesz wybrać plik bez otwierania wyskakującego okienka poniżej, to odpowiedź:

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);
Aakash paliwal
źródło
-3

obecne udokumentowane rozwiązania działałyby tylko wtedy, gdy użytkownicy ładują jQuery. i we wszystkich różnych sytuacjach użytkownicy otrzymają błąd taki: Błąd: $ nie jest zdefiniowane

sugerowałbym udokumentowanie rozwiązania przy użyciu natywnego kodu angularjs.

np. zamiast sugerować, sugerowałbym:

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

sugerować:

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

ta ostatnia jest bardziej standardowa, na szczycie kątowa i co ważniejsze nie wymaga jquery

Giovanni Pellerano
źródło