在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

回答

相關問題