Come caricare il file in angularjs e2e goniometro test

Voglio testare il caricamento dei file utilizzando un test e2e angularjs. Come lo fai nei test e2e? Eseguo il mio script di prova attraverso il karma grugnito.

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

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

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

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

Questo sta funzionando per me.

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

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)

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

};

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

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