如果想從頭學起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 是開箱即用！啥意思？看下圖！
