Cara mengunggah file dalam pengujian busur derajat angularjs e2e

Saya ingin menguji pengunggahan file menggunakan tes angularjs e2e. Bagaimana Anda melakukan ini dalam tes e2e? Saya menjalankan skrip pengujian saya melalui grunt karma.

Inilah cara saya melakukannya:

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. Gunakan pathmodul untuk menyelesaikan jalur lengkap file yang ingin Anda unggah.
2. Setel jalur ke elemen input type = "file" .
3. Klik tombol unggah.

Ini tidak akan berfungsi di firefox. Busur derajat akan mengeluh karena elemennya tidak terlihat. Untuk mengupload di firefox Anda perlu membuat input terlihat. Inilah yang saya lakukan:

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

Anda tidak bisa secara langsung.

Untuk alasan keamanan, Anda tidak dapat mensimulasikan pengguna yang memilih file pada sistem dalam rangkaian pengujian fungsional seperti ngScenario.

Dengan Busur derajat, karena didasarkan pada WebDriver, trik ini seharusnya dapat digunakan

T: Apakah file dukungan WebDriver diupload? A: Ya.

Anda tidak dapat berinteraksi dengan dialog browser file OS asli secara langsung, tetapi kami melakukan beberapa keajaiban sehingga jika Anda memanggil WebElement # sendKeys ("/ path / to / file") pada elemen upload file, itu melakukan hal yang benar. Pastikan Anda tidak WebElement # click () elemen upload file, atau browser mungkin akan hang.

Ini berfungsi dengan baik:

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

Berikut adalah kombinasi saran Andres D dan davidb583 yang akan membantu saya saat saya mengatasi ini ...

Saya mencoba untuk mendapatkan tes busur derajat dieksekusi terhadap kontrol aliran.

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

Ini bekerja untuk saya.

Inilah yang saya lakukan untuk mengunggah file di firefox, skrip ini membuat elemen terlihat untuk mengatur nilai jalur:

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

Saya menyadari bahwa input file di aplikasi web yang saya uji hanya terlihat di Firefox saat digulir ke tampilan menggunakan JavaScript, jadi saya menambahkan scrollIntoView () dalam kode Andres D untuk membuatnya berfungsi untuk aplikasi saya:

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

        callback();
    });

(Saya juga menghapus semua gaya untuk elemen input file)

// Untuk mengunggah file dari 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();

};

Jika Anda ingin memilih file tanpa membuka popup di bawah ini jawabannya:

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

solusi terdokumentasi saat ini hanya akan berfungsi jika pengguna memuat jQuery. i semua situasi yang berbeda pengguna akan mendapatkan kesalahan seperti: Gagal: $ tidak ditentukan

saya akan menyarankan untuk mendokumentasikan solusi menggunakan kode angularjs asli.

misalnya saya akan menyarankan alih-alih menyarankan:

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

menyarankan:

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

yang terakhir lebih standar, di atas sudut dan lebih penting tidak memerlukan jquery