Saya ingin menguji pengunggahan file menggunakan tes angularjs e2e. Bagaimana Anda melakukan ini dalam tes e2e? Saya menjalankan skrip pengujian saya melalui grunt karma.
angularjs
file
file-upload
gruntjs
protractor
Pawan Singh
sumber
sumber
Jawaban:
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(); });
path
modul untuk menyelesaikan jalur lengkap file yang ingin Anda 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();
sumber
__dirname
terkadang menunjuk ke direktori sementara (mungkin tempat tes disalin oleh runner tes). Anda dapat menggunakanprocess.cwd()
alih-alih__dirname
jika itu masalahnya.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
Ini berfungsi dengan baik:
$('input[type="file"]').sendKeys("/file/path")
sumber
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);
sumber
var imagePath = 'http://placehold.it/120x120&text=image1'; element(by.id('fileUpload')).sendKeys(imagePath);
Ini bekerja untuk saya.
sumber
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')");
sumber
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)
sumber
// 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();
};
sumber
fileToUpload
?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);
sumber
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
sumber