Comment télécharger un fichier dans les tests de rapporteur angularjs e2e

Je souhaite tester le téléchargement de fichiers à l'aide d'un test angularjs e2e. Comment faites-vous cela dans les tests e2e? J'exécute mon script de test via grunt karma.

Voici comment je 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 pathmodule pour résoudre le chemin complet du fichier que vous souhaitez télécharger.
2. Définissez le chemin d'accès à 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 car 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();

Vous ne pouvez pas directement.

Pour des raisons de sécurité, vous ne pouvez pas simuler un utilisateur qui choisit 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 les téléchargements de fichiers? R: 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 un peu de magie pour que si vous appelez WebElement # sendKeys ("/ chemin / vers / fichier") sur un élément de téléchargement de fichier, il fasse la bonne chose. Assurez-vous que WebElement # ne clique 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")

Voici un combo des conseils d'Andres D et de davidb583 qui m'auraient aidé pendant que je travaillais à travers cela ...

J'essayais de faire exécuter des tests de rapporteur par rapport aux 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);

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

Cela fonctionne pour moi.

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

J'ai réalisé que l'entrée de fichier dans l'application Web que je teste n'est visible dans Firefox que lorsqu'elle est défilée à l'aide de JavaScript, j'ai donc ajouté scrollIntoView () dans le code d'Andres D pour le faire fonctionner pour 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 d'entrée de fichier)

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

};

les solutions documentées actuelles ne fonctionneraient que si les utilisateurs chargent jQuery. i toutes les situations différentes, les utilisateurs recevront une erreur telle: Échec: $ n'est pas défini

Je suggérerais de documenter une solution en utilisant le code angularjs natif.

Par exemple, je suggérerais au lieu de suggérer:

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

suggérer:

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

cette dernière est plus standard, au sommet d'angulaire et plus importante ne nécessite pas de jquery