如果想從頭學起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
前言
這裡的栗子專案是 Cypress 提供的，在 github 上，所以要 clone 到本地的話需要裝 Git 哦！
下載被測應用
進入要安裝該應用的目錄，cmd 敲
git clone git@github.com:cypress-io/cypress-example-recipes.git
進入專案目錄下，安裝專案所需依賴包，敲
npm install
安裝成功後，專案的檔案結構如下圖；所有被測應用栗子都在 examples 資料夾中
啟動被測應用
啟動測試應用時，可以進入不同子專案資料夾來啟動不同的應用；
假如，我們要測試表單型別的登入，可以開啟以下被測應用
cd examples\logging-in__html-web-forms>
啟動本地server
npm start
啟動成功後，cmd視窗將顯示伺服器的地址和埠
開啟瀏覽器訪問：http://localhost:7077/，即可看到登入頁面
快速測試登入頁面
首先，設計測試用例步驟
- 訪問http://localhost:7077
- 輸入使用者名稱、密碼，點選登入
- 如果使用者名稱和密碼正確，則登入成功，否則登入失敗
接下來，我們來看看實現測試用例的步驟
建立測試
在此目錄下 cypress安裝路徑\node_modules\.bin\cypress\integration ，建立一個 js 檔案，比如：testLogin.js
integration資料夾
- Cypress 安裝完畢後自動生成的資料夾
- 也是 Cypress 預設存放測試用例的根目錄，任何建立在此目錄下的檔案都將被當作測試用例
編寫測試用例
首先，要在網頁上定位到使用者名稱、密碼輸入框，此案例中使用標籤+屬性名來定位；最終測試程式碼如下
我們們在後面再講解程式碼的意思哦
執行測試
進入 Cypress 安裝資料夾，cmd執行命令
yarn cypress:open
單擊 testLogin.js，Cypress 會啟動 Test Runner 執行測試，執行成功後，將看到執行結果頁面；執行時長是真的快....
除錯測試用例
前言
- 測試用例執行時，難免會發生各種情況導致執行失敗；快速定位發生錯誤的位置，瞭解錯誤資訊，一直是自動化測試的痛點
- 而 Cypress 提供了多種 debug 能力，可以在測試執行錯誤時直達錯誤位置，並支援回放錯誤發生時的上下文資訊，可直接看到測試失敗的原因
Cypress Debug 能力介紹
每個命令均有快照且支援回放
像下圖，左側就是測試步驟，右側是測試頁面
- 滑鼠 hover 測試步驟，在右側可以看到執行該命令時的頁面效果
- 滑鼠點選測試步驟，可以鎖定該步驟，然後檢視上下文資訊
支援檢視測試執行時發生的特殊頁面事件
包括：
- 網路 XHR 請求
- URL 雜湊更改
- 頁面載入
- 表單提交
例如，上面測試用例中，點選【submit】後產生的就是提交表單的請求，看下圖
可以看到一個 submit 操作，分成了三步走
- form sub：提交表單
- page load：頁面載入
- new url：訪問新的頁面
Console 輸出每個命令的詳細資訊
瀏覽器F12即可見到熟悉的開發者工具頁面了
以上圖為栗子，一個 submitting form 表單提交的請求，在 Console 中列印了詳細的資訊，可以快速瞭解在執行時的詳細狀態資訊
暫停測試並逐步執行、恢復執行
在除錯測試程式碼時，Cypress 提供了兩個命令來暫停測試執行
- cy.pause()
- cy.debug()
cy.pause() 的栗子
在表單提交之前暫停測試，我們來看看執行結果
左上角有兩個按鈕，從左往右分別是
- Resume：繼續執行測試用例並執行到結束
- Next:get：測試會變成逐步執行，點一下執行下一個命令
cy.debug() 的栗子
執行測試看看下圖結果
測試執行在找到表單的時候，暫停執行並等待使用者操作
頂部的Paused in debugger，右邊兩個按鈕分別是
- Resume Script Execution（F8）：繼續執行測試用例並執行到結束
- Step Over next function call（F10）：跳轉到下一個呼叫debug()函式的地方
當找到隱藏或多個元素時，視覺化結果
更改 username 輸入框的定位器，使他匹配到不止一個元素
執行測試看看下面結果
因為定位表示式匹配到不止一個元素，所以執行 type() 方法時以失敗告終
總結
這一節我們們以測試一個登入介面為需求，寫了一個簡單的測試用例來做栗子，後面將詳細講解 Cypress 的各部分內容哦