如果想從頭學起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 進階部分進行詳細介紹