這裡的 _stack_utils__WEBPACK_IMPORTED_MODULE_5__，

![](https://img-blog.csdnimg.cn/img_convert/7d164bced9e14ef7e6a8fbdedc5971d2.png)
這些 imported module 可以在檔案頭看到：

![](https://img-blog.csdnimg.cn/img_convert/4d538c82e6658036e5cb3bb787624bc2.png)
harmony import：

![](https://img-blog.csdnimg.cn/img_convert/229f404e3e8e4f28eecc716b305cc1b6.png)
cypress_runner.js 原始碼裡這個 harmony import 的含義：

https://stackoverflow.com/questions/52871611/what-is-harmony-and-what-are-harmony-exports
其實就是 ES6 import 語法：

https://en.wikipedia.org/wiki/ECMAScript#4th_Edition_(abandoned)

As the first "ECMAScript Harmony" specification, it is also known as "ES6 Harmony".
Harmony 是專案代號

建立一個 chainer 例項，以便稍後訪問：

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

chainer 例項的建立：
![](https://img-blog.csdnimg.cn/img_convert/4fb1c99b808016bff4ea441f70318049.png)

呼叫 chainer 例項的 visit 方法：
![](https://img-blog.csdnimg.cn/img_convert/21d24ac15163410776531c763dbb375f.png)
chainer 例項原型鏈上有個 visit 方法：

![](https://img-blog.csdnimg.cn/img_convert/17e5e9438e0ceac0735acdc50b5e6050.png)
引數為 visit 傳入的 url 和 beforeHook：

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

這裡 enqueue 的是建立好的 chainer id 和對應 command 的 name，引數。

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

單步除錯進去：找到這個 commandFns 物件：
![](https://img-blog.csdnimg.cn/img_convert/5a9f0a1b12884836c90e333ddd03bc71.png)
visit 的實現也在裡面：
![](https://img-blog.csdnimg.cn/img_convert/8b8533a8ecc4cff70b42e714d11739e1.png)
這裡能看到 visit 實現的具體位置：
![](https://img-blog.csdnimg.cn/img_convert/11f4d49247d8fe83e69bc27ac4e688e0.png)

單擊這個超連結進去，設定一個斷點：
![](https://img-blog.csdnimg.cn/img_convert/4adc3626b851748ed2b9e4c67b2bb963.png)

然後繼續執行 Cypress，斷點觸發，可以看到這個 visit 命令是如何得到排程的：

![](https://img-blog.csdnimg.cn/img_convert/2be9029806e4556087c03f428a3d5544.png)
這個 options 填充的程式碼，很像 AJAX 或者 fetch API 呼叫之前的 option 或者 header 填充準備工作：

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

先把一個箭頭函式賦給常量 const visit，然後立即執行這個箭頭函式：

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

我們呼叫 cy.visit 時指定的 url 到哪裡去了呢？
![](https://img-blog.csdnimg.cn/img_convert/5694474109853990a52487dd1110cd7d.png)

繼續執行，進入 then 指定的回撥函式：
![](https://img-blog.csdnimg.cn/img_convert/696631c2691d205f9f8607657483a6f1.png)

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

下圖程式碼的意思是，呼叫 `../driver/src/cypress/utils.ts` 檔案裡的工具函式：
![](https://img-blog.csdnimg.cn/img_convert/70ada860aeffea84134ccfadfc7d1649.png)

透過閉包維護的 url：
![](https://img-blog.csdnimg.cn/img_convert/081f750c13b30cdd1f14229c3bd6a25f.png)

為這個 url 封裝一個物件：
![](https://img-blog.csdnimg.cn/img_convert/c198fad49408d53162512715d684a09a.png)

終於看到曙光了，requestUrl 函式，看名字判斷，應該離我們尋找的目標很接近了：
![](https://img-blog.csdnimg.cn/img_convert/a3152ad3b954d7f7c7a25079637ec5d3.png)

requestUrl 函式的實現：
![](https://img-blog.csdnimg.cn/img_convert/c03f3d2ebaac16153d76cdd5b723c15e.png)

當這個函式觸發時，已經從 url 得到回應了，所以這裡並不是我們要找的函式：
![](https://img-blog.csdnimg.cn/img_convert/a17b57df64882d576ab8d368ece788b3.png)

收到的回應：
![](https://img-blog.csdnimg.cn/img_convert/fe1ca89de8c4ce3bf510651238f6e226.png)

這個 bluebird 是什麼鬼？
![](https://img-blog.csdnimg.cn/img_convert/0508a8d06f3fe8ca8ae1da9503365393.png)

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

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

未完待續。

單步除錯找到 cy.visit 的實現原始碼(一) - 找到了 BlueBird

相關文章