Quiero probar la carga de archivos usando una prueba angularjs e2e. ¿Cómo se hace esto en las pruebas e2e? Ejecuto mi script de prueba a través del karma gruñido.
Quiero probar la carga de archivos usando una prueba angularjs e2e. ¿Cómo se hace esto en las pruebas e2e? Ejecuto mi script de prueba a través del karma gruñido.
Respuestas:
Así es como lo hago:
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
módulo para resolver la ruta completa del archivo que desea cargar.Esto no funcionará en Firefox. Transportador se quejará porque el elemento no es visible. Para cargar en Firefox necesitas hacer visible la entrada. Esto es lo que hago:
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
veces apunta a un directorio temporal (probablemente donde las pruebas son copiadas por el ejecutor de pruebas). Puede usar en process.cwd()
lugar de __dirname
si ese es el caso.
No puedes directamente.
Por motivos de seguridad, no puede simular un usuario que está eligiendo un archivo en el sistema dentro de un conjunto de pruebas funcionales como ngScenario.
Con Transportador, dado que está basado en WebDriver, debería ser posible usar este truco
P: ¿WebDriver admite la carga de archivos? A: si.
No puede interactuar directamente con el cuadro de diálogo del navegador de archivos del sistema operativo nativo, pero hacemos algo de magia para que si llama a WebElement # sendKeys ("/ ruta / a / archivo") en un elemento de carga de archivo, haga lo correcto. Asegúrese de no hacer clic en WebElement # () en el elemento de carga del archivo, o el navegador probablemente se bloqueará.
Esto funciona bien:
$('input[type="file"]').sendKeys("/file/path")
Aquí hay una combinación de los consejos de Andrés D y davidb583 que me habrían ayudado mientras trabajaba en esto ...
Estaba tratando de ejecutar pruebas de transportador contra los controles de 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);
Esto es lo que hago para cargar un archivo en Firefox, este script hace que el elemento sea visible para establecer el valor de la ruta:
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
Me di cuenta de que la entrada del archivo en la aplicación web que estoy probando solo es visible en Firefox cuando se desplaza a la vista usando JavaScript, así que agregué scrollIntoView () en el código de Andres D para que funcione para mi aplicación:
browser.executeAsyncScript(function (callback) {
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
});
(También eliminé todos los estilos para el elemento de entrada del archivo)
// Para cargar un archivo desde 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
?
Si desea seleccionar un archivo sin abrir la ventana emergente a continuación, la respuesta es:
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);
las soluciones documentadas actuales funcionarían solo si los usuarios están cargando jQuery. En todas las situaciones diferentes, los usuarios obtendrán un error como: Fallido: $ no está definido
Sugeriría documentar una solución utilizando código angularjs nativo.
por ejemplo, sugeriría en lugar de sugerir:
$('input[type="file"]') .....
sugerir:
angular.element(document.querySelector('input[type="file"]')) .....
este último es más estándar, encima de angular y más importante no requiere jquery