最近在研究如何提升項目質量，提煉了許多個用于自測的測試用例，但是每次修改后，都手工測試，成本太高，于是就想到了自動化測試。   在[一年前](https://www.cnblogs.com/strick/p/15247568.html)已將[Cypress](https://docs.cypress.io/api/commands/and)集成到管理后臺的項目中，不過沒有投入到實踐中。今天在實踐時發現，版本已經到了 12.X，當時集成的版本是 8.X。 ## 一、準備   在重新安裝后，將之前的目錄直接刪除，運行命令后。 ~~~ npx cypress open ~~~ **1）目錄**   又會在根目錄自動生成新文件，測試用例都會寫在 e2e 目錄中。 ~~~ |-- downloads |-- e2e |----- example.spec.js |-- fixtures |-- support ~~~   將 cypress open 命令添加到 scripts 中，就能通過 npm run cypress 命令執行E2E測試了。 ~~~ { "scripts": { "cypress": "cypress open" } } ~~~ **2）啟動**   在剛啟動時，會先讓你選擇一款瀏覽器，我選擇了 Chrome。 :-:    然后就會自動打開瀏覽器，右邊的控制臺我自己打開的，用于查看通信和打印信息。 :-:    中間有許多自動生成的 demo spec，初學者可以作為參考。   在點擊某一個 spec 文件后，就會進入測試頁面，左側是可以回溯的測試過程和結果，中間是在執行的界面。   若測試不通過，會有醒目的紅色錯誤提示。 :-:  ## 二、實踐   本次實踐的測試對象是一個管理后臺，管理后臺是需要登錄的，肯定不能在每一個測試用例都要重復登錄的操作。   況且，我們的后臺會限制登錄次數，若登錄太多，就會禁用賬號。 **1）登錄**   思前想后，決定直接存儲登錄后的鑒權信息，我們在登錄后，會將此信息存儲到 localStorage 中。   此時需要考慮一個問題，那就我團隊中每個人的登錄賬號是不同的，如何存儲這些信息。   閱讀官方文檔后，發現可以將配置信息放在 fixtures 目錄中，創建 config.json 文件，內容如下。 ~~~ { "name": "xxx@xxx.me", "pwd": "yyy2023", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9", "authorities": "*" } ~~~   config.json 文件會被版本忽略，所以文件即使被修改，也不會提交到版本庫中。   然后將存儲的功能封裝成一條命令，這樣在各個測試用例中調用會比較簡潔。 ~~~ Cypress.Commands.add('saveToken', () => { cy.fixture('config.json').then((config) => { const { token, authorities } = config; localStorage.setItem('token', token); localStorage.setItem('authorities', authorities); }); }); ~~~   在 beforeEach() 方法中只需執行 cy.saveToken() 就能保持登錄態。 ~~~ describe('短鏈服務', () => { beforeEach(() => { cy.saveToken(); // 保持登錄態 cy.visit('/operate/shortChain');// 跳轉頁面 }); }); ~~~ **2）測試**   在解決登錄態后，就開始正式的測試。   Cypress 的斷言集成了[Chai](https://docs.cypress.io/guides/references/assertions#Chai)，并且擴展了[Sinon](https://docs.cypress.io/guides/references/assertions#Sinon-Chai)和[jQuery](https://docs.cypress.io/guides/references/assertions#Chai-jQuery)，也就是說，可以在框架內使用它們提供的功能。   下圖是需要測試的短鏈服務界面，接下來會測試新建、更新、查詢、分頁和刪除。 :-:    點擊新建，會有一個彈框，在彈框中有一個表單。 :-:    cy.[get()](https://docs.cypress.io/api/commands/get)用于查找元素，其參數可以是一個 CSS 選擇器字符串，官方文檔有專門一欄介紹查詢方法。   cy.[type()](https://docs.cypress.io/api/commands/type)用于填寫文本框，官方還提供了點擊、雙擊、上傳文件等功能。scrollBehavior: false 是為了禁止移動滾動條。   頁面截圖需要上傳，測試用的圖像保存在 fixtures 目錄中，cy.[fixture()](https://docs.cypress.io/api/commands/fixture)可以讀取此目錄中的文件。   cy.[selectFile()](https://docs.cypress.io/api/commands/selectfile)用于上傳文件，demo 加了個 @ 符號，不加就無法獲取到文件。 ~~~ it('存儲', () => { // 定位到新建按鈕 cy.get('.ant-btn').first().click(); cy.wait(500); // 在填寫表單控件時禁用滾動 cy.get('.ant-modal #url').type(`http://www.xxx.com/test${random()}.html`, { scrollBehavior: false }); cy.get('.ant-modal #remark').type('測試', { scrollBehavior: false }); // 上傳圖像，圖像存儲在 fixtures 目錄內 cy.fixture('demo.png', { encoding: null }).as('demo'); cy.get('input[type=file]').selectFile('@demo', { force: true }); cy.wait(1000); // 存儲 cy.get('.ant-modal .ant-btn-primary').click(); cy.get('.ant-modal').should('not.exist'); // 斷言存儲流程是否正常 cy.scrollTo(0, 0); cy.wait(2000); }); ~~~   cy.[wait()](https://docs.cypress.io/api/commands/wait)就是等待，因為自動操作速度很快，有時候需要停頓下，用肉眼觀察下結果。   cy.[should()](https://docs.cypress.io/api/commands/should)用于創建斷言，這與之前的 expect() 斷言稍有不同，其參數就是斷言結果，關鍵字可以參考 Chai 的斷言方法。   Cypress 提供了眾多的 API，還有很大的挖掘空間，并且提供了豐富的 demo，學習起來也比較方便。 ***** > 原文出處： [博客園-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 等。