如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

這裡的栗子專案是 Cypress 提供的，在 github 上，所以要 clone 到本地的話需要裝 Git 哦！

下載被測應用

進入要安裝該應用的目錄，cmd 敲

git clone [email protected]:cypress-io/cypress-example-recipes.git

進入專案目錄下，安裝專案所需依賴包，敲

npm install

安裝成功後，專案的檔案結構如下圖；所有被測應用栗子都在 examples 資料夾中

啟動被測應用

啟動測試應用時，可以進入不同子專案資料夾來啟動不同的應用；

假如，我們要測試表單型別的登入，可以開啟以下被測應用

cd examples\logging-in__html-web-forms>

啟動本地server

npm start

啟動成功後，cmd視窗將顯示伺服器的地址和埠

開啟瀏覽器訪問：http://localhost:7077/，即可看到登入頁面

快速測試登入頁面

首先，設計測試用例步驟

1. 訪問http://localhost:7077
2. 輸入使用者名稱、密碼，點選登入
3. 如果使用者名稱和密碼正確，則登入成功，否則登入失敗

接下來，我們來看看實現測試用例的步驟

建立測試

在此目錄下 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 操作，分成了三步走

1. form sub：提交表單
2. page load：頁面載入
3. new url：訪問新的頁面

Console 輸出每個命令的詳細資訊

瀏覽器F12即可見到熟悉的開發者工具頁面了

以上圖為栗子，一個 submitting form 表單提交的請求，在 Console 中列印了詳細的資訊，可以快速瞭解在執行時的詳細狀態資訊

暫停測試並逐步執行、恢復執行

在除錯測試程式碼時，Cypress 提供了兩個命令來暫停測試執行

1. cy.pause()
2. 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 的各部分內容哦

&n