Cara mengunggah file dalam pengujian busur derajat angularjs e2e

Jawaban:

140

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();
Andres D
sumber
+1 Ini berfungsi. Andres, Anda harus meminta umpan balik OP karena ini mungkin bisa diterima sebagai jawaban yang benar.
koma
1
Bekerja dengan busur derajat juga.
Ilia Barahovski
7
FWIW, __dirnameterkadang menunjuk ke direktori sementara (mungkin tempat tes disalin oleh runner tes). Anda dapat menggunakan process.cwd()alih-alih __dirnamejika itu masalahnya.
BorisOkunskiy
Ini berfungsi untuk saya di chrome, tetapi untuk browser lain, busur derajat mengeluh bahwa elemen tersebut tidak terlihat ... ada ide?
Omid Ahourai
Anda tidak dapat mengupload dengan firefox karena elemen tersebut tidak terlihat. Anda perlu membuat elemen terlihat untuk menyetel nilai jalur. Lihat jawaban yang diperbarui.
Andres D
15

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")
bdavidxyz.dll
sumber
Ini sepertinya tidak menjawab pertanyaan, dan menautkan ke situs lain
aktif pada tanggal
4

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);
Doug
sumber
2
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

Ini bekerja untuk saya.

Koga
sumber
1

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')");
Rodrigo Salazar
sumber
0

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)

pinkninja
sumber
0

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

};

randomguy
sumber
Jadi untuk apa variabel itu fileToUpload?
Lynx 242
0

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);
Aakash paliwal
sumber
-3

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

Giovanni Pellerano
sumber