Cypress系列（41）- Cypress 的測試報告

小菠蘿測試筆記發表於2020-07-24
測試報告

如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

注意

51 testting 有一篇文章會和我的一樣，因為是我投的稿~~

 

前言

  • Cypress 的測試報告模組脫胎於 Mocha 的測試報告，故任何 Mocha 支援的測試報告均可直接用於 Cypress
  • 下面將利用 Cypress-example 提供的 web 應用程式作為例子，需要先啟動本地服務

進入被測應用 logging-in__html-web-forms 的目錄

C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms

 

啟動本地服務

npm start

 

啟動成功後，cmd視窗將顯示伺服器的地址和埠

 

內建的測試報告

內建的測試報告包括 Mocha 的內建測試報告和直接嵌入在 Cypress 中的測試報告，主要有以下幾種

  1. spec 格式報告
  2. json 格式報告
  3. junit 格式報告

準備工作

確保  package.json  檔案的 scripts 模組加入瞭如下鍵值對  "cypress:run":"cypress run" 

  •  cypress run  是以無頭瀏覽器模式跑測試用例資料夾下的所有測試用例
  •  cypress open  會開啟測試用例集的介面，需要手動執行

 

spec 格式報告

簡介

spec 格式是 Mocha 的內建報告，它的輸出是一個巢狀的分級檢視

 

如何使用

在 Cypress 中使用 spec 格式的報告非常簡單，在命令列執行時加上 --reporter=spec 

 

執行測試

進入 Cypress 安裝的目錄，cmd敲

yarn cypress:run --reorter=spec

 

執行完成後，測試報告如下圖

 

json 格式報告

簡介

json 測試報告格式將輸出一個大的 JSON 物件

 

如何使用

在 Cypress 中使用 json 格式的報告非常簡單，在命令列執行時加上  --reporter=json 

 

執行測試

進入 Cypress 安裝的目錄，cmd敲

yarn cypress:run --reporter=json --reporter-options "toConsole=true"

 

執行完成後，測試報告如下圖

 

junit 格式報告

簡介

junit 測試報告格式將輸出一個 xml 檔案

 

如何使用

在 Cypress 中使用 xml 格式的報告非常簡單，在命令列執行時加上   --reporter=junit 

 

執行測試

進入 Cypress 安裝的目錄，cmd敲

yarn cypress:run --reporter junit --reporter-options "mochaFile=results/test_output.xml,toConsole=true"

 

執行完成後，測試報告如下圖

 

自定義的測試報告

除了內建的測試報告，Cypress 也支援使用者自動以報告格式

 

Mochawesome 報告介紹

  • Mochawesome 是與 JavaScript 測試框架 Mocha 一起使用的自定義報告程式，它執行在 Node.js（≥8）上
  • 並與 mochawesome-report-generatir 結合使用生成獨立的 HTML/CSS 報告，以幫助視覺化測試執行

 

在 Cypress 中使用 Mochawesome 報告的步驟

第一步

  • 將 Mocha、Mochawesome 新增至專案中（看下面命令）
npm install --save-dev mocha
npm install --save-dev mochawesome

注意坑

  • 先看看 node_modules 目錄下是否有 mocha 資料夾，如果有直接裝 mochawesome
  • 如果安裝 mocha 失敗，出現很古怪的錯誤，譬如 mkdirp 版本不行（如：  mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x.  ）
  • 嘗試先 update mkdirp 庫，如果也報錯，則 uninstall mkdirp 庫，如果仍然報錯；則把 Cypress 目錄下的 node_modules 整個資料夾刪掉，重新執行 npm install ，大概率可以解決問題了

（別問我怎麼知道這些坑...）

 

第二步

進入 Cypress 安裝目錄，cmd執行下面命令

yarn cypress:run --reporter mochawesome

 

執行完成後，可以看到下圖

 

測試報告資料夾 mochawesome-report 會生成在專案根目錄下

 

點選 html 檢視視覺化報告

 

使用者自定義報告的步驟

第一步：配置 reporter 選項

  •  cypress.json  檔案中配置  reporter 選項，指定 reporter 檔案位置
  • 在本栗子中，把 reporter 定義在 custom_reporter.js 檔案中

 

第二步：編寫自定義報告檔案

  1. 進入 Cypress 安裝目錄下的 cypress 目錄下（本案例在： C:\Users\user\Desktop\py\MyCypress\cypress ）
  2. 建立 reporter 資料夾，然後建立一個 custom_reporter.js 檔案
  3. 寫以下程式碼（此自定義報告擴充套件了內建報告，僅更改了成功的顯示樣式）
var mocha = require('mocha');
module.exports = MyReporter;

function MyReporter(runner) {
    mocha.reporters.Base.call(this, runner)
    var passes = 0
    var failures = 0

    runner.on('pass', function (test) {
        passes++
        console.log('pass:%s', test.fullTitle())
    })

    runner.on('fail', function (test, err) {
        failures++
        console.log('fail:%s -- error:%s', test.fullTitle(), err.message)
    })

    runner.on('end', function () {
        console.log('使用者自定義報告：%d/%d', passes, passes + failures)
    })
}

 

第三步：執行測試

進入 Cypress 安裝目錄，cmd敲下面命令

yarn cypress:run --reporter ../cypress/reporters/custom_reporter.js

 

執行完成後，測試報告如下圖

 

生成混合測試報告

前言

  • Cypress 除了支援單個測試報告，還支援混合測試報告
  • 老闆或者管理者一般都喜歡看到多種不一樣樣式的報告，比如測試在 CI 中執行時，又想生成 junit 格式的報告，又想在執行時實時看到測試輸出
  • Cypress 官方推薦使用 mocha-multi-reporters 來生成混合測試報告（https://github.com/stanleyhlng/mocha-multi-reporters）

 

使用 mocha-multi-reporters 的測試步驟

第一步：安裝所需庫

npm install --save-dev mocha-multi-reporters mocha-junit-reporter

 

第二步：建立 json 檔案

在 cypress/reporters 資料夾下，建立一個 custom.json 檔案，增加如下內容：

{
  "reporterEnabled": "spec,json, mocha-junit-reporter",
  "reporterOptions": {
    "mochaFile": "cypress/results/results-[hash].xml"
  }
}

 

第三步：執行測試

進入 Cypress 安裝目錄，cmd敲下面命令

yarn cypress run --reporter mocha-multi-reporters  --reporter-options configFile=cypress/reporters/custom.json --spec cypress/integration/testLogin.js

 

執行完成後，測試報告如下圖

 

測試報告資料夾 results 會生成在 Cypress安裝路徑/cypress  目錄下

 

總結

  • 當我們執行完一次測試（可能包含多個 spec），我們更希望看到一個完整的測試報告檔案，而不是分開的獨立檔案
  • 特別對於 HTML 格式報告來說，整合到同一個 HTML 報告中是更加直觀的
  • Cypress 為了解決此問題也提供了高階的方法，將在後續的 Cypress 進階部分進行詳細介紹

相關文章