Cách tải tệp lên trong thử nghiệm thước đo góc anglejs e2e

Tôi muốn kiểm tra tải tệp lên bằng kiểm tra anglejs e2e. Làm thế nào để bạn làm điều này trong các bài kiểm tra e2e? Tôi chạy kịch bản thử nghiệm của mình thông qua nghiệp chướng tai gai mắt.

Đây là cách tôi làm điều đó:

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. Sử dụng pathmô-đun để giải quyết đường dẫn đầy đủ của tệp mà bạn muốn tải lên.
2. Đặt đường dẫn đến phần tử input type = "file" .
3. Bấm vào nút tải lên.

Điều này sẽ không hoạt động trên firefox. Thước đo góc sẽ phàn nàn vì phần tử không hiển thị. Để tải lên trong firefox, bạn cần hiển thị đầu vào. Đây là những gì tôi làm:

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

Bạn không thể trực tiếp.

Vì lý do bảo mật, bạn không thể mô phỏng người dùng đang chọn tệp trên hệ thống trong bộ thử nghiệm chức năng như ngScenario.

Với Thước đo góc, vì nó dựa trên WebDriver, nên có thể sử dụng thủ thuật này

H: WebDriver có hỗ trợ tải lên tệp không? A: Vâng.

Bạn không thể tương tác trực tiếp với hộp thoại trình duyệt tệp hệ điều hành gốc, nhưng chúng tôi thực hiện một số phép thuật để nếu bạn gọi WebElement # sendKeys ("/ path / to / file") trên phần tử tải lên tệp, nó sẽ hoạt động đúng. Đảm bảo rằng bạn không WebElement # nhấp vào () phần tử tải tệp lên, nếu không trình duyệt có thể bị treo.

Điều này hoạt động tốt:

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

Đây là tổng hợp lời khuyên của Andres D và davidb583 sẽ giúp ích cho tôi khi tôi làm việc này ...

Tôi đang cố gắng thực hiện các bài kiểm tra thước đo góc dựa trên các điều khiển của 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);

Điều này đang làm việc cho tôi.

Đây là những gì tôi làm để tải tệp lên trên firefox, tập lệnh này hiển thị phần tử để đặt giá trị đường dẫn:

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

Tôi nhận ra rằng đầu vào tệp trong ứng dụng web mà tôi đang thử nghiệm chỉ hiển thị trong Firefox khi nó được cuộn vào chế độ xem bằng JavaScript, vì vậy tôi đã thêm scrollIntoView () trong mã của Andres D để làm cho nó hoạt động cho ứng dụng của tôi:

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

        callback();
    });

(Tôi cũng đã xóa tất cả các kiểu cho phần tử đầu vào tệp)

// Để tải lên tệp từ 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();

}

Nếu bạn muốn chọn một tệp mà không cần mở cửa sổ bật lên bên dưới là câu trả lời:

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

các giải pháp tài liệu hiện tại sẽ chỉ hoạt động nếu người dùng đang tải jQuery. Tôi tất cả các trường hợp khác nhau mà người dùng sẽ gặp lỗi như: Không thành công: $ không được xác định

tôi sẽ đề nghị ghi lại một giải pháp bằng cách sử dụng mã anglejs bản địa.

ví dụ: tôi sẽ đề nghị thay vì đề nghị:

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

đề nghị:

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

thứ hai là tiêu chuẩn hơn, ở trên cùng của góc cạnh và quan trọng hơn là không yêu cầu jquery