Voglio testare il caricamento dei file utilizzando un test e2e angularjs. Come lo fai nei test e2e? Eseguo il mio script di prova attraverso il karma grugnito.
Voglio testare il caricamento dei file utilizzando un test e2e angularjs. Come lo fai nei test e2e? Eseguo il mio script di prova attraverso il karma grugnito.
Risposte:
Ecco come lo faccio:
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
modulo per risolvere il percorso completo del file che desideri caricare.Questo non funzionerà su Firefox. Goniometro si lamenterà perché l'elemento non è visibile. Per caricare in Firefox è necessario rendere visibile l'input. Questo è ciò che faccio:
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();
__dirname
volte punta a una directory temporanea (probabilmente dove i test vengono copiati da tests runner). Puoi usare al process.cwd()
posto di __dirname
se è così.
Non puoi direttamente.
Per motivi di sicurezza, non è possibile simulare un utente che sceglie un file sul sistema all'interno di una suite di test funzionali come ngScenario.
Con Goniometro, poiché è basato su WebDriver, dovrebbe essere possibile utilizzare questo trucco
D: WebDriver supporta il caricamento di file? A: Sì.
Non puoi interagire direttamente con la finestra di dialogo del browser di file del sistema operativo nativo, ma facciamo un po 'di magia in modo che se chiami WebElement # sendKeys ("/ path / to / file") su un elemento di caricamento file, fa la cosa giusta. Assicurati di non fare clic su WebElement # () sull'elemento di caricamento del file, altrimenti il browser si bloccherà.
Funziona perfettamente:
$('input[type="file"]').sendKeys("/file/path")
Ecco una combinazione dei consigli di Andres D e davidb583 che mi avrebbero aiutato mentre lavoravo su questo ...
Stavo cercando di ottenere test del goniometro eseguiti contro i controlli 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);
Questo è quello che faccio per caricare file su firefox, questo script rende visibile l'elemento per impostare il valore del percorso:
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
Mi sono reso conto che l'input del file nell'app Web che sto testando è visibile solo in Firefox quando viene fatto scorrere nella visualizzazione utilizzando JavaScript, quindi ho aggiunto scrollIntoView () nel codice di Andres D per farlo funzionare per la mia app:
browser.executeAsyncScript(function (callback) {
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
});
(Ho anche rimosso tutti gli stili per l'elemento di input del file)
// Per caricare un file da 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();
};
fileToUpload
?
Se vuoi selezionare un file senza aprire il popup qui sotto è la risposta:
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);
le attuali soluzioni documentate funzionerebbero solo se gli utenti stanno caricando jQuery. In tutte le diverse situazioni gli utenti riceveranno un errore del tipo: Fallito: $ non è definito
Suggerirei di documentare una soluzione utilizzando il codice angularjs nativo.
ad esempio, suggerirei invece di suggerire:
$('input[type="file"]') .....
suggerire:
angular.element(document.querySelector('input[type="file"]')) .....
quest'ultimo è più standard, in cima ad angolare e più importante non richiede jquery