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