Cómo cargar un archivo en la prueba de transportador angularjs e2e


Respuestas:


138

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();
});
  1. Utilice el pathmódulo para resolver la ruta completa del archivo que desea cargar.
  2. Establezca la ruta al elemento input type = "file" .
  3. Haga clic en el botón de carga.

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

+1 Esto está funcionando. Andrés, debes pedirle comentarios al OP, ya que esta podría ser aceptada como la respuesta correcta.
coma

1
Trabajó con transportador también.
Ilia Barahovski

6
FWIW, a __dirnameveces apunta a un directorio temporal (probablemente donde las pruebas son copiadas por el ejecutor de pruebas). Puede usar en process.cwd()lugar de __dirnamesi ese es el caso.
BorisOkunskiy

Esto me funciona en Chrome, pero para otros navegadores, transportador se queja de que el elemento no es visible ... ¿alguna idea?
Omid Ahourai

No puede cargar con Firefox porque el elemento no es visible. Debe hacer que el elemento sea visible para establecer el valor de la ruta. Vea la respuesta actualizada.
Andres D

14

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

Esto no parece responder a la pregunta y enlaces a otro sitio
activedecay

4

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

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

Esto es trabajo para mí.


1

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

0

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)


0

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

};


Entonces, ¿para qué es la variable fileToUpload?
Lynx 242

0

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

-3

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.