วิธีทดสอบ Express.js REST API โดยใช้ Cypress

Cypress เป็นเฟรมเวิร์กการทดสอบยอดนิยมที่ออกแบบมาสำหรับแอปพลิเคชัน JavaScript แม้ว่าจะได้รับการออกแบบมาเพื่อทดสอบส่วนประกอบ UI และการโต้ตอบกับองค์ประกอบ UI ในเบราว์เซอร์เป็นหลัก แต่ก็ยังเหมาะสำหรับการทดสอบ API อีกด้วย คุณสามารถใช้เฟรมเวิร์กเพื่อทดสอบ RESTful API ผ่านคำขอ HTTP และตรวจสอบการตอบสนอง

Cypress ช่วยให้สามารถสร้างชุดทดสอบที่ครอบคลุมครอบคลุมช่วงการดำเนินงานของเว็บแอปพลิเคชันทั้งหมดตั้งแต่เริ่มต้นจนถึงเสร็จสมบูรณ์

เริ่มต้นใช้งานการทดสอบ API โดยใช้ Cypress

Cypress ช่วยให้สามารถตรวจสอบความถูกต้องของอินเทอร์เฟซการเขียนโปรแกรม (API) ของแอปพลิเคชันเพื่อให้แน่ใจว่าทำงานตามการออกแบบที่ตั้งใจไว้ ในส่วนหนึ่งของกระบวนการนี้ จุดสิ้นสุดของ API พารามิเตอร์อินพุต และการตอบกลับ Hypertext Transfer Protocol (HTTP) จะได้รับการทดสอบ นอกจากนี้ ยังมีการตรวจสอบความเข้ากันได้กับระบบภายนอกใดๆ และฟังก์ชันการทำงานของกลไกการจัดการข้อผิดพลาดได้รับการยืนยันแล้ว

การรับรองฟังก์ชันการทำงาน ความน่าเชื่อถือ และความเหมาะสมสำหรับการผสานรวมแอปพลิเคชันของ API ของคุณผ่านการทดสอบถือเป็นสิ่งสำคัญยิ่ง การระบุและแก้ไขปัญหาใดๆ ก่อนกำหนดจะป้องกันไม่ให้ปัญหาที่อาจเกิดขึ้นเกิดขึ้นในสภาพแวดล้อมจริง

Cypress เป็นเครื่องมือทดสอบ UI ที่ยอดเยี่ยม ซึ่งใช้โดยเฟรมเวิร์ก JavaScript ยอดนิยมบางตัว ความสามารถในการสร้างและทดสอบคำขอ HTTP ทำให้มีประสิทธิภาพเท่าเทียมกันในการทดสอบ API

แอปพลิเคชันใช้ประโยชน์จาก Node.js ซึ่งเป็นเทคโนโลยีพื้นฐานในการดำเนินการคำขอ HTTP และจัดการการตอบสนองที่เกี่ยวข้องอย่างมีประสิทธิภาพ

ซอร์สโค้ดสำหรับโปรเจ็กต์นี้สามารถเข้าถึงได้ผ่านพื้นที่เก็บข้อมูล GitHub เฉพาะ

สร้าง Express.js REST API

ในการเริ่มต้นกระบวนการ ให้สร้างเว็บเซิร์ฟเวอร์ Express เป็นพื้นฐาน และรวมแพ็คเกจนี้ไว้ในกรอบงานของโปรเจ็กต์ของคุณ

 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

เพื่อสร้างการกำหนดค่าการกำหนดเส้นทางสำหรับแอปพลิเคชัน RESTful ที่ใช้ Express คุณควรสร้างไฟล์ใหม่ชื่อ “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;

ตั้งค่าสภาพแวดล้อมการทดสอบ

เพื่อสร้างสภาพแวดล้อมการทดสอบสำหรับการสาธิต Application Programming Interface (API) ให้เริ่มการเริ่มต้นเซิร์ฟเวอร์การพัฒนาโดยดำเนินการคำสั่งเทอร์มินัลที่กล่าวมาข้างต้น

 node server.js 

จากนั้น รันสคริปต์ทดสอบโดยใช้ไฟล์เรียกทำงาน"test"จากภายในหน้าต่างเทอร์มินัลหรือคอนโซลอื่น:

 npm run test 

การดำเนินการตามคำสั่งนี้จะเริ่มต้นการใช้งานแอปพลิเคชันเดสก์ท็อป Cypress ซึ่งทำหน้าที่เป็นแพลตฟอร์มประเมินผล เมื่อติดตั้งสำเร็จ ให้ไปที่แท็บ"การทดสอบ E2E"และเปิดใช้งานโดยคลิกที่ปุ่มที่กำหนด การประเมินแบบ end-to-end ครอบคลุมการประเมินที่ครอบคลุมของ Express API ทั้งหมด รวมถึงเว็บเซิร์ฟเวอร์ การกำหนดค่าเส้นทาง และโมดูลฟังก์ชันตัวควบคุมที่เกี่ยวข้อง

โปรดดำเนินการต่อโดยคลิกที่"ดำเนินการต่อ"เพื่อรวมไฟล์การกำหนดค่า Cypress

เมื่อเสร็จสิ้นขั้นตอนการตั้งค่าเริ่มต้นแล้ว ผู้ใช้ควรสังเกตการมีอยู่ของไดเร็กทอรี Cypress ที่สร้างขึ้นใหม่ภายในโปรเจ็กต์ของตน นอกจากนี้ Cypress จะสร้างไฟล์ cypress.config.js ที่ครอบคลุมพารามิเตอร์การกำหนดค่าของชุดทดสอบโดยอัตโนมัติ

คุณสามารถแก้ไขเอกสารนี้ได้โดยการรวมที่อยู่ฐานของเซิร์ฟเวอร์ของคุณไว้ในลักษณะต่อไปนี้:

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

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

เขียนกรณีทดสอบ

หากต้องการเริ่มเขียนกรณีทดสอบโดยใช้ Cypress ให้เริ่มต้นด้วยการเลือกเว็บเบราว์เซอร์ที่ต้องการสำหรับการทดสอบจากตัวเลือกที่มีให้ภายในอินเทอร์เฟซ Cypress

เมื่อคลิกที่ปุ่ม"สร้างข้อมูลจำเพาะใหม่"โปรดระบุชื่อสำหรับกรณีทดสอบของคุณ ตามด้วยการคลิกที่ตัวเลือก"สร้างข้อมูลจำเพาะ"

โปรดแก้ไขเนื้อหาของไฟล์ “cypress/fixtures/example.json” โดยรวมข้อมูลรับรองผู้ใช้ที่ให้ไว้ ไฟล์ฟิกซ์เจอร์ทำหน้าที่เป็นที่เก็บข้อมูลการทดสอบแบบอยู่กับที่ซึ่งสามารถนำไปใช้ภายในชุดทดสอบได้

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

Cypress นำเสนอแนวทางที่หลากหลายสำหรับการดำเนินการคำขอ HTTP ผ่านคำสั่ง cy.request ในตัว คุณลักษณะนี้ช่วยให้นักพัฒนาโต้ตอบกับตำแหน่งข้อมูล HTTP ประเภทต่างๆ ที่จัดการฟังก์ชันการทำงานที่หลากหลาย เช่น GET, POST, PUT และ DELETE

เพื่อตรวจสอบการทำงานของจุดสิ้นสุด API ที่ใช้งานก่อนหน้านี้ทั้งสามจุด เราต้องเริ่มต้นด้วยการกำหนดสถานการณ์ทดสอบสำหรับกระบวนการลงทะเบียน วัตถุประสงค์หลักของสถานการณ์การทดสอบนี้คือเพื่อยืนยันว่าจุดสิ้นสุดทำงานตามที่ตั้งใจไว้โดยการสร้างบัญชีผู้ใช้ใหม่อย่างมีประสิทธิภาพและตรวจสอบการยืนยันที่เกี่ยวข้อง

โปรดเปิดไฟล์ “cypress/e2e/user.routes.spec.cy.js” และแทนที่เนื้อหาที่มีอยู่ด้วยข้อมูลโค้ดที่ให้มาด้านล่าง:javascriptdescribe(‘User Routes’, ()=> {it(‘should have a suitable) แถบนำทางบนอุปกรณ์มือถือ’, (เสร็จสิ้น)=> {cy.visit(’/’)cy.get(’#app-title’).should(‘have.text’,‘My Website’);cy.get (’.burger’).click();cy.get(’#menu-toggle’).should(‘be.visible’);cy.get(’#profile-btn’).click({ บังคับ: จริง });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');
      });
    });
  }); 

ในระหว่างการดำเนินการประเมินนี้ Cypress จะใช้ข้อมูลที่ให้ไว้ในไฟล์ฟิกซ์เจอร์เพื่อสร้างชุดคำขอ 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);
      });
    });
  });
}); 

หากต้องการดำเนินการทดสอบ ให้กลับไปที่เว็บแอปพลิเคชันที่กำลังตรวจสอบโดย Cypress และเลือกสคริปต์ทดสอบที่คุณต้องการดำเนินการจากที่มีอยู่

การดำเนินการทดสอบ Cypress จะต้องส่งผลให้มีการทดสอบและจัดทำเอกสารผลลัพธ์สำหรับกรณีทดสอบแต่ละกรณี โดยแสดงให้เห็นว่าผ่านหรือไม่ผ่าน

เพื่อประเมินประสิทธิภาพและความน่าเชื่อถือของ API อย่างครอบคลุม การขยายขอบเขตการทดสอบนอกเหนือจากการตรวจสอบลักษณะการทำงานของ API เป็นสิ่งสำคัญ ด้วยการสำรวจการโต้ตอบเพิ่มเติมระหว่างอินเทอร์เฟซการเขียนโปรแกรมแอปพลิเคชันและส่วนประกอบอื่น ๆ ที่เกี่ยวข้องกับการประมวลผลคำขอหรือการตอบกลับ การประเมินประสิทธิภาพและประสิทธิผลโดยรวมของระบบที่ครอบคลุมมากขึ้นสามารถทำได้

แนวทางการทดสอบ API ที่รอบรู้ไม่เพียงแต่ครอบคลุมฟังก์ชันการทำงานเท่านั้น แต่ยังรวมไปถึงแง่มุมต่างๆ เช่น ประสิทธิภาพ ความสามารถในการปรับขนาด และการผสานรวมกับระบบภายนอก ด้วยเหตุนี้ การผสมผสานวิธีการทดสอบที่หลากหลายไว้ในกลยุทธ์การทดสอบของคุณจึงเป็นสิ่งจำเป็นสำหรับการบรรลุผลการทดสอบที่ครอบคลุมครบถ้วน และรับประกันความน่าเชื่อถือและความเสถียรของ API ของแอปพลิเคชันของคุณก่อนที่จะปรับใช้ในสภาพแวดล้อมจริง

ทดสอบประสบการณ์เว็บทั้งหมดของคุณโดยใช้ Cypress

Cypress เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับการประเมินแอปพลิเคชันบนเว็บได้อย่างง่ายดาย ครอบคลุมการประเมินที่ครอบคลุมทั้งส่วนต่อประสานผู้ใช้และส่วนประกอบฝั่งเซิร์ฟเวอร์

การใช้เครื่องมือทดสอบที่ใช้งานง่ายของเราช่วยให้สร้างสภาพแวดล้อมการทดสอบที่ครอบคลุมภายในแพลตฟอร์มเดียวได้อย่างง่ายดาย ช่วยให้สามารถประเมินแง่มุมต่างๆ ของซอฟต์แวร์ของคุณได้อย่างกว้างขวาง เพื่อให้มั่นใจถึงฟังก์ชันการทำงานที่เหมาะสมที่สุดและประสิทธิภาพที่ยอดเยี่ยม