Cypress是為現代網路構建的前端測試工具，解決了開發人員和 QA 工程師在測試應用程式時面臨的關鍵痛點。

　　在這個測試框架中包含了E2E測試、整合測試和單元測試（內嵌了Mocha），我們需要的是它的E2E測試的能力。

　　官網中包含詳盡的API介面文件，以及多個視訊教程、例項等，只要有耐心，看完文件，上手是不成問題的。

　　之所以要引入E2E測試，主要是為了保證主流程能夠不出錯，尤其是在後期做修修補補後，有一個可靠的方式告訴我們當前頁面是正常的就行。

　　所以，並不會要求E2E的覆蓋率要達到怎樣的一個數字，只是為了保證程式碼的健壯性。

一、安裝和初始化

　　安裝命令如下：

npm install cypress --save-dev

　　下面這個命令會初始化一堆已經寫好的用例：

npx cypress open

　　命令執行完後，就會在根目錄中新增cypress資料夾，其中 fixtures 檔案存放自定義的 json 檔案，integration 檔案存放測試用例，support可以自定義命令。

|-- fixtures

|-- integration

|----- example.spec.js

|-- plugins

|-- support

　　在 integration 中包含 1-getting-started 和 2-advanced-examples 兩個資料夾，這些是內建的用例，可以作為demo檢視。

二、啟動

　　將 cypress open 命令新增到 scripts 中，就能通過 npm run cypress 命令執行E2E測試了。

{

  "scripts": {

    "cypress": "cypress open"

  }

}

　　執行後會出現下面這個介面：

　　點選某個測試用例檔案，就會開啟一個瀏覽器，並顯示測試過程，綠色是正常，紅色是異常，下圖是正常的結果。

三、測試用例

　　下面的用例在模擬登入，首先是通過 visit() 函式請求登入地址。

describe('登入', () => {

  beforeEach(() => {

    cy.visit('http://localhost:8000/login')

  })

  it('賬號和密碼錯誤', () => {

    cy.get('#userName').type(userName);             //讀取ID為userName的控制元件，並賦值

    cy.get('#password').type(pwd + '{enter}');      //讀取ID為password的控制元件，賦值後自動按回車

    cy.contains('測試使用者').should('exist');         //介面中是否包含測試使用者的標籤

  });

});

　　然後通過get()讀取指定選擇器的控制元件，選擇器的語法可參考jQuery，官方提供了眾多的API，例如 wait()、find()、wrap()、log()等，此處只演示了其中的幾個，斷言可參考 chai。

　　cypress的功能非常強大，在應用到實際專案中後，就能慢慢解鎖了。

　　還有一個Testing Library庫，封裝了一些常用的查詢功能，例如根據內容查詢控制元件，有需要的話可以自行安裝。