Using Cypress to E2E Testing

## Using Cypress to E2E Testing

### Preface

既然要完成一個 CI/CD flow, 一定要包含個自動化測試, 既然是 E2E Testing, 就來玩一下目前最夯的 ```Cypress```

### Setup

```bash
npm install cypress
```

跑完之後 會在 Project 裡面多出一個路徑, 名稱是 cypress, 還有一個 cypress.json

```bash
cd cypress/integration
mkdir sample
touch index.spec.js
touch index_hash.spec.js
```

我們的目的是寫一個範例, 在 local 起一個 server, index page 在 ```http://localhost:3000```, 讓 cypress 測試通過; 在 ```http://localhost:3000/#withHash``` 模擬其他頁面, 讓 cypress 測試失敗

```javascript
// index.spec.js
describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('/')
  })
})

// index_hash.spec.js
describe('The Home Page (with Hash)', () => {
  it('successfully loads', () => {
    cy.visit('/#withHash')
  })
})
```

在 cypress.json 加入 local server url

```json
# cypress.json
{
  "baseUrl": "http://localhost:3000"
}
```

最重要的部分, 在 ```support/index.js``` 加入這段, 讓 cypress 可以捕捉 console 的 error 或 warning

```js
// support/index.js
Cypress.on('window:before:load', (win) => {
  cy.spy(win.console, 'error')
  cy.spy(win.console, 'warn')
})

afterEach(() => {
  cy.window().then((win) => {
    expect(win.console.error).to.have.callCount(0)
    expect(win.console.warn).to.have.callCount(0)
  })
})
```

因為這邊 frontend 是用 ```vite```, 在 ```src/App.vue```, 模擬在其他頁面噴錯的狀況

```js
// src/App.vue
if (!!window.location.hash) {
  console.error('do some error')
}
```

### Run Test

```bash
npx cypress run --spec 'cypress/integration/sample/*'
```

結果如下

![image](https://user-images.githubusercontent.com/16830139/112254594-d36eb700-8c9b-11eb-9ae6-991f36c97006.png)


### Conclusion

用了一下 cypress 後發現其實語法和行為都蠻像之前用過的 ```puppeteer```, 也有 headless 模式 (畢竟是一樣用 ```chromium``` 核心), 不過 cypress 有一個整合性非常好的 [cloud service](https://dashboard.cypress.io/), 可以在上面的 Dashboard 看到整個完整的 testing record, 還可以串接 ```Github```, ```Bitbucket```, ```GitLab```, ```Slack``` ...等等, 實在是方便又好用！

### References

- [E2E Testing 初探](https://medium.com/hannah-lin/cypress-e2e-testing-%E5%88%9D%E6%8E%A2-a10eca3c0cf7)

- [Cypress Docs](https://docs.cypress.io/)

- [Cypress Dashboard](https://dashboard.cypress.io/)


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Cypress to E2E Testing #18