Как загрузить файл в angularjs e2e protractor testing

Ответы:

138

Вот как я это делаю:

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. Задайте путь к элементу input 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();
Андрес Д
источник
+1 Это работает. Андрес, вам следует попросить OP дать отзыв, поскольку этот ответ может быть принят как правильный.
кома
1
Также работал с транспортиром.
Илья Бараховски
6
FWIW, __dirnameиногда указывает на временный каталог (вероятно, куда тесты копируются средством запуска тестов). Вы можете использовать process.cwd()вместо, __dirnameесли это так.
BorisOkunskiy
У меня это работает в хроме, но в других браузерах транспортир жалуется, что элемент не виден ... есть идеи?
Омид Ахурай
Вы не можете загрузить с помощью firefox, потому что элемент не отображается. Вам нужно сделать элемент видимым, чтобы задать значение пути. См. Обновленный ответ.
Andres D
14

Вы не можете напрямую.

По соображениям безопасности вы не можете имитировать пользователя, который выбирает файл в системе в рамках функционального набора тестирования, такого как ngScenario.

С Protractor, поскольку он основан на WebDriver, должно быть возможно использовать этот трюк

В: Поддерживает ли WebDriver загрузку файлов? Ответ: Да.

Вы не можете напрямую взаимодействовать с диалоговым окном браузера файлов собственной ОС, но мы делаем некоторую магию, так что если вы вызовете WebElement # sendKeys ("/ path / to / file") в элементе загрузки файла, он сделает все правильно. Убедитесь, что вы не WebElement # click () элемент загрузки файла, иначе браузер может зависнуть.

Это прекрасно работает:

$('input[type="file"]').sendKeys("/file/path")
bdavidxyz
источник
Кажется, это не отвечает на вопрос и ссылается на другой сайт
activedecay 03
4

Вот комбинация советов Андреса Д. и 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);
Дуг
источник
2
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);

Это работает для меня.

Кога
источник
1

Это то, что я делаю для загрузки файла в firefox, этот скрипт делает элемент видимым для установки значения пути:

   browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
Родриго Салазар
источник
0

Я понял, что ввод файла в веб-приложении, которое я тестирую, отображается в Firefox только тогда, когда он прокручивается в представление с помощью JavaScript, поэтому я добавил scrollIntoView () в код Андреса D, чтобы он работал в моем приложении:

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

        callback();
    });

(Я также удалил все стили для элемента ввода файла)

Pinkninja
источник
0

// Чтобы загрузить файл из 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();

};

случайный парень
источник
Так для чего нужна переменная fileToUpload?
Lynx 242,
0

Если вы хотите выбрать файл, не открывая всплывающее окно, вот ответ:

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);
Аакаш паливал
источник
-3

текущие документированные решения будут работать, только если пользователи загружают jQuery. я во всех разных ситуациях пользователи получат такую ​​ошибку: Failed: $ is not defined

Я бы предложил задокументировать решение, используя собственный код angularjs.

например, я бы предложил вместо того, чтобы предлагать:

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

предлагать:

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

последний более стандартный, поверх angular и, что более важно, не требует jquery

Джованни Пеллерано
источник