前言
做 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屬性。