前言
做 web 自動化的時候，我們希望用例失敗了能截圖，這是之前用 selenium 寫 ui 自動化用例的時候經常遇到的問題。
cypress 可以說是業界良心了，不僅幫我們失敗的時候自動截圖保存下來，還把每個用例都錄制成了mp4的小視頻，方便追蹤問題的時候回放視頻
screenshots 失敗截圖
Cypress自帶截屏功能，無論你是在使用cypress open的交互模式下運行，還是在使用cypress run的運行模式下運行(可能是在CI中)。
- 要手動截屏，你可以使用cy.screenshot()命令。
- 在交互模式之外的運行過程中發生失敗時，Cypress將自動捕捉屏幕截圖。
- 可以通過Cypress.Screenshot.defaults()將screenshotOnRunFailure設置為false來關閉此行為。
- 截圖存儲在screenshotsFolder中，默認設置為cypress/screenshots。
- 在cypress run之前，Cypress將清空任何現有的截圖。
- 如果你不想在運行前清空你的截圖文件夾，你可以設置trashAssetsBeforeRuns為false。
當我們用命令行執行完用例后
cypress run
運行結果
(Video)
- Started processing: Compressing to 32 CRF
- Finished processing: D:\Cypress\cypress\videos\xx.js.mp4 (0 seconds)
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ × baidu.js 00:46 1 - 1 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ blog.js 00:07 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ debug.js 00:02 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ × hook_demo.js 00:18 6 2 4 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ login_fixture.js 00:03 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ × login_web.js 00:06 1 - 1 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ parametrize.js 00:47 3 3 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ × web_a.js 00:11 1 - 1 - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ × web_home.js 00:09 2 - 1 - 1 │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ web_white_list.js 2ms - - - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ xuexi.js 142ms 1 1 - - - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ √ xx.js 2ms - - - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
× 5 of 12 failed (42%) 02:35 18 9 8 - 1
從上面的結果可以看出哪些用例失敗了，比如我想看 login_web.js 這條為什么失敗
在 /cypress/screenshots 目錄下可以看到每個js名稱命名的文件夾，下面找到對應的失敗截圖
從上面截圖就能快速定位到問題，訪問登錄頁面的時候，定位 #count 元素失敗了
videos 視頻錄制
在運行用例的時候，已經對每個用例錄制了對應的視頻 /cypress/videos 目錄下就能找到以腳本命名的.mp4 視頻，這點簡直不要太贊！
接下來看下效果
很容易看出是因為沒打開登錄首頁，因為其他用例登錄后有 cookies 了，就直接進入到已登錄后的頁面了
視頻功能
可以通過將video設置為false來關閉錄制視頻功能。
視頻存儲在videosFolder中，默認設置為cypress/videos。
當cypress run完成后，Cypress將自動壓縮視頻以節省文件大小。默認情況下，會壓縮成32 CRF，但是這是可配置的videoCompression屬性。
當使用--record來執行測試的時候，視頻在每一個spec文件運行后都會被處理，壓縮並且上傳到Dashboard Service，不管用例成功還是失敗。
為了將這種行為改變為僅在測試失敗的情況下才處理視頻，請將videoUploadOnPasses配置項設置為false。
在cypress run之前，Cypress清空現有的視頻。如果你不想在運行前清空你的視頻文件夾，你可以將trashAssetsBeforeRuns設置為false。