كيفية اختبار واجهات برمجة التطبيقات Express.js REST باستخدام Cypress

يعد Cypress إطار اختبار شائعًا مصممًا لتطبيقات JavaScript. على الرغم من أنه مصمم بشكل أساسي لاختبار مكونات واجهة المستخدم والتفاعلات مع عناصر واجهة المستخدم في المتصفح، إلا أنه كذلك مناسب تمامًا لاختبار واجهات برمجة التطبيقات. يمكنك استخدام إطار العمل لاختبار واجهات برمجة تطبيقات RESTful عبر طلبات HTTP والتحقق من صحة استجابات.

يتيح لك Cypress كتابة اختبارات شاملة تغطي النطاق الكامل لسير عمل تطبيق الويب الخاص بك.

البدء في اختبار واجهة برمجة التطبيقات (API) باستخدام Cypress

يساعدك Cypress على التحقق من أن واجهات برمجة التطبيقات الخاصة بك تعمل كما تتوقعها. تتضمن هذه العملية عادةً اختبار نقاط نهاية واجهة برمجة التطبيقات وبيانات الإدخال واستجابات HTTP. يمكنك التحقق من التكامل مع أي خدمات خارجية، والتأكد من أن آليات معالجة الأخطاء تعمل بشكل صحيح.

يضمن اختبار واجهات برمجة التطبيقات الخاصة بك أنها فعالة وموثوقة وتلبي احتياجات التطبيقات التي تعتمد عليها. فهو يساعد على تحديد الأخطاء وإصلاحها في وقت مبكر، مما يمنع حدوث المشكلات في الإنتاج.

شجرة السرو هي أداة رائعة لاختبار واجهة المستخدم، يستخدمها بعض الأشخاص أطر عمل جافا سكريبت الشائعة. إن قدرته على إنشاء واختبار طلبات HTTP تجعله فعالاً بنفس القدر في اختبار واجهات برمجة التطبيقات.

يقوم بذلك عن طريق استخدام Node.js كمحركه لتقديم طلبات HTTP والتعامل مع استجاباتها.

يمكنك العثور على رمز هذا المشروع في ملف جيثب مخزن.

قم بإنشاء Express.js REST API

للبدء، إنشاء خادم ويب سريع، وقم بتثبيت هذه الحزمة في مشروعك:

npm install cors

بعد ذلك، أضف حزمة Cypress إلى مشروعك:

npm install cypress --save-dev

وأخيرا، قم بتحديث الخاص بك package.json ملف لتضمين البرنامج النصي للاختبار هذا:

"test": "npx cypress open"

تحديد وحدات تحكم API

في حالة العالم الحقيقي، يمكنك إجراء استدعاءات واجهة برمجة التطبيقات (API) لقراءة البيانات وكتابتها من قاعدة بيانات أو واجهة برمجة تطبيقات خارجية. ومع ذلك، في هذا المثال، ستقوم بمحاكاة واختبار استدعاءات واجهة برمجة التطبيقات (API) عن طريق إضافة بيانات المستخدم وجلبها من مصفوفة.

في الدليل الجذر لمجلد المشروع الخاص بك، قم بإنشاء ملف وحدات التحكم/userControllers.js الملف وأضف الكود التالي

أولا تعريف أ تسجيل المستخدم وظيفة التحكم التي ستدير مسار تسجيل المستخدم. سيقوم باستخراج بيانات المستخدم من نص الطلب وإنشاء كائن مستخدم جديد وإضافته إلى ملف المستخدمين مجموعة مصفوفة. إذا نجحت العملية، فيجب أن تستجيب برمز الحالة 201 ورسالة تشير إلى أنها قامت بتسجيل المستخدم.

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!!' });
 }
};

إضافة وظيفة ثانية —getUsers- لاسترداد بيانات المستخدم من المصفوفة وإعادتها كاستجابة JSON.

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 REST API، قم بإنشاء ملف الطرق/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 ملف لتكوين API على النحو التالي:

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;

قم بإعداد بيئة الاختبار

مع وجود واجهة برمجة التطبيقات التجريبية، أنت جاهز لإعداد بيئة الاختبار. ابدأ تشغيل خادم التطوير باستخدام هذا الأمر الطرفي:

node server.js

بعد ذلك، قم بتشغيل أمر البرنامج النصي للاختبار في محطة منفصلة:

npm run test

سيؤدي هذا الأمر إلى تشغيل عميل Cypress لسطح المكتب، والذي يوفر بيئة الاختبار. بمجرد فتحه، انقر فوق اختبار E2E زر. تضمن الاختبارات الشاملة اختبار Express API ككل، مما يعني أن Cypress سيكون لها حق الوصول إلى خادم الويب والمسارات ووظائف وحدة التحكم المرتبطة بها.

التالي، انقر فوق يكمل لإضافة ملفات التكوين السرو.

بمجرد اكتمال عملية الإعداد، من المفترض أن ترى مجلد Cypress جديدًا في مشروعك. سيضيف السرو أيضًا أ cypress.config.js الملف الذي يحتوي على إعدادات التكوين للاختبارات الخاصة بك.

تابع وقم بتحديث هذا الملف ليشمل عنوان URL الأساسي لخادمك كما يلي:

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

كتابة حالات الاختبار

أنت الآن جاهز لكتابة بعض حالات الاختبار. أولاً، حدد المتصفح الذي سيتم تشغيل Cypress فيه لإجراء الاختبارات من الخيارات المتاحة على عميل Cypress.

التالي، انقر فوق إنشاء مواصفات جديدة لإنشاء ملف الاختبار الخاص بك، وتوفير اسم. ثم اضغط إنشاء المواصفات.

الآن، افتح السرو/fixtures/example.json الملف، وقم بتحديث محتوياته باستخدام بيانات اعتماد المستخدم التالية. المباريات هي ملفات تحتوي على بيانات اختبار ثابتة يمكنك استخدامها في حالات الاختبار.

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

يوفر السرو أ cy.request طريقة لتقديم طلبات HTTP إلى خادم الويب. يمكنك استخدامه لاختبار أنواع مختلفة من نقاط نهاية HTTP التي تدير عمليات مختلفة بما في ذلك GET وPOST وPUT وDELETE.

لاختبار مسارات واجهة برمجة التطبيقات الثلاثة التي حددتها مسبقًا، ابدأ بوصف حالة الاختبار لنقطة نهاية التسجيل. يجب أن تتحقق حالة الاختبار هذه من أن نقطة النهاية تعمل بشكل صحيح عن طريق تسجيل مستخدم جديد بنجاح والتحقق من صحة التأكيدات.

افتح ال cypress/e2e/user.routes.spec.cy.js الملف وتحديث محتوياته بالكود التالي.

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);
 });
 });
 });

وأخيرًا، قم بتضمين حالة اختبار ستختبر نقطة نهاية تسجيل الدخول وتؤكد أن حالة الاستجابة هي 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 بتشغيل الاختبارات وتسجيل نتائجها، موضحًا حالة النجاح أو الفشل لكل حالة اختبار.

توضح الأمثلة أعلاه كيف يمكنك اختبار المسارات المختلفة ووظائف وحدة التحكم المقابلة لها للتأكد من وظائفها وسلوكها المتوقع. على الرغم من أنه من الضروري اختبار وظائف واجهات برمجة التطبيقات (APIs)، إلا أنه يجب ألا تقصر نطاق الاختبار على هذا الجانب فقط.

يجب أن تتضمن إستراتيجية اختبار واجهة برمجة التطبيقات الشاملة أيضًا اختبارات الأداء والتحميل والتكامل مع الخدمات الأخرى. عن طريق شمل أنواع مختلفة من طرق الاختبار في استراتيجيتك، يمكنك تحقيق تغطية اختبارية شاملة والتأكد من أن واجهات برمجة التطبيقات الخاصة بك فعالة وموثوقة قبل نشر التعليمات البرمجية الخاصة بك إلى الإنتاج.

اختبار تجربة الويب بالكامل باستخدام Cypress

تعد Cypress أداة رائعة لاختبار تطبيقات الويب، حيث تغطي الاختبارات بسلاسة لكل من الواجهة الأمامية والخلفية.

بفضل ميزات الاختبار سهلة الاستخدام، يمكنك إعداد بيئة اختبار بسهولة وسرعة، كل ذلك في نظام أساسي واحد. يمكنك بعد ذلك استخدامه لاختبار الجوانب المختلفة لتطبيقك بشكل شامل وضمان الأداء المتميز.