系列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)

ITPub博客

单步调试找到 cy.visit 的实现源代码(二) - WebSocket?

最新文章