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庫，封裝了一些常用的查詢功能，例如根據內容查詢控件，有需要的話可以自行安裝。