# 一起玩 Cypress(1) - 初探及快速建立
###### tags: `Test` `Cypress`

## 介紹
Cypress是一套E2E、整合測試、單元測試的測試框架，提供很友善的UI畫面檢視其測試流程，從建立、撰寫一直到執行測試上都算直覺，其官方文件也寫得很清楚簡單(**超級詳細**)，十分推薦想要快速導入測試流程的專案。其內部測試框架為[Mocha.js](https://mochajs.org/)如果之前有在使用的應該會上手更加快速。

## 目錄
[TOC]

# 一、前言
剛好在專案空暇之餘被分配協助研究新的測試架構，因此接觸到了Cypress後續也整合到CI流程並且產出對應的報表，不過在此階段會專注在建立和使用說明。

# 二、使用介紹

先來設定一個簡單的情境讓我們直接實作，情境就是我想要測試Google搜尋是否可以正常使用，接著就來進行吧。

## 環境建立

`Cypress` 安裝起來非常簡單只需要執行以下指令就可以安裝起測試環境
> 安裝前記得確認環境需求唷

npm install cypress --save-dev

建立完成後會發現什麼文件都沒有，建立結果畫面如下：

這邊的化官網表示直接執行以下指令即可開啟Cypress的測試UI
> 不過因為個人習慣的方式還是使用`npm run open`去執行

npx cypress open

成功後會跳出此畫面
> 這邊其實改版蠻多的，之前版本沒有這些UI協助
>

## 測試建立

接著前面的UI流程，我們選擇**E2E Testing**點選後會得到以下畫面，此畫面主要是Cypress相關基本設定，未來還是可以透過實體檔調整，目前就直接選擇Continue

接著要使用測試的瀏覽器，目前支援的瀏覽器不算太多，但一值有再改版我相信未來應該會提供更多選擇
選擇完成後就繼續下一步

接著Cypres會透過瀏覽器開啟另一個視窗

直接建立一個空白的測試腳本

後續會提供UI編輯程式，這邊直接忽略後續我們直接在VsCode寫

出現你所編輯的檔案這樣就順利建立起第一個測試腳本了(雖然還沒寫程式)

在撰寫程式之前我們先回到我們VsCode來看一下專案結構

## 結構說明

執行上面步驟之後會發現`Cypress`多了一個自己名稱的資料夾和一個config檔，

:::info
:bulb: **說明**: 舊版本的化結構會長的向如此，其測試腳本是放在`integration\`底下
:::

這邊也可以直接參考[官網資料](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Folder-structure)
* cypress.config：之前 plugins 內的程序會轉移到這邊
* e2e：e2e測試腳本放置位子
* fixtures：假資料的位子
* support：在執行測試之前皆會執行的共用區，客製化命令也是寫在此

## 撰寫測試

在`Google.cy.js`檔案底下編輯以下程式碼，我們用來是否用來搜尋成功單純使用網址驗證

describe('empty spec', () => {
  it('passes', () => {
    // 訪問網站
    cy.visit('https://google.com');
    // 下面用法就很像 JQuery 就不在解釋了
    cy.get('.gLFyf').type("Cypress Test")
    cy.get('.CqAVzb > center > .gNO89b').click()
    cy.url().should('include', '/search')
  })
})

之後前往瀏覽器選擇對應的測試腳本就可以執行測試了

測試結果如下，可以發現右邊有UI畫面左邊`TEST BODY`底下會有測試細項，操作到此已經完成第一個測試案例了，接下來就依據需求自由發揮了

# 結論
撰寫此文章的時間點發現Cypress又改版了，資料分類上與之前有些不同整體執行速度也快了許多，此版本的UI協助也幾乎快要可以用滑鼠執行完所有事情(只差幫忙寫程式碼)，但中文的教學文章偏少不過官網本身的教學也足夠詳細了，整理來說導入測試的難度真的不算太高。

<br/>

---

相關參考來源：
[cypress](https://docs.cypress.io/)
[[Cypress 1] E2E Testing 初探](https://medium.com/hannah-lin/cypress-e2e-testing-%E5%88%9D%E6%8E%A2-a10eca3c0cf7)
[單元測試：Mocha、Chai 和 Sinon](https://cythilya.github.io/2017/09/17/unit-test-with-mocha-chai-and-sinon/)

<style>
code > span{ color: red;}
</style>