【问题标题】：Unable to upload file(ng-file upload) in firefox browser with protractor?无法使用量角器在 Firefox 浏览器中上传文件（ng 文件上传）？
【发布时间】：2016-08-08 17:20:36
【问题描述】：

我正在使用量角器 + jasmine 测试 Angular 应用程序的自动化，我们使用 ng-file 上传器在我们的应用程序中上传文件。自动化脚本在 Chrome 浏览器中成功上传文件，但在 Firefox 浏览器中不工作，我收到以下错误：

消息：失败：元素当前不可见，因此可能无法与之交互

堆栈： ElementNotVisibleError：元素当前不可见，因此可能无法与之交互

文件上传的代码sn-p

this.uploadFile = function (uploadFile) {
    var fileToUpload = uploadFile;
    var absolutePath = path.resolve(__dirname, fileToUpload);
    $('input[type="file"]').sendKeys(absolutePath);
    element(submitBtn).click();
};

<label style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height: 0px; border: medium none; margin: 0px; padding: 0px;" tabindex="-1">
upload
<input id="ngf-{{ id }}" type="file" ngf-change="onChange($file)" ngf-keep="{{ keep }}" required="required" ngf-validate="{{ validate }}" ngf-pattern="{{ pattern }}" ngf-accept="{{ allowedMime }}" ngf-multiple="{{ multipleAllowed }}" ngf-model-invalid="invalid" ng-model-options="{ allowInvalid: multipleAllowed }" ng-model="files" ngf-select="" ngf-drop="" name="{{ name }}" accept=".csv,text/plain,application/vnd.ms-excel"/>

任何帮助将不胜感激！

【问题讨论】：

根据我的经验“元素当前不可见”错误表明您尝试与之交互的元素未显示在当前视图中。也可能是分辨率问题。您能否在与元素交互时确认该元素是否确实在视图中？
元素被隐藏。
您使用的是哪个 Firefox 驱动程序，它是本地会话还是远程会话？
本地。火狐45.3.0版（ESR版）

标签： javascript node.js firefox protractor ng-file-upload

【解决方案1】：

哇哦..!!最后我解决了这个问题并能够在Firefox浏览器中上传文件。

请看代码：

this.uploadFile = function (uploadFile) {
    if(browser.browserName === 'firefox') {
        browser.executeAsyncScript(function(callback) {
            document.querySelectorAll('body>label')[0].setAttribute('style', 'position: absolute');
            callback();
        });
    }
    var fileToUpload = uploadFile;
    var absolutePath = path.resolve(__dirname, fileToUpload);
    $('input[type="file"]').sendKeys(absolutePath);
    element(uploadBtn).click();
};

要获取浏览器名称，请在 conf.js 文件中添加以下内容

onPrepare: function () {
    browser.driver.getCapabilities().then(function(caps){
        browser.browserName = caps.get('browserName');
    });
}

还要注意 document.querySelectorAll('body>label')[0].setAttribute('style', 'position: absolute');将删除我的隐藏标签标签中的所有属性，使我的输入标签（标签标签的子标签）可见并将位置设置为绝对。

那么firefox不会抛出错误：元素当前不可见，因此可能无法与之交互

【讨论】：