命令列安裝 Cypress：

> npm install cypress --save-dev

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

npm init

編輯package.json，新增如下的 json 語句：

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

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

然後執行命令 npm run open, 即可開啟 Cypress test runner：

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

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

預設看到的examples 資料夾裡有很多現成的例子：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210415163959282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

我們在 integration 資料夾下新建一個 sample_spec.js：

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

會發現在 Test runner裡，立即能找到這個新建的測試：

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

輸入如下程式碼：

```javascript
describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})
```

點選 Test Runner 裡的 sample_spec.js 超連結，看到期望的執行結果：assertion 透過。

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

動手開發第一個 Cypress 測試應用

相關文章