文件上传的代码段

Question

我正在使用量角器+茉莉花进行角度应用程序的测试自动化，我们在应用程序中使用ng-file上传器上传文件。自动化脚本在Chrome浏览器中成功上传文件但在firefox浏览器中无法正常工作，我收到以下错误：

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

进行交互

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

进行交互

文件上传的代码段

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"/>

非常感谢任何帮助!!

Answer 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（＆＃39; body＆gt; label＆＃39;）[0] .setAttribute（＆＃39; style＆＃39;，＆＃39; position：absolute＆＃39;）;将删除隐藏标签标签中的所有属性，使我的输入标签（标签标签的子标签）可见，并将位置设置为绝对。

然后firefox不会抛出错误：元素当前不可见，因此可能无法与

进行交互

无法使用量角器在firefox浏览器中上传文件（ng-file upload）？

文件上传的代码段

1 个答案: