最近在研究如何提升項目質量，提煉了許多個用於自測的測試用例，但是每次修改後，都手工測試，成本太高，於是就想到了自動化測試。
在一年前已將 Cypress 集成到管理後臺的項目中，不過沒有投入到實踐中。今天在實踐時發現，版本已經到了 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": "[email protected]", "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，並且擴展了 Sinon 和 jQuery，也就是說，可以在框架內使用它們提供的功能。
下圖是需要測試的短鏈服務界面，接下來會測試新建、更新、查詢、分頁和刪除。
點擊新建，會有一個彈框，在彈框中有一個表單。
cy.get() 用於查找元素，其參數可以是一個 CSS 選擇器字符串，官方文檔有專門一欄介紹查詢方法。
cy.type() 用於填寫文本框，官方還提供了點擊、雙擊、上傳文件等功能。scrollBehavior: false 是爲了禁止移動滾動條。
頁面截圖需要上傳，測試用的圖像保存在 fixtures 目錄中，cy.fixture() 可以讀取此目錄中的文件。
cy.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() 就是等待，因爲自動操作速度很快，有時候需要停頓下，用肉眼觀察下結果。
cy.should() 用於創建斷言，這與之前的 expect() 斷言稍有不同，其參數就是斷言結果，關鍵字可以參考 Chai 的斷言方法。
Cypress 提供了衆多的 API，還有很大的挖掘空間，並且提供了豐富的 demo，學習起來也比較方便。