若是想從頭學起Cypress，能夠看下面的系列文章哦html
https://www.cnblogs.com/poloyy/category/1768839.htmlnode
注意git
51 testting 有一篇文章會和個人同樣，由於是我投的稿~~github
前言
- Cypress 的測試報告模塊脫胎於 Mocha 的測試報告，故任何 Mocha 支持的測試報告都可直接用於 Cypress
- 下面將利用 Cypress-example 提供的 web 應用程序做爲例子，須要先啓動本地服務
進入被測應用 logging-in__html-web-forms 的目錄web
C:\Users\user\Desktop\py\cypress-example-recipes\examples\logging-in__html-web-forms
啓動本地服務npm
npm start
啓動成功後，cmd窗口將顯示服務器的地址和端口json
內置的測試報告
內置的測試報告包括 Mocha 的內置測試報告和直接嵌入在 Cypress 中的測試報告，主要有如下幾種瀏覽器
- spec 格式報告
- json 格式報告
- 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 文件中
第二步：編寫自定義報告文件
- 進入 Cypress 安裝目錄下的 cypress 目錄下（本案例在： C:\Users\user\Desktop\py\MyCypress\cypress ）
- 建立 reporter 文件夾，而後建立一個 custom_reporter.js 文件
- 寫如下代碼（此自定義報告擴展了內置報告，僅更改了成功的顯示樣式）
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 進階部分進行詳細介紹
本文分享 CNBlog - 阿菠蘿阿瑤。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。