Come caricare il file in angularjs e2e goniometro test


Risposte:


138

Ecco come lo faccio:

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. Utilizza il pathmodulo per risolvere il percorso completo del file che desideri caricare.
  2. Imposta il percorso dell'elemento input type = "file" .
  3. Fare clic sul pulsante di caricamento.

Questo non funzionerà su Firefox. Goniometro si lamenterà perché l'elemento non è visibile. Per caricare in Firefox è necessario rendere visibile l'input. Questo è ciò che faccio:

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 Funziona. Andres, dovresti chiedere un feedback all'OP poiché questa potrebbe essere accettata come la risposta giusta.
coma

1
Ha lavorato anche con Goniometro.
Ilia Barahovski

6
FWIW, a __dirnamevolte punta a una directory temporanea (probabilmente dove i test vengono copiati da tests runner). Puoi usare al process.cwd()posto di __dirnamese è così.
BorisOkunskiy

Questo funziona per me in Chrome, ma per altri browser, il goniometro si lamenta che l'elemento non è visibile ... qualche idea?
Omid Ahourai

Non puoi caricare con Firefox perché l'elemento non è visibile. È necessario rendere visibile l'elemento per impostare il valore del percorso. Vedi la risposta aggiornata.
Andres D

14

Non puoi direttamente.

Per motivi di sicurezza, non è possibile simulare un utente che sceglie un file sul sistema all'interno di una suite di test funzionali come ngScenario.

Con Goniometro, poiché è basato su WebDriver, dovrebbe essere possibile utilizzare questo trucco

D: WebDriver supporta il caricamento di file? A: Sì.

Non puoi interagire direttamente con la finestra di dialogo del browser di file del sistema operativo nativo, ma facciamo un po 'di magia in modo che se chiami WebElement # sendKeys ("/ path / to / file") su un elemento di caricamento file, fa la cosa giusta. Assicurati di non fare clic su WebElement # () sull'elemento di caricamento del file, altrimenti il ​​browser si bloccherà.

Funziona perfettamente:

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

Questo non sembra rispondere alla domanda e collega a un altro sito
activedecay

4

Ecco una combinazione dei consigli di Andres D e davidb583 che mi avrebbero aiutato mentre lavoravo su questo ...

Stavo cercando di ottenere test del goniometro eseguiti contro i controlli 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);

Questo sta funzionando per me.


1

Questo è quello che faccio per caricare file su firefox, questo script rende visibile l'elemento per impostare il valore del percorso:

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

0

Mi sono reso conto che l'input del file nell'app Web che sto testando è visibile solo in Firefox quando viene fatto scorrere nella visualizzazione utilizzando JavaScript, quindi ho aggiunto scrollIntoView () nel codice di Andres D per farlo funzionare per la mia app:

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

        callback();
    });

(Ho anche rimosso tutti gli stili per l'elemento di input del file)


0

// Per caricare un file da 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();

};


Allora a cosa serve la variabile fileToUpload?
Lynx 242

0

Se vuoi selezionare un file senza aprire il popup qui sotto è la risposta:

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

le attuali soluzioni documentate funzionerebbero solo se gli utenti stanno caricando jQuery. In tutte le diverse situazioni gli utenti riceveranno un errore del tipo: Fallito: $ non è definito

Suggerirei di documentare una soluzione utilizzando il codice angularjs nativo.

ad esempio, suggerirei invece di suggerire:

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

suggerire:

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

quest'ultimo è più standard, in cima ad angolare e più importante non richiede jquery

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.