Comment télécharger un fichier dans le test angularjs e2e protractor

Je veux tester le téléchargement de fichiers en utilisant un test angularjs e2e. Comment faites-vous cela dans les tests e2e? Je lance mon script de test via karma grunt.

    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 d’access complet du fichier que vous souhaitez télécharger.
    2. Définissez le chemin d’access à l’élément input = = “file” .
    3. Cliquez sur le bouton de téléchargement.

    Cela ne fonctionnera pas sur Firefox. Le protractor va se plaindre 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(); 

    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 fonctionnelle telle que ngScenario.

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

    Voici un combo des conseils d’Andres D et de davidb583 qui m’auraient aidé pendant que je travaillais …

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

    Cela fonctionne pour moi.

    Je me suis rendu compte que l’entrée de fichier dans l’application que je testais n’est visible dans Firefox que lorsque celle-ci est affichée à l’aide de JavaScript. J’ai donc ajouté scrollIntoView () dans le code d’Andres D:

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

    (J’ai également supprimé tous les styles pour l’élément d’entrée de fichier)

    C’est ce que je fais pour télécharger le 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')"); 

    // 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 chargeaient jQuery. Dans tous les cas, les utilisateurs recevront une erreur telle que: Échec: $ n’est pas défini

    Je suggère 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"]')) ..... 

    le dernier est plus standard, au sumt de l’angle et plus important pas besoin de jquery