Como fazer upload de arquivo no teste de transferidor angularjs e2e

Eu quero testar o upload de arquivos usando um teste angularjs e2e. Como você faz isso nos testes e2e? Eu executo meu script de teste através do karma grunt

É assim que eu faço:

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. Use o pathmódulo para resolver o caminho completo do arquivo que você deseja carregar.
2. Defina o caminho para o elemento input type = "file" .
3. Clique no botão de upload.

Isso não funcionará no firefox. O transferidor reclamará porque o elemento não está visível. Para fazer o upload no Firefox, você precisa tornar a entrada visível. Isto é o que eu faço:

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

Você não pode diretamente.

Por motivos de segurança, você não pode simular um usuário que está escolhendo um arquivo no sistema dentro de um conjunto de testes funcionais como o ngScenario.

Com o Protractor, por ser baseado no WebDriver, deve ser possível usar este truque

P: O WebDriver suporta uploads de arquivos? R: Sim.

Você não pode interagir diretamente com a caixa de diálogo do navegador de arquivos do sistema operacional nativo, mas fazemos mágica para que se você chamar WebElement # sendKeys ("/ path / to / file") em um elemento de upload de arquivo, ele faça a coisa certa. Certifique-se de não WebElement # click () no elemento de upload de arquivo, ou o navegador provavelmente travará.

Isso funciona muito bem:

$('input[type="file"]').sendKeys("/file/path")

Aqui está uma combinação do conselho de Andres D e davidb583 que teria me ajudado enquanto eu trabalhava nisso ...

Eu estava tentando fazer com que os testes do transferidor fossem executados nos controles de fluxo.

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

Isso está funcionando para mim.

Isso é o que eu faço para carregar o arquivo no firefox, este script torna o elemento visível para definir o valor do caminho:

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");

Percebi que a entrada do arquivo no aplicativo da web que estou testando só é visível no Firefox quando é rolada para a visualização usando JavaScript, então adicionei scrollIntoView () no código de Andres D para fazê-lo funcionar para meu aplicativo:

  browser.executeAsyncScript(function (callback) {
        document.querySelectorAll('input')[2]
     .style = '';
        document.querySelectorAll('input')[2].scrollIntoView();

        callback();
    });

(Também removi todos os estilos do elemento de entrada do arquivo)

// Para fazer upload de um arquivo de 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();

};

as soluções documentadas atuais funcionariam apenas se os usuários estivessem carregando o jQuery. Em todas as situações, os usuários receberão um erro como: Falha: $ não está definido

Eu sugeriria documentar uma solução usando o código angularjs nativo.

por exemplo, eu sugeriria em vez de sugerir:

    $('input[type="file"]') .....

sugerir:

    angular.element(document.querySelector('input[type="file"]')) .....

o último é mais padrão, acima do angular e mais importante, não requer jquery