市面上有許多E2E框架，我選擇了[Cypress](https://www.cypress.io/)，它是為現代網絡構建的前端測試工具，解決了開發人員和 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](https://docs.cypress.io/guides/references/assertions#Chai)。   cypress的功能非常強大，在應用到實際項目中后，就能慢慢解鎖了。   還有一個[Testing Library](https://testing-library.com/)庫，封裝了一些常用的查詢功能，例如根據內容查詢控件，有需要的話可以自行安裝。 ***** > 原文出處： [博客園-Node.js躬行記](https://www.cnblogs.com/strick/category/1688575.html) [知乎專欄-Node.js躬行記](https://zhuanlan.zhihu.com/pwnode) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。