當DOM元素髮生變化時，量角器 - 頁面對象未更新

Question

我正在測試使用頁面對象模式編寫測試的angular.js和im構建的SPA。在應用程序中，我們有許多將被更新的列表。例如，有附件列表會在附件添加/刪除時更新。要添加附件，我們有一個模式窗口，當我們上傳文件並點擊確定。文件上傳和列表更新。

我寫了2個頁面對象，一個用於上傳模式窗口，另一個用於預覽附件列表。在我的測試中，我首先得到附件的當前計數，然後我點擊一個按鈕來激活模態窗口並附加文件。然後我在預覽頁面再次計算附件數量，並將其與1進行比較，但測試失敗。頁面對象不更新，它仍然顯示連接數爲2

測試

it('Should attach a file when a file is selected and OK button is pressed.', function() { 
      var currentFileCount = viewMeetingTabPage.getMeetingAttachmentCount(); 

      viewMeetingPage.clickAddAttachmentButton(); 
      addAttchmentPage.attachFile(); 
      addAttchmentPage.clickConfimAttachFileButton(); 

      currentFileCount.then(function (curCount) { 
       viewMeetingTabPage.getMeetingAttachmentCount().then(function (newCount) { 
        expect(newCount).toBe(curCount + 1); 
        //expect(viewMeetingTabPage.getMeetingAttachmentName()).toBe('test-file.pdf'); 
       }); 
      }); 
     }); 

ViewMeetingTabPage

this.getMeetingAttchments = function() { 
     return element.all(by.repeater('attachment in meeting.AttachmentViewModelList track by $index')); 
    }; 

this.getMeetingAttachmentCount = function() { 
     return this.getMeetingAttchments().count(); 
    }; 

我需要什麼已經是莫名其妙地更新頁面我上傳文件後的對象。我怎樣才能做到這一點。

Answer 1

這就是control-flow的工作原理。爲測試隊列執行一些promise的代碼。他們按照他們添加到流中的順序得到解決，同時他們每個人都等待前一個完成。

it('Should attach a file when a file is selected and OK button is pressed.', function() { 
     # Queues the count promise 
     var currentFileCount = viewMeetingTabPage.getMeetingAttachmentCount(); 

     # Queues some other promises that would start 
     # to get executed once the one above finishes 
     viewMeetingPage.clickAddAttachmentButton(); 
     addAttchmentPage.attachFile(); 
     addAttchmentPage.clickConfimAttachFileButton(); 

     # This piece of code branches-off the control-flow 
     # and gets executed immediately after currentFileCount is resolved 
     # i.e. before the clickAddAttachmentButton 
     currentFileCount.then(function (curCount) { 
      # That's why newCount equals curCount, 
      # they are counting the same number of elements 
      # since nothing changed in the meantime 
      viewMeetingTabPage.getMeetingAttachmentCount().then(function (newCount) { 
       expect(newCount).toBe(curCount + 1); 
       //expect(viewMeetingTabPage.getMeetingAttachmentName()).toBe('test-file.pdf'); 
      }); 
     }); 
    }); 

currentFileCount可以考慮用於所述測試的設置階段，以便將其提取到一個beforeEach塊：

var initialFileCount; 
beforeEach(function() { 
    viewMeetingTabPage.getMeetingAttachmentCount().then(function(count) { 
     initialFileCount = count; 
    }); 
}); 

it('Should attach a file when a file is selected and OK button is pressed.', function() { 
    viewMeetingPage.clickAddAttachmentButton(); 
    addAttchmentPage.attachFile(); 
    addAttchmentPage.clickConfimAttachFileButton(); 
    expect(viewMeetingTabPage.getMeetingAttachmentCount()).toBe(initialFileCount + 1); 
}); 

由於量角器補丁茉莉到測試塊用於控制流之間的等待清空，這可能會奏效。

記住expect也被修補以處理承諾，因此您不需要將其放置在then中。

UPDATE：

其實，你不應該需要高於beforeEach，它應該也喜歡的工作：

var initialFileCount; 

it('Should attach a file when a file is selected and OK button is pressed.', function() { 
    viewMeetingTabPage.getMeetingAttachmentCount().then(function(count) { 
     initialFileCount = count; 
    }); 
    viewMeetingPage.clickAddAttachmentButton(); 
    addAttchmentPage.attachFile(); 
    addAttchmentPage.clickConfimAttachFileButton(); 
    expect(viewMeetingTabPage.getMeetingAttachmentCount()).toBe(initialFileCount + 1); 
}); 

這就是所謂的取景在WebDriverJS User’s Guide。