web-dev-qa-db-fra.com

Comment charger un fichier dans un test de rapporteur d'angularjs e2e

Je veux tester le téléchargement de fichiers à l'aide d'un test angularjs e2e. Comment faites-vous cela dans les tests e2e? Je lance mon script de test à travers le karma grunt.

angularjsfilefile-uploadgruntjsprotractor
81
Pawan Singh

Voici comment je le fais:

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. Utilisez le module path pour résoudre le chemin complet du fichier que vous souhaitez télécharger.
  2. Définissez le chemin d'accès sur l'élément input type = "file".
  3. Cliquez sur le bouton de téléchargement.

Cela ne fonctionnera pas sur Firefox. Le rapporteur se plaindra parce que l'élément n'est pas visible. Pour télécharger dans Firefox, vous devez rendre l'entrée visible. C'est ce que je fais:

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();
129
Andres D

Vous ne pouvez pas directement.

Pour des raisons de sécurité, vous ne pouvez pas simuler un utilisateur choisissant un fichier sur le système dans une suite de tests fonctionnels telle que ngScenario.

Avec Protractor, puisqu'il est basé sur WebDriver, il devrait être possible d'utiliser cette astuce

Q: WebDriver prend-il en charge le téléchargement de fichiers? A: oui.

Vous ne pouvez pas interagir directement avec la boîte de dialogue du navigateur de fichiers du système d'exploitation natif, mais nous faisons quelque chose de magique. Par conséquent, si vous appelez WebElement # sendKeys ("/ path/to/file") sur un élément de téléchargement de fichier, le résultat est correct. Assurez-vous que WebElement # ne cliquez pas sur l'élément de téléchargement de fichier, sinon le navigateur se bloquera probablement.

Cela fonctionne très bien:

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

Voici un combo des conseils d'Andres D et de davidb583 qui m'aurait aidé dans mon travail ...

J'essayais de faire exécuter des tests de rapporteur sur les contrôles 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);
4
Doug
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

Cela fonctionne pour moi.

2
Priyalal Koggalage

C’est ce que je fais pour télécharger un fichier sur Firefox, ce script rend l’élément visible pour définir la valeur du chemin:

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

Je me suis rendu compte que l'entrée de fichier dans l'application Web que je teste n'est visible dans Firefox que lorsqu'il est visualisé à l'aide de JavaScript. J'ai donc ajouté scrollIntoView () dans le code d'Andres D pour que cela fonctionne avec mon application:

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

        callback();
    });

(J'ai également supprimé tous les styles de l'élément input du fichier)

0
pinkninja

// Télécharger un fichier depuis 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();

};

0
randomguy