在 day16 的文章，我們提到在自動化測試過程中，測試報告是很重要的產出，
一份完整且直接的測試報告，有助於衡量測試品質和追蹤問題！

而 TestCafe 官方 和 社群 都提供了許多種格式的測試報告，給我們選擇使用。

但昨天介紹的是靜態的測試報告，
報告上提供的資訊都是文字數據，例如測試通過數量、測試結果、失敗案例的錯誤訊息等。

當一個測試案例失敗時，如果測試報告能提供的資訊越豐富，除錯上會越容易。
TestCafe 提供了強大的 截圖 和 錄影 功能，可以將測試過程完整圖像式的記錄下來。

用圖片和影片讓測試報告更豐富

使用 TestCafe 的 Screenshots and Videos 功能

首先我們還是要進到 day14 的 Code

cd day14

透過 takeScreenshot() 和 -s 參數，可以啟動截圖 -s <path>, --screenshots <path>

testcafe chrome TestCafeExamplePage.js -s screenshots

透過 -S -s參數，設定只有失敗時才截圖 -S, --screenshots-on-fails

testcafe chrome TestCafeExamplePage.js -S -s screenshots

透過 -p 參數可以設定存放截圖的目錄結構，
Path Pattern Placeholders -p <pattern>, --screenshot-path-pattern <pattern>

testcafe chrome TestCafeExamplePage.js -s screenshots -p '${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png'

安裝 ffmpeg

npm install -g @ffmpeg-installer/ffmpeg

透過 --video參數，設定啟動錄影 --video <basePath>

testcafe chrome TestCafeExamplePage.js --video videos

透過 --video-options 參數，設定錄影行為，例如只有測試失敗才錄影
Basic Video Options --video-options <option=value[,option2=value2,...]>

testcafe chrome TestCafeExamplePage.js --video videos --video-options singleFile=true,failedOnly=true

透過 --video-encoding-options 參數，設定錄影參數，例如每秒 20 張圖、影片比例等。
videoEncodingOptions --video-encoding-options <option=value[,option2=value2,...]>

testcafe chrome TestCafeExamplePage.js --video videos --video-encoding-options r=20

參考資料

1. Screenshots and Videos
2. Command Line Interface