前端集成測試

Question

我正在考慮做一些前端集成測試並且稍微堅持下去。 我知道如何進行javascript單元測試，但我並沒有真正了解前端測試。

我想測試的一些場景：

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

什么是最好的工具？ 我將如何繼續這一切？

Answer 1

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

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

一個使用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

Answer 2

我還建議使用e2e測試來檢查你的網站，特別是你的javascript是否像你期望的那樣。 您可以使用一堆庫在Javascript中進行Webdriver測試。 看看這個stackoverflow線程： 無頭瀏覽器和抓取 - 解決方案 。

例如，在WebdriverJS中，您可以輕松鏈接多個命令以在瀏覽器中導航並獲取要測試的信息。 您的一個場景可能如下所示（使用Mocha）：

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都是基於承諾的，並且或多或少都是一樣的。

Answer 3

我強烈建議使用cypress進行前端集成測試。 相應的實用程序使用mocha-chai測試套件以非常簡單和直接的方式在網頁上創建和評估測試用例。 此外，您可以從顯示視頻的命令行或GUI執行測試，也可以記錄每個測試。 這是一個小樣本：

describe('Test myProjects input fields', function () {
beforeEach(() => {
    cy.visit('https://webpage.link/go/alink')
})

it('fills Project form', () => {
    cy.contains('Where is your item located?')

    cy.get('myelement-component-autocomplete[myelement="myProject/Home/hotelName"]').within(() => {
        cy.get('input').type('Hilton')
    })

    cy.get('myelement-component-datetime[myelement="myProject/Home/departureDate"]').within(() => {
        cy.get('input').type('2/4/2019')
    })
})
}

稍后，您可以將其添加到項目CI管道中，每次推送更改時，前端測試也將進行評估。