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

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.

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

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

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

Esto es trabajo para mí.

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

};

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