Como fazer upload de arquivo no teste do transferidor angularjs e2e

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

É 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 módulo path para resolver o caminho completo do arquivo que você deseja carregar.
  2. Configure o caminho para o elemento input type = “file” .
  3. Clique no botão de upload.

Isso não funcionará no firefox. Transferidor vai reclamar porque o elemento não é visível. Para fazer o upload no firefox, você precisa tornar a input 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 esteja escolhendo um arquivo no sistema em um conjunto de testes funcional como ngScenario.

Com o Transferidor, já que é baseado no WebDriver, deve ser possível usar esse truque

Aqui está uma combinação de conselhos de Andres D e davidb583 que teriam me ajudado enquanto eu trabalhava com isso …

Eu estava tentando obter testes de transferidor executados contra os controles do 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); 

Isso está funcionando para mim.

Percebi que a input de arquivo no aplicativo da web que estou testando é visível apenas no Firefox quando ele é exibido na canvas usando JavaScript, por isso adicionei scrollIntoView () no código do Andres D para que ele funcione no meu aplicativo:

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

(Eu também removi todos os estilos para o elemento de input do arquivo)

Isso é o que eu faço para fazer o upload do arquivo no firefox, esse 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')"); 

// Para fazer upload de um arquivo do 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 só funcionariam se os usuários estivessem carregando o jQuery. i todas as situações diferentes usuários receberão um erro como: Falha: $ não está definido

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

Por exemplo, eu sugeriria, em vez de sugerir:

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

sugerir:

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

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