Chcę przetestować przesyłanie plików za pomocą testu angularjs e2e. Jak to robisz w testach e2e? Uruchamiam skrypt testowy poprzez pomruk karmy.
angularjs
file
file-upload
gruntjs
protractor
Pawan Singh
źródło
źródło
Odpowiedzi:
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(); });
path
modułu, aby rozwiązać pełną ścieżkę pliku, który chcesz przesłać.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();
źródło
__dirname
czasami wskazuje katalog tymczasowy (prawdopodobnie tam, gdzie testy są kopiowane przez moduł uruchamiający testy). Możesz użyćprocess.cwd()
zamiast,__dirname
jeśli tak jest.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
To działa dobrze:
$('input[type="file"]').sendKeys("/file/path")
źródło
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);
źródło
var imagePath = 'http://placehold.it/120x120&text=image1'; element(by.id('fileUpload')).sendKeys(imagePath);
To działa dla mnie.
źródło
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')");
źródło
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)
źródło
// 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();
};
źródło
fileToUpload
?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);
źródło
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
źródło