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

Chcę przetestować przesyłanie plików za pomocą testu angularjs e2e. Jak to robisz w testach e2e? Uruchamiam skrypt testowy poprzez pomruk karmy.

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

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

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

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

To działa dla mnie.

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')");

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)

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

};

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

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