Як завантажити файл при тестуванні транспортера 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. Встановіть шлях до елемента type = "file" .
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 завантаження файлів? В: Так.

Ви не можете безпосередньо взаємодіяти з діалоговим вікном переглядача файлів ОС, але ми робимо магію, щоб, якщо ви викликаєте WebElement # sendKeys ("/ шлях / до / файлу") для елемента завантаження файлу, він робить правильно. Переконайтеся, що ви не натискаєте WebElement # () на елемент завантаження файлу, інакше браузер, можливо, зависне.

Це чудово працює:

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

Ось комбінація Андреса Д та порад 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: \

{

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. я у всіх різних ситуаціях користувачі отримуватимуть таку помилку: Помилка: $ не визначено

я б запропонував задокументувати рішення, використовуючи власний код angularjs.

наприклад, я б запропонував замість того, щоб пропонувати:

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

запропонувати:

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

остання є більш стандартною, поверх кутової і, що важливіше, не вимагає jquery