วิธีอัพโหลดไฟล์ในการทดสอบไม้โปรแทรกเตอร์ angularjs e2e

ฉันต้องการทดสอบการอัปโหลดไฟล์โดยใช้การทดสอบ angularjs e2e คุณทำสิ่งนี้ในการทดสอบ e2e ได้อย่างไร? ฉันเรียกใช้สคริปต์การทดสอบของฉันผ่านกรรมฮึดฮัด

นี่คือวิธีที่ฉันทำ:

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. ใช้pathโมดูลเพื่อแก้ไขเส้นทางแบบเต็มของไฟล์ที่คุณต้องการอัปโหลด
2. กำหนดเส้นทางไปยังประเภทการป้อนข้อมูล = "ไฟล์"องค์ประกอบ
3. คลิกที่ปุ่มอัปโหลด

สิ่งนี้จะไม่ทำงานบน firefox ไม้โปรแทรกเตอร์จะบ่นเพราะมองไม่เห็นองค์ประกอบ ในการอัปโหลดใน firefox คุณต้องทำให้อินพุตมองเห็นได้ นี่คือสิ่งที่ฉันทำ:

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

คุณโดยตรงไม่ได้

ด้วยเหตุผลด้านความปลอดภัยคุณไม่สามารถจำลองผู้ใช้ที่กำลังเลือกไฟล์ในระบบภายในชุดทดสอบการทำงานเช่น ngScenario

ด้วย Protractor เนื่องจากมันขึ้นอยู่กับ WebDriver จึงควรใช้เคล็ดลับนี้ได้

ถาม: WebDriver รองรับการอัพโหลดไฟล์หรือไม่ ตอบ: ใช่

คุณไม่สามารถโต้ตอบกับกล่องโต้ตอบเบราว์เซอร์ไฟล์ OS ดั้งเดิมได้โดยตรง แต่เราใช้เวทมนตร์เพื่อที่ว่าถ้าคุณเรียก WebElement # sendKeys ("/ path / to / file") ในองค์ประกอบการอัปโหลดไฟล์จะเป็นสิ่งที่ถูกต้อง ตรวจสอบให้แน่ใจว่าคุณไม่ได้ WebElement # click () องค์ประกอบการอัปโหลดไฟล์มิฉะนั้นเบราว์เซอร์อาจค้าง

ใช้งานได้ดี:

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

นี่คือคำสั่งผสมของ Andres D และคำแนะนำของ davidb583 ที่จะช่วยฉันได้ในขณะที่ฉันทำงานผ่านสิ่งนี้ ...

ฉันพยายามที่จะทำการทดสอบไม้โปรแทรกเตอร์กับการควบคุม 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);

นี่ใช้งานได้สำหรับฉัน

นี่คือสิ่งที่ฉันทำเพื่ออัปโหลดไฟล์บน firefox สคริปต์นี้ทำให้องค์ประกอบมองเห็นได้เพื่อตั้งค่าเส้นทาง:

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

ฉันรู้ว่าอินพุตไฟล์ในเว็บแอปที่ฉันกำลังทดสอบนั้นสามารถมองเห็นได้เฉพาะใน Firefox เมื่อเลื่อนเข้าสู่มุมมองโดยใช้ JavaScript ดังนั้นฉันจึงเพิ่ม scrollIntoView () ในโค้ดของ Andres D เพื่อให้แอปของฉันทำงานได้:

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

        callback();
    });

(ฉันยังลบสไตล์ทั้งหมดสำหรับองค์ประกอบอินพุตไฟล์)

// ในการอัปโหลดไฟล์จาก 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();

};

หากคุณต้องการเลือกไฟล์โดยไม่ต้องเปิดป๊อปอัปด้านล่างคือคำตอบ:

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

โซลูชันที่เป็นเอกสารปัจจุบันจะใช้ได้เฉพาะในกรณีที่ผู้ใช้กำลังโหลด jQuery ฉันทุกสถานการณ์ที่แตกต่างกันผู้ใช้จะได้รับข้อผิดพลาดเช่น Failed: $ ไม่ได้กำหนดไว้

ฉันขอแนะนำให้จัดทำเอกสารวิธีแก้ปัญหาโดยใช้รหัส angularjs ดั้งเดิม

เช่นฉันจะแนะนำแทนที่จะแนะนำ:

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

ที่จะแนะนำ:

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

หลังเป็นมาตรฐานมากกว่าบนเชิงมุมและที่สำคัญกว่าไม่ต้องใช้ jquery