测试在AngularJS app中使用量角器将文件上传到filepicker

Question

在AngularJS项目中，我尝试使用量角器进行测试，如果文件正确上传到filepicker 。

Filepicker input type="file"元素是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');
 })

正如Selenium wiki所说，要上传文件，必须要做一些技巧，因为......

您无法直接与本机OS文件浏览器对话框进行交互

所以基于如何在angularjs上传文件e2e量角器测试答案我在输入值上设置文件路径：

//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没有关闭，仍然是这样的：

我联系了filepicker团队，他们的答案是：

因此，当文件上传时，所有发生的事情都是通过通信iframe或本地存储将结果发送到原始网站。 如果通信iframe和本地存储不可用，则数据发送将失败，并且窗口小部件将保持打开状态并显示错误消息。

因为他们建议问题可能是量角器是iframe的一个所以无法与主框架通信，尽管我正在做ptor.switchTo().defaultContent(); 切换到主框架。

控制台只有一个错误，并没有真正的帮助：

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

提前致谢。

Answer 1

一个可能的原因可能是“何时”切换到默认内容 - 尝试仅在提交表单后执行此操作：

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

Answer 2

它现在正在工作，因为alecxe说我.switchTo().defaultContent()但是我做了.sendKeys(absolutePath) 。 不需要提交表格。

然后我等待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');
 })
 //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;
    });
});

Answer 3

<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);