測試在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);