在 AngularJS 应用程序中测试使用量角器将文件上传到文件选择器

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 所说，要上传文件，必须完成一些技巧，因为...

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.

正如他们所说，问题可能是量角器 是 iframe 之一，因此无法与主框架通信，尽管我正在 ptor.switchTo().defaultContent(); 切换到主框架帧.

控制台只有一个错误，并没有太大帮助：

我几乎知道会发生什么但我不知道还能做什么 advice/idea?

提前致谢。

Answer 1

一个可能的原因可能是 "when" 您正在切换到默认内容 - 尝试仅在 表单提交后才切换 :

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

Answer 2

它现在正在工作，正如所说，我 .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;
    });
});

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

在 AngularJS 应用程序中测试使用量角器将文件上传到文件选择器

Testing upload a file to filepicker with protractor in AngularJS app

javascript

testing

angularjs

angularjs-e2e

protractor