Como fazer upload de arquivo no teste de transferidor angularjs e2e

Respostas:

137

É 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();
Andres D
fonte
+1 Isso está funcionando. Andres, você deve pedir feedback ao OP, já que esta pode ser aceita como a resposta certa.
coma
1
Trabalhou com transferidor também.
Ilia Barahovski,
6
FWIW, __dirnameàs vezes aponta para um diretório temporário (provavelmente onde os testes são copiados pelo executor de testes). Você pode usar em process.cwd()vez de __dirnamese for o caso.
BorisOkunskiy
Isso está funcionando para mim no Chrome, mas para outros navegadores, o transferidor reclama que o elemento não está visível ... alguma ideia?
Omid Ahourai,
Você não pode fazer upload com o firefox porque o elemento não é visível. Você precisa tornar o elemento visível para definir o valor do caminho. Veja a resposta atualizada.
Andres D,
14

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")
bdavidxyz
fonte
Isso não parece responder à pergunta e
leva
4

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);
Doug
fonte
2
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

Isso está funcionando para mim.

Koga
fonte
1

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')");
Rodrigo Salazar
fonte
0

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)

pinkninja
fonte
0

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

};

cara aleatório
fonte
Então, para que serve a variável fileToUpload?
Lynx 242 de
-3

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

Giovanni Pellerano
fonte