透過 TestCafe 端對端測試 Vue.js

端對端測試大概是在你的測試工具裡面最強大的一項武器了,你能夠透過這個武器來模擬使用者的使用情景、如何去和網頁、單頁應用程式互動,以此來檢查你的網頁是否運作正常。不幸的是撰寫這種測試有一定的難度,而且還要花過多的時間在雕塑單個測試單元上,接著還要花上一堆時間在建立環境跟設置,還有更多更多的事情⋯⋯。

幸好現在已經有比較方便的解決方案。我們會談到的就是 TestCafe,接著會以此工具展示如何用來端對端測試你的 Vue.js 應用程式。(雖然是這麼說,不過其實這個工具可以用在任何網站跟框架上。)

安裝過程

和傳統的方式不太一樣的是 TestCafe 並沒有太多相依性套件,這意味著你不需要搞得像 Selenium/WebDriver + Browser Drivers + 客戶端函式庫,因為 TestCafe 是個基於 Node.js 的套件,而這個套件已經包含了很多東西,你還不需要去變動設定。如果真要變更什麼設定,基本上都是透過終端機的指令列。

要開始用這個來測試你的 Vue 應用程式,首先透過 Yarn 或 NPM 安裝 testcafe 套件。

# Yarn
$ yarn add testcafe -D

# NPM
$ npm install testcafe --save-dev

準備

先假設你的應用程式在開發環境上能夠透過 npm run dev 建置起來,例如你正使用在 webpack-dev-server 之類的東西。

那麼先在 package.json 裡面新增一個新的腳本,用來執行 testcafe

"scripts": {
  "dev": "...",
  "test": "testcafe all tests/*.test.js --app \"npm run dev\" --app-init-delay 10000 -S -s screenshots",
}

這告訴 testcafe:

  • all - 把系統裡面所能找到的瀏覽器都拿來當作測試對象。可選參數,你能夠透過逗號來分隔瀏覽器名稱。
  • test/*.test.js - 在 test 資料夾中執行所有檔案名稱結尾為 .test.js 的測試。
  • --app \"npm run dev\" - 用來啟動你應用程式的指令。
  • --app-init-delay 10000 - 等待十秒,用來延遲啟動測試,因為要等應用程式開起來。
  • -S - 當測試失敗的時候螢幕截圖。
  • -s screenshots - 把螢幕截圖存放在相對路徑的 screenshots 資料夾中。

現在我們已經準備好要進行端對端測試了。

你的第一個測試

讓我們假設你的應用程式內 <body> 裡面有個文字元素,而且這個元素上頭寫著 Hello World!,而這次的測試我們就要確保事實就是這樣。

任何和瀏覽器有所溝通的函式都會回傳一個 Promise。透過 async/await 來讓你更方便掌控測試的流程,接著你就能體悟「心靈祥和 ˊㄇˋ」 了。

// 每個測試群組都必須建立一個 fixture。
fixture(`首頁`)  
  // 讀取你開發應用程式的網址。
  .page('http://localhost:8080');

// 建立一個新的測試:test(註釋, function(testController): <Promise>)
test('Body > 文字元素需包含 "Hello World!"', async testController => {  
  // 選擇 Body 裡面的文字元素。
  // 在這裡你必須透過 Promise(async/await)來和瀏覽器進行互動。
  const paragraphSelector = await new Selector('body > p');

  // 判斷內部文字是不是就是 "Hello World!"。
  await testController.expect(paragraphSelector.innerText).eql('Hello World!');
});

控制用戶輸入

在更進階一點的端對端測試中,你會需要模擬使用者的輸入動作。就像其他的測試套件ㄧ樣,TestCafe 提供了簡單的方式來應付這種情景。

test('在欄位中進行輸入', async testController => {  
  // 選擇輸入欄位元素(假設是 <body><input type="text"/></body>)
  const inputSelector = await new Selector('body > input[type="text"]');

  await testController
    // 輸入 "Hello World!" 的最後一個單字。
    .typeText(inputSelector, 'World!')
    // 點擊欄位中的最開始的位置。caretPos 是我們希望文字游標移動到的地方。
    .click(inputSelector, { caretPos: 0 })
    // 輸入按鍵,SHIFT+H, e, l, l, o, 還有空白鍵,這個順序會撰寫出 "Hello "。
    .keyPress('H e l l o space')
    // 最終的成果應該是 "Hello World!"。
    .expect(inputSelector.value).eql('Hello World!');
});

還請參考

TestCafe 還能夠做上更多事情。他們也提供了一些好玩的撰寫方式來降低重複撰寫類似測試的函式。想知道更多,就拜訪他們的官方網站吧。


原文:End-to-End Testing Vue.js Apps with TestCafe