Angularjs e2e açıölçer testinde dosya nasıl yüklenir

Bir angularjs e2e testi kullanarak dosya yüklemeyi test etmek istiyorum. Bunu e2e testlerinde nasıl yaparsınız? Test senaryomu grunt karma ile çalıştırıyorum.

Ben böyle yaparım:

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. Yüklemek pathistediğiniz dosyanın tam yolunu çözmek için modülü kullanın .
2. Giriş türü = "dosya" öğesinin yolunu ayarlayın .
3. Yükle düğmesine tıklayın.

Bu firefox üzerinde çalışmayacaktır. İletki, öğe görünmediği için şikayet edecek. Firefox'a yüklemek için girdiyi görünür yapmanız gerekir. Bu benim işim:

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

Doğrudan yapamazsınız.

Güvenlik nedeniyle, ngScenario gibi işlevsel bir test paketi içinde sistemde bir dosya seçen bir kullanıcıyı simüle edemezsiniz.

İletki ile, WebDriver tabanlı olduğu için bu numarayı kullanmak mümkün olmalıdır.

S: WebDriver, dosya yüklemelerini destekliyor mu? A: Evet.

Yerel işletim sistemi dosya tarayıcısı iletişim kutusu ile doğrudan etkileşim kuramazsınız, ancak bir dosya yükleme öğesinde WebElement # sendKeys ("/ yol / / dosyaya") çağırırsanız, doğru şeyi yapması için biraz sihir yaparız. WebElement # dosya yükleme öğesine tıklamadığınızdan emin olun (), aksi takdirde tarayıcı muhtemelen kilitlenir.

Bu gayet iyi çalışıyor:

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

İşte Andres D ve davidb583'ün bu konuda çalışırken bana yardımcı olacak tavsiyelerinden oluşan bir kombinasyon ...

Flowjs kontrollerine karşı açıölçer testleri yaptırmaya çalışıyordum.

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

Bu benim için çalışıyor.

Firefox'a dosya yüklemek için yaptığım şey bu, bu komut dosyası, yol değerini ayarlamak için öğeyi görünür kılıyor:

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

Test ettiğim web uygulamasındaki dosya girişinin Firefox'ta yalnızca JavaScript kullanılarak görünüme kaydırıldığında göründüğünü fark ettim, bu yüzden benim uygulamam için çalışmasını sağlamak için Andres D'nin koduna scrollIntoView () ekledim:

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

        callback();
    });

(Ayrıca dosya giriş öğesi için tüm stilleri kaldırdım)

// C: \ Directory'den bir dosya yüklemek için

{

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

};

Aşağıdaki açılır pencereyi açmadan bir dosya seçmek istiyorsanız cevap:

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

mevcut belgelenmiş çözümler yalnızca kullanıcılar jQuery yüklüyorsa çalışacaktır. i tüm farklı durumlarda kullanıcılar aşağıdaki gibi bir hata alacak: Başarısız: $ tanımlı değil

yerel angularjs kodunu kullanarak bir çözümü belgelemeyi öneririm.

örneğin şunu önermek yerine öneririm:

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

önermek:

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

ikincisi daha standart, açısal ve daha önemlisi jquery gerektirmez