javascript - 在 AngularJS 应用程序中测试使用 Protractor 将文件上传到文件选择器

Question

在 AngularJS 项目中，我正在尝试使用 Protractor 测试文件是否已正确上传到 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 所说，要上传文件，必须完成一些技巧，因为...

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

所以基于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 没有关闭并且仍然是这样的:

我联系了 filepicker 团队，他们的回答是:

So when file is uploaded all what’s happen is sending results to the original website via communication iframe or local storage. If communication iframe and local storage are unavailable data sending will fail and widget will be stayed open with error message.

正如他们所说，问题可能是 Protractor 是 iframe 之一 所以无法与主框架通信，尽管我正在做 ptor.switchTo().defaultContent(); 切换到主框架。

控制台只有一个错误，并没有多大帮助:

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

提前致谢。

Answer 1

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

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