在AngularJS应用程序中使用量角器将文件上传到filepicker

在AngularJS项目中，我试图用量角器测试文件是否正确上传到filepicker。在AngularJS应用程序中使用量角器将文件上传到filepicker

Filepicker input type="file"元素whithin一个iframe name="filepicker_dialog" id="filepicker_dialog"所以，首先是需要可以访问的IFRAME：

var 
    ptor = protractor.getInstance(), 
    driver = ptor.driver; 

//Open iframe 
element(by.id('openIframe')).click(); 

//Wait iframe is present 
browser.wait(function(){ 
    return element(by.id('filepicker_dialog')).isPresent(); 
}) 
.then(function(){ 
    //Switch protractor to iframe 
    ptor.switchTo().frame('filepicker_dialog'); 
})

硒维基说，上传的文件中的一些伎俩已经被完成，因为......

You can't interact with the native OS file browser dialog directly

所以巴sed的上How to upload file in angularjs e2e protractor testing回答我的输入值设定文件路径：

//Upload image 
.then(function(){ 
    //Get image's absolute path 
    var fileToUpload = '../../public/assets/img/header.jpg'; 
    var absolutePath = path.resolve(__dirname, fileToUpload); 

    //Set image's path as input (file type) value    
    driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath); 

    //Submit form 
    driver.findElement(By.id('fileUploadForm')).submit(); 

    // Switch back to Default Content 
    ptor.switchTo().defaultContent(); 
});

文件似乎是iframe中，但不是我的项目被上传，问题是该iframe未关闭并保持这样的： enter image description here

我接触filepicker团队和他们的回答是：

所以，当文件被上传所有东西的发生是通过通信iframe或本地存储将结果发送到原始网站。如果通信iframe和本地存储不可用，则数据发送将失败，并且小部件将保持打开并显示错误消息。

因为他们认为问题可能是量角器是一个iframe中所以不能与主框架沟通，尽管我做ptor.switchTo().defaultContent();切换到主框架。

控制台只有一个错误，而不是真正有用的： enter image description here

我几乎知道会发生什么，但我不知道还有什么做的，任何建议/想法？

在此先感谢。

来源

2015-03-03 Mikel

它现在的工作，为alecxe说我.switchTo().defaultContent()但我做完后我.sendKeys(absolutePath)。不需要提交表单。

然后我等待iframe关闭（not present）。

所有代码：

var 
    ptor = protractor.getInstance(), 
    driver = ptor.driver; 

//Open iframe 
element(by.id('openIframe')).click(); 

//Wait iframe is present 
browser.wait(function(){ 
    return element(by.id('filepicker_dialog')).isPresent(); 
}) 
.then(function(){ 
    //Switch protractor to iframe 
    ptor.switchTo().frame('filepicker_dialog'); 
}) 
//Upload image 
.then(function(){ 
    //Get image's absolute path 
    var fileToUpload = '../../public/assets/img/header.jpg'; 
    var absolutePath = path.resolve(__dirname, fileToUpload); 

    //Set image's path as input (file type) value    
    driver.findElement(By.id('fileUploadInput')).sendKeys(absolutePath); 
}) 
// Switch back to Default Content 
.then(function(){ 
    ptor.switchTo().defaultContent(); 
}) 
//Wait iframe is closed 
.then(function(){ 
    browser.wait(function(){ 
     var deferred = protractor.promise.defer(); 
     element(by.id('filepicker_dialog')).isPresent() 
      .then(function(present){ 
       deferred.fulfill(!present); 
      }); 
     return deferred.promise; 
    }); 
});

来源

2015-03-03 16:54:33 Mikel

一个可能的原因可能是“当”你切换为默认的内容 - 尝试这样做只是一旦提交表单：

element(by.id('fileUploadForm')).submit().then(function() { 
    browser.switchTo().defaultContent(); 
});

来源

2015-03-03 14:22:02 alecxe

<input name="upload" type="file">

解决方案：

 
var absolutePath = path.join(__dirname,'..\\..\\dash-e2e-tests\\resources\\files-cabin\\test-files\\image.png); 

element(by.xpath("xpath")).sendKeys(absolutePath);

来源

2017-10-13 07:48:13

在AngularJS应用程序中使用量角器将文件上传到filepicker

回答

相关问题