前端集成測試

我正在研究做一些前端集成測試，並在這方面有點困難。我知道如何做javascript單元測試，但我並沒有真正瞭解前端測試的想法。前端集成測試

有些場景我想測試：

頁面加載後，我可以檢查一個特定的div填充內容
點擊一個按鈕後，彈出窗口應顯示出來，這是可能的測試
div是否應用了特定的HTML？

什麼是最好的工具使用？我該如何繼續呢？

2014-03-19 woutr_be

硒或茉莉花將適用於這些情況。 – Kyo

@Kyo，謝謝，現在就去看看茉莉花吧！ –

我也會推薦e2e測試來檢查你的網站，特別是你的javascript行爲如你所期望的。有一堆庫可以用來在Javascript中進行Webdriver測試。看看這個stackoverflow線程：Headless Browser and scraping - solutions。

例如在WebdriverJS中，您可以輕鬆地鏈接幾個命令以在瀏覽器中導航並獲取要測試的信息。你的場景之一可能是這樣的（使用摩卡）：

describe("check if overlay pops up", function() { 
    it("opens success overlay when I click on submit", function(done) { 
    browser 
     // show overlay 
     .click(".btn_submit") 
     .isVisible("#overlay", function(err,overlayIsOpen) { 
     assert(err === null); 
     assert(overlayIsOpen === true); 
     }) 
     // hide overlay 
     .click(".btn_ok") 
     .isVisible("#overlay", function(err,overlayIsOpen) { 
     assert(err === null); 
     assert(overlayIsOpen === false); 
     }) 
     .call(done) 
    }); 

    // other tests 
})

你會在項目網站上找到很多其他的命令和例子。您可以在Chrome，Firefox甚至移動設備上的多個瀏覽器上運行這些測試。其他流行的圖書館如Wd.js或Selenium-Webdriver都是基於承諾的，並且或多或少都是相同的。

來源

2014-03-19 16:04:34 ChristianB

回到這裏，如果在#overlay上有一個動畫，我應該暫停一下嗎？或者有沒有辦法解決這個問題？ –

我最終編寫了一些方法，如「wait_for_visibility」，並在點擊模塊時使用這些方法。 – aychedee

但是你的'wait_for_visibilty'仍然需要包含暫停嗎？ –

我用於這些目的的兩種工具是PhantomJS + Mocha或Selenium Webdriver。

如果你想測試實際用戶將看到什麼，我會使用Webdriver。 PhantomJS是一款無頭瀏覽器。 Webdriver實際上驅動一個真正的瀏覽器（Chrome，Firefox等）。

A碼例如，使用Python

from selenium import webdriver 

browser = webdriver.Chrome() 
# at this point a chrome window will open 
browser.get('http://example.com') 

div = browser.find_element_by_css_selector('div.my-class') 

assert div.text == 'The content I want to be there'

我看也有JavaScript的綁定現在（當然）。這個頁面提供了一個很好的安裝everyhing的概述：https://code.google.com/p/selenium/wiki/WebDriverJs

來源

2014-03-19 07:56:13 aychedee

謝謝，這給了我一個正確的方向，我更喜歡Selenium而不是PhantomJS，只是因爲它向我展示了其他用戶會看到什麼。 –

前端集成測試

回答

相關問題