我們單步除錯如下圖第 20 行程式碼，cy.visit 執行後，不會立即去訪問 url 裡指定的網站：

![](https://img-blog.csdnimg.cn/img_convert/c4fc18a2e5ee677c940b2c8041845d0d.png)

進入一個 generic 函式，這裡發現 cy. 的函式，是執行時動態掛接上去的：

![](https://img-blog.csdnimg.cn/img_convert/b61c4642be88ab4f856232fa8e66d74a.png)

首先進行呼叫棧的儲存工作？返回一個空的字串：

![](https://img-blog.csdnimg.cn/img_convert/a4556f677110d7a126bd3abda9f0dc3c.png)

建立一個 chain 例項：
![](https://img-blog.csdnimg.cn/img_convert/8a1c26e2962f7e39c2fc93d2218c3e31.png)

單例模式嗎？
![](https://img-blog.csdnimg.cn/img_convert/3e76168df9d5cc4451779e4ce2c6ef13.png)

建立一個 chain 例項：
![](https://img-blog.csdnimg.cn/img_convert/d7f8f435585bcb7e3c17499433123f01.png)

這裡建構函式才正式呼叫：
![](https://img-blog.csdnimg.cn/img_convert/057a7626cac36e5f4d24e3c6779bc33d.png)

這個 chainer.visit 是個什麼函式？

![](https://img-blog.csdnimg.cn/img_convert/976bb96bc426322077bd4bc59ddf32b5.png)

一個 enqueue 動作：
![](https://img-blog.csdnimg.cn/img_convert/b5b0eb1eaf44151ad9638edaf84dae63.png)

enqueue 的實現就是：建立一個 Cypress action 例項：

![](https://img-blog.csdnimg.cn/img_convert/3944e9d2273c47393c86110bd6492c25.png)

![](https://img-blog.csdnimg.cn/img_convert/dd01edfcbdabd671738451ca330e4897.png)

有限狀態自動機：
![](https://img-blog.csdnimg.cn/img_convert/078b7bf50a121f1f134bc2ebdbbea9b2.png)

如何開啟 Cypress 的除錯模式？

![](https://img-blog.csdnimg.cn/img_convert/90bb10a3c680c71cd062d6e86afc6ffb.png)

加一個 debug 操作：
![](https://img-blog.csdnimg.cn/img_convert/ff645e91bce130435269a83757ce2492.png)

斷點停下來之後，進度條仍然在走：
![](https://img-blog.csdnimg.cn/img_convert/4139fda50528464a75e67da06012f4dd.png)

從 queue 裡摘出一個 action，執行：

![](https://img-blog.csdnimg.cn/img_convert/04c4d268952eeae718fc6a3f1c8d4edf.png)

每個 command 新增到 queue 裡之後，都有一個伴隨的 fn：

![](https://img-blog.csdnimg.cn/img_convert/83b52ba2c06bea2649e868f259a28fbc.png)

![](https://img-blog.csdnimg.cn/img_convert/be35a35af7a16ad99b7fcb039b037fe6.png)

這個 useroptions 如何指定？
![](https://img-blog.csdnimg.cn/img_convert/2945396e5eb96754b339a6f0551c398b.png)

列印出 command 名稱，引數，還有當前的 subject：
![](https://img-blog.csdnimg.cn/img_convert/b3ad196365c561afd973842cee6d2715.png)

subject 就是全域性 windows 物件：
![](https://img-blog.csdnimg.cn/img_convert/3a19a2304b91c59a9684d1bb7ada7be6.png)

成功載入的頁面：
![](https://img-blog.csdnimg.cn/img_convert/790ad87519e7d3f2552c05f824f4dba6.png)

debug 上面就是 pause 指令：
![](https://img-blog.csdnimg.cn/img_convert/e2cb5bdd9d72c197ce19353d991c685f.png)

Cypress測試程式碼在與應用程式相同的執行迴圈中執行。這意味著 Cypress 測試編寫人員，可以訪問在頁面上執行的程式碼，以及瀏覽器提供給開發人員的輔助工具，如文件、視窗和偵錯程式。

我們直接在 Cypress 測試程式碼裡，插入 debugger 之類的關鍵字，是無法按照我們期望的方式工作的：

```javascript
it('let me debug like a fiend', () => {
  cy.visit('/my/page/path')

cy.get('[data-testid="selector-in-question"]')

debugger // Doesn't work
})
```
cy commands 會將一個 action 例項加入一個任務佇列中。

上面程式碼的 cy.visit() 和 cy.get() 呼叫將立即返回，並將它們的工作放入佇列等待稍後完成，而 `debugger` 指令將在這兩條呼叫產生的任何命令實際得到排程並執行之前執行。

cy.visit 執行邏輯的單步除錯

相關文章