如何使用 Cypress 測試 Express.js REST API

Cypress 是一個為 JavaScript 應用程式量身定制的流行測試框架。雖然它主要設計用於測試 UI 元件以及與瀏覽器中 UI 元素的交互，但它也非常適合測試 API。您可以使用該框架透過 HTTP 請求測試 RESTful API 並驗證回應。

Cypress 能夠創建廣泛的測試套件，涵蓋 Web 應用程式從啟動到完成的整個操作範圍。

使用 Cypress 開始進行 API 測試

賽普拉斯允許驗證應用程式的程式設計介面 (API)，以確保其按照預期設計運作。作為此過程的一部分，將測試 API 的端點、輸入參數和超文本傳輸協定 (HTTP) 回應。此外，還驗證了與任何外部系統的兼容性，並確認了錯誤處理機制的功能。

透過測試確保 API 的功能、可靠性和應用程式整合的適用性至關重要。及早發現並糾正任何問題將防止在現場環境中出現潛在問題。

Cypress 是一個很棒的 UI 測試工具，被一些流行的 JavaScript 框架使用。它發出和測試 HTTP 請求的能力使其在測試 API 方面同樣有效。

該應用程式利用 Node.js 作為其底層技術來執行 HTTP 請求並有效管理相應的回應。

該專案的原始程式碼可透過其專用的 GitHub 儲存庫存取。

建立 Express.js REST API

要啟動該過程，請建立 Express Web 伺服器作為基礎，並將該套件合併到您的專案框架中。

 npm install cors 

若要將 Cypress 的功能合併到您目前的專案中，您需要執行一系列涉及安裝和設定必要相依性的步驟。此過程包括將 Cypress 軟體包作為資產添加到專案的設定檔或儲存庫中，指定其版本和在系統上的位置，並確保它與應用程式中的其他元件和模組正確整合。完成此操作後，您可以開始使用 Cypress 來自動化和測試軟體開發工作流程的各個方面，包括使用者互動、API 呼叫和網路請求。

 npm install cypress --save-dev 

最後，修改您的 package.json 檔案以合併上述測試腳本。

 "test": "npx cypress open" 

定義 API 控制器

為了在實際場景中演示我們的應用程式的功能，我們將模擬進行 API 呼叫以與資料庫或外部 API 互動的過程。雖然實際實作會涉及此類交互，但為了清楚起見，我們將在本範例的範圍內使用陣列來儲存和檢索使用者資料。

在專案資料夾結構的主目錄中，建立一個「controllers」子目錄，並在其中產生一個「userControllers.js」檔案。在此文件中，合併後續內容。

事實上，讓我們從製作一個

 const users = [];

exports.registerUser = async (req, res) => {
  const { username, password } = req.body;

  try {
    const newUser = { username, password };
    users.push(newUser);
    res.status(201).send({ message: 'User registered successfully' });
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
};

修改現有的 getAllUsers 函數以包含從陣列中檢索使用者資料並以 JSON 回應的形式傳回的附加功能。這個新函數稱為「getUsers」。

 exports.getUsers = async (req, res) => {
  try {
    res.json(users);
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
}; 

總之，可以透過在提供的腳本中合併一段特定的程式碼來執行模擬登入嘗試。此新增的功能允許驗證給定的一組憑證是否與「使用者」陣列中儲存的資訊正確對應。

 exports.loginUser = async (req, res) => {
  const { username, password } = req.body;

  try {
    const user = users.find((u) =>
           u.username === username && u.password === password);

    if (user) {
      res.status(200).send({ message: 'Login successful' });
    } else {
      res.status(401).send({ message: 'Invalid credentials' });
    }
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'An error occurred!!' });
  }
}; 

定義 API 路由

為了為基於 Express 的 RESTful 應用程式建立路由配置，您應該在專案的主目錄中產生一個名為「routes/userRoutes.js」的新穎檔案。該特定文件將包含以下內容:

 const express = require('express');
const router = express.Router();
const userControllers = require('../controllers/userControllers');

const baseURL = '/v1/api/';

router.post(baseURL \+ 'register', userControllers.registerUser);
router.get(baseURL \+ 'users', userControllers.getUsers);
router.post(baseURL \+ 'login', userControllers.loginUser);

module.exports = router; 

更新 Server.js 文件

修改server.js檔案的內容，依照下列規範調整其配置:

 const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

const userRoutes = require('./routes/userRoutes');
app.use('/', userRoutes);

app.listen(port, () => {
  console.log(`Server is listening at http://localhost:${port}`);
});

module.exports = app;

設定測試環境

為了建立演示應用程式介面（API）的測試環境，透過執行上述終端指令開始開發伺服器的初始化。

 node server.js 

接下來，使用另一個終端機視窗或控制台中的「test」可執行檔執行測試腳本:

 npm run test 

該指令的執行將啟動賽普拉斯桌面應用程式的部署，該應用程式充當評估平台。成功安裝後，導航至“E2E 測試”標籤並透過點擊指定按鈕來啟動它。端對端評估包括整個 Express API 的全面評估，包括 Web 伺服器、路由配置和相關控制器功能模組。

請按一下「繼續」以合併賽普拉斯設定檔。

成功完成初始設定程序後，使用者應該觀察專案中是否有新建立的 Cypress 目錄。此外，Cypress 會自動產生一個 cypress.config.js 文件，其中包含測試套件的設定參數。

請隨意修改本文檔，透過以下方式合併您的伺服器的基底位址:

 const { defineConfig } = require("cypress");

module.exports = defineConfig({
  chromeWebSecurity: false,
  e2e: {
    baseUrl: 'http://localhost:5000',
    setupNodeEvents(on, config) {
     },
  },
}); 

撰寫測試案例

若要開始使用 Cypress 編寫測試案例，請先從 Cypress 介面中的可用選項中選擇所需的 Web 瀏覽器進行測試。

按一下「建立新規格」按鈕後，請為您的測試案例提供標題，然後按一下「建立規格」選項。

請透過合併提供的使用者憑證來編輯「cypress/fixtures/example.json」檔案的內容。夾具檔案用作可在測試套件中使用的固定測試資料的儲存庫。

 {
  "username": "testuser",
  "password": "password123"
} 

Cypress 提供了一種透過其內建的「cy.request」命令執行 HTTP 請求的通用方法。此功能使開發人員能夠與各種類型的 HTTP 端點進行交互，處理不同的功能，例如 GET、POST、PUT 和 DELETE。

為了驗證先前實作的三個 API 端點的功能，我們必須開始為註冊過程製定測試場景。此測試場景的主要目標是透過有效建立新使用者帳戶並驗證相關斷言來確認端點按預期運行。

請開啟「cypress/e2e/user.routes.spec.cy.js」檔案並將其現有內容替換為下方提供的程式碼片段:javascriptdescribe(‘User Routes’, ()=> {it(‘should have aproperty行動裝置上的導覽列’, (done)=> {cy.visit(’/’)cy.get(’#app-title’).should(‘have.text’,‘我的網站’);cy.get (’.burger’).click();cy.get(’#menu-toggle’).should(‘be.visible’);cy.get(’#profile-btn’).click({force: true });cy.url().should(‘include’,’/dashboard’);cy.get(’#nav-links li:nth-child(1) a’).

 describe('User Routes', () => {
  it('registers a new user', () => {
     cy.fixture('example').then((testUser) => {
       cy.request({
        method: 'POST',
        url: `${baseUrl}/v1/api/register`,
         body: testUser,
       }).then((response) => {
         expect(response.status).to.eq(201);
         expect(response.body.message).to.eq('User registered successfully');
      });
    });
  }); 

在執行此評估期間，賽普拉斯應利用夾具檔案中提供的資訊產生一系列針對指定端點的 POST 請求，並附有請求正文中包含的詳細資訊。如果每個斷言都被驗證為準確，則測試實例應被視為成功並被視為通過。相反，如果任何斷言未能滿足既定標準，則整個測試案例將被視為不成功並標記為失敗。

Cypress 測試的結構使用類似於 Mocha 測試所使用的語法，因為 Cypress 整合了該測試框架。

為了驗證「使用者」端點在所述位置接收到請求時產生的回應是否會產生相關的使用者訊息，必須在包含的「描述」測試套件中納入以下措施。

   it('gets users data and the username matches test data', () => {
    cy.fixture('example').then((expectedUserData) => {
      cy.request({
        method: 'GET',
        url: `${baseUrl}/v1/api/users`,
      }).then((response) => {
        expect(response.status).to.eq(200);
        const username = response.body[0].username;
        expect(username).to.eq(expectedUserData.username);
      });
    });
  }); 

最後，合併一個測試場景來評估登入端點並斷言 HTTP 回應狀態為 200，這表示登入嘗試成功。

   it('logs in a user', () => {
     cy.fixture('example').then((loginData) => {
      cy.request({
        method: 'POST',
        url: `${baseUrl}/v1/api/login`,
         body: loginData,
       }).then((response) => {
        expect(response.status).to.eq(200);
      });
    });
  });
}); 

要執行測試，請導航回賽普拉斯正在監控的 Web 應用程序，然後從可用腳本中選擇您想要執行的特定測試腳本。

賽普拉斯測試運行程序的執行應導致對每個單獨測試案例的結果進行測試和記錄，顯示它們是通過還是失敗。

為了全面評估 API 的性能和可靠性，至關重要的是擴大測試範圍，而不僅僅是檢查其功能方面。透過探索應用程式介面與處理請求或回應所涉及的其他元件之間的額外互動層，可以對系統的整體效率和有效性進行更全面的評估。

全面的 API 測試方法不僅涵蓋功能，還涵蓋效能、可擴展性以及與外部系統的整合等方面。為此，在測試策略中納入各種測試方法對於實現詳盡的測試覆蓋範圍並確保應用程式 API 在實際環境中部署之前的可靠性和穩定性至關重要。

使用 Cypress 測試您的整個 Web 體驗

Cypress 是輕鬆評估基於 Web 的應用程式的卓越資源，包括對使用者介面和伺服器端元件的全面評估。

利用我們直覺的測試工具可以在單一平台內輕鬆創建全面的測試環境。這樣可以對軟體的各個方面進行廣泛的評估，確保最佳的功能和卓越的性能。