系列1：[單步除錯找到 cy.visit 的實現原始碼(一) - 找到了 BlueBird](https://blog.csdn.net/i042416/article/details/127018471)

我們的目標是找到 cy.visit 是如何向目標網站發起請求的：

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

來到這行：

```javascript
return this.emit('backend:request', eventName, ...args, fn);
```
單步除錯進去：

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

觀察者釋出者的討論都一樣，根據 event 找到 listener：
![](https://img-blog.csdnimg.cn/img_convert/c2f11437393b4c3aefe31673d86cf2e6.png)

這個 ws，意思是 Web Socket 嗎？

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

這個全域性物件在此匯入：_packages_socket__WEBPACK_IMPORTED_MODULE_4__
![](https://img-blog.csdnimg.cn/img_convert/9ee88482ac05c49e64ff3853b9ae47cf.png)

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

首先要找到這個 browser.ts 在本地什麼位置，然後才能知道它是啥東西？

本地找了一圈，沒找到這個檔案。

單步除錯：

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

第九行的 if 語句進不去：
![](https://img-blog.csdnimg.cn/img_convert/b1799e3defa041125548aca4490add8c.png)

然後執行這個 index.js 檔案：

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

注意這些巢狀的 Webpack_require 呼叫：

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

parseuri：
![](https://img-blog.csdnimg.cn/img_convert/1b249fddd4633936b178f5e1bf1fb81c.png)

但是本地 node_modules 資料夾裡，並沒有這個叫做 parseuri 的資料夾。

而是這個 ../../node_modules/parseuri/index.js，直接出現在 cypress_runner.js 原始檔裡：
![](https://img-blog.csdnimg.cn/img_convert/b7af215c8a49dad52d3a05e1e0892be1.png)

這些出現在 cypress_runner.js 裡的 browser.ts, 應該是從某個地方複製過來的吧。這裡又涉及到一個問題，這個 cypress_runner.js 的`生成邏輯和時機`?

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

工程資料夾裡也沒有叫 `socket` 的資料夾。

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

最後發現，使用的是瀏覽器原生的 WebSocket 的 send 方法，傳送請求到目標網站：

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

遺留問題：

1. cypress_runner.js 這個檔案哪裡來的？
2. 使用 WebSocket 的好處？

第一個問題我們回答不了，因為我們還不知道我們使用命令列 `yarn cypress:open` 之後，背後都發生了什麼。

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

這裡又引出第三個有趣的問題：
![](https://img-blog.csdnimg.cn/img_convert/4c7e9e1d39d0106a23b394b5a67067f2.png)

我們在 package.json 給 cypress:open 指定的命令列是 `cypress open`，但是我們直接在命令列視窗裡使用 `cypress open`, 是無法啟動的：

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

但為啥用 `yarn cypress:open` 就可以？

在 node_modules 資料夾下的 `.bin` 資料夾裡的 cypress.cmd 里加一行列印語句：
![](https://img-blog.csdnimg.cn/img_convert/9717cd99b24511613bd4a76af6635cd6.png)

執行時的輸出：

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

說明 `yarn cypress:open` 命令列，會呼叫到 `.bin` 資料夾內的 cypress.cmd:

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

把 `.bin` 下的 cypress 改成其他名稱，對 windows 系統下的命令列執行也沒有影響：
![](https://img-blog.csdnimg.cn/img_convert/f99fffe30b3e8d02b5daade6a0e93bf5.png)

但是把 cypress.cmd 改成其他名稱，比如 cypress.cmd22, 執行命令列就會出錯了，進一步說明 `node_modules\.bin\cypress.cmd` 是 windows 下 cypress open 命令的入口。

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

至此我們又引入了第四個問題：

node_modules 根目錄下的 .bin ,

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

和 node_modules/cypress/bin 這兩個 bin 資料夾的聯絡？

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

單步除錯找到 cy.visit 的實現原始碼(二) - WebSocket?

相關文章