如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
Cypress 簡介
- 基於 JavaScript 的前端測試工具，可以對瀏覽器中運行的任何內容進行快速、簡單、可靠的測試
- Cypress 是自集成的，提供了一套完整的端到端測試，無須借助其他外部工具，安裝后即可快速地創建、編寫、運行測試用例，且對每一步操作都支持回看
- 不同於其他只能測試 UI 層的前端測試工具，Cypress 允許編寫所有類型的測試，覆蓋了測試金字塔模型的所有測試類型【界面測試，集成測試，單元測試】
- Cypress 底層協議不采用 WebDriver
Cypress 原理
Webdriver 運行的方式
- 大多數測試工具（如：Selenium/webdriver）通過在外部瀏覽器運行並在網絡上執行遠程命令來運行
- 因為 Webdriver 底層通信協議基於 JSON Wire Protocol，運行需要網絡通信
Cypress 運行的方式
Cypress 和 Webdriver 方式完全相反，它與應用程序在相同的生命周期里執行
Cypress 運行測試的大致流程
- 運行測試后，Cypress 使用 webpack 將測試代碼中的所有模塊 bundle 到一個 js 文件中
- 然后，運行瀏覽器，並且將測試代碼注入到一個空白頁中，然后它將在瀏覽器中運行測試代碼【可以理解成：Cypress 將測試代碼放到一個 iframe 中運行】
Cypress 運行測試的技術流程
- 每次測試首次加載 Cypress 時，內部 Cypress Web 應用程序先把自己托管在本地的一個隨機端口上【如：http://localhost:65874】
- 在識別出測試中發出的第一個 cy.visit() 命令后，Cypress 會更改本地 URL 以匹配你遠程應用程序的 Origin【滿足同源策略】，這使得你的測試代碼和應用程序可以在同一個 Run Loop 中運行
Cypress 運行更快的根本原因
- Cypress 測試代碼和應用程序均運行在由 Cypress 全權控制的瀏覽器中
- 且它們運行在同一個Domain 下的不同 iframe 中，所以 Cypress 的測試代碼可以直接操作 DOM、Window Objects、Local Storages而無須通過網絡訪問
Cypress 穩定性、可靠性更高的原因
- Cypress 還可以在網絡層進行即時讀取和更改網絡流量的操作
- Cypress 背后是 Node.js Process 控制的 Proxy 進行轉發，這使得 Cypress 不僅可以修改進出瀏覽器的所有內容，還可以更改可能影響自動化操作的代碼
- Cypress 相對於其他測試工具來說，能從根本上控制整個自動化測試的流程
Cypress 架構圖
Cypress 的特性
時間穿梭【歷史記錄】
- Cypress 在測試代碼運行時會自動拍照
- 等測試運行結束后，用戶可在 Cypress 提供的 Test Runner 里，通過懸停在命令上的方式查看運行時每一步都發生了什么
實時重新加載
當測試代碼修改保存后，Cypress 會自動加載改動地方，並重新運行測試
Spies（間諜）、Stubs（存根）、Clock（時鍾）
- Cypress 允許你驗證並控制函數行為，Mock 服務器的響應，更改系統時間
- 單元測試觸手可及！
運行結果一致性
Cypress 架構不使用 Selenium 或 Webdriver，在運行速度、可靠性測試、測試結果一致性上均有良好保障
可調試性
當測試失敗時，可以直接從開發者工具（F12 Chrome DevTools）進行調試，這熟悉吧？？
自動等待
- 使用Cypress，永遠無須在測試中添加 強制等待、隱性等待、顯性等待
- Cypress 會自動等待元素至可靠操作狀態時才執行命令或斷言
- 異步操作觸手可及！
網絡流量控制
Cypress 可以 Mock 服務器返回的結果，無須依賴后端服務器，即可實現模擬網絡請求
截圖和視頻
Cypress 在測試運行失敗時會自動截圖，在無頭運行時（無GUI界面）會錄制整個測試套件的視頻
Cypress 優勢的總結
像我們在用 Selenium 時，需要集成單元測試框架（unittest、pytest），想要好看的測試報告還得集成（allure），想要 Mock 還得引入對應的 Mock 庫
而 Cypress 是開箱即用！啥意思？看下圖！
