npx 是 npm 自帶的命令列工具：

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

在專案根目錄下，使用命令列 `npx cypress open` 啟動：

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

也可以利用 yarn 啟動：`yarn run cypress open`

或者是直接執行 `node_modules` bin 資料夾下的二進位制命令。

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

這樣就可以成功啟動 Cypress Launchpad：
![](https://img-blog.csdnimg.cn/img_convert/9ba85d9b06a641106e8d287c1ddd88ce.png)

package.json 新增如下的 script：

```json
"scripts": {
    "cypress:open": "cypress open"
  }
```

然後可以用如下的命令啟動：

`npm run cypress:open`

npm install 安裝完畢後，工程目錄下有個 `cypress\integration` 資料夾，裡面有很多 sample 檔案。

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

每個 test 一開始都是一個 blank state，因此需要在 `beforeEach` 函式呼叫裡進行初始化。
![](https://img-blog.csdnimg.cn/img_convert/4ddbb334144a145e2744071c16f477a8.png)

在這個 spec 執行的時候，cy 為什麼就可用了？

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

單步除錯 todo.spec.js，在 `webpack://` 資料夾下：

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

具體的實現位置？

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

為什麼會在這個 url 下面？`https://example.cypress.io/__cypress/runner/cypress_runner.js`

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

https://example.cypress.io/todo

這是一個開發好的 web 應用：

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

cy 的方法都是 generic 注入進去的：

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

記住這個檔名：cypress_runner.js

執行佇列：

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

佇列是一個 object：
![](https://img-blog.csdnimg.cn/img_convert/3b6e5165f686fc6e51a548b001be4987.png)

Promise 似乎不是原生的 Promise：
![](https://img-blog.csdnimg.cn/img_convert/efd28cdb0dd4112c3a3f9ada1ac0a917.png)

如何才能看到 cy.visit 訪問網站的準確動作？

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

cy.visit 會立即返回，而不會同步的去訪問網站：

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

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

debugger // Doesn't work
})
```

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

這裡是 Cypress 統一處理 action 的地方：

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

```javascript
action(eventName, ...args) {
                // normalizes all the various ways
                // other objects communicate intent
                // and 'action' to Cypress
                debug(eventName);

switch (eventName) {
                case 'recorder:frame':
                    return this.emit('recorder:frame', args[0]);

case 'cypress:stop':
                    return this.emit('stop');
```

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

使用 onBeforeLoad 鉤子，我們可以在 Web 應用的主頁，載入之前，注入一些資料給它：

```javascript
it('can modify window._bootstrappedData', function () {
      // in this solution we use cy.visit({onBeforeLoad: ...})
      // to modify the window._bootstrappedData global so that
      // it's passed into our App.start() method

const data = {
        env: 'test',
        api: 'https://test-api.company.com',
      }

cy.visit('/bootstrap.html', {
        onBeforeLoad: (win) => {
          win._bootstrappedData = data
        },
      })

cy.get('pre')
      .invoke('text')
      .should('eq', JSON.stringify(data))
    })
  })
```

關於 Cypress 的啟動和 cy.visit 的除錯

相關文章