يتوافق الاختبار الصارم مع العالم الحقيقي من خلال محاكاة اختبارات المستخدم الشاملة.

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

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

البدء بالاختبار الشامل باستخدام Cypress

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

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

شجرة السرو هو إطار عمل رائع لاختبار الأتمتة ومتوافق مع بعض

instagram viewer
أطر جافا سكريبت الأكثر شعبية. إن قدرته على إجراء الاختبارات مباشرة في المتصفح ومجموعة ميزات الاختبار الشاملة تجعل الاختبار سلسًا وفعالًا. كما أنه يدعم أساليب الاختبار المختلفة بما في ذلك:

  • اختبارات الوحدة
  • اختبارات نهاية إلى نهاية
  • اختبارات التكامل

لكتابة اختبارات شاملة لتطبيق React، خذ بعين الاعتبار قصص المستخدمين هذه:

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

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

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

قم بإعداد مشروع رد الفعل

للبدء، إنشاء مشروع React باستخدام Vite أو استخدم أمر create-react-app لإعداد تطبيق React أساسي. بمجرد اكتمال عملية التثبيت، تابع وتثبيت حزمة Cypress باعتبارها تابعة للمطور في مشروعك:

npm install cypress --save-dev

الآن، قم بتحديث جهازك package.json الملف عن طريق إضافة هذا البرنامج النصي:

"test": "npx cypress open"

إنشاء مكون وظيفي

في ال src الدليل، قم بإنشاء مجلد وتسميته عناصر. داخل هذا المجلد، أضف ملفًا جديدًا Products.jsx الملف، وقم بتضمين الكود أدناه.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (


"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>




Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

ضمن المكون الوظيفي، حدد أ useEffect الخطاف، الذي ينفذ وظيفة غير متزامنة تجلب بيانات المنتج بناءً على استعلام البحث المقدم.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

قم بتحديث ملف App.jsx

الآن، قم بتحديث App.jsx الملف بالكود التالي:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');


const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }


return (




Cypress Testing Library tutorial</h1>






exportdefault App

المضي قدما وبدء تشغيل خادم التطوير.

npm run dev

عظيم! يجب أن تكون قادرًا على جلب بيانات منتج محددة من واجهة JSON API الوهمية.

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

أولاً، قم بتشغيل أمر البرنامج النصي للاختبار على جهازك الطرفي:

npm run test

سيؤدي هذا الأمر إلى تشغيل عميل Cypress وفتحه. المضي قدما وانقر فوق اختبار E2E زر.

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

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

كتابة اختبارات شاملة باستخدام السرو

لكتابة الاختبار الأول، يتعين عليك تحديد المتصفح الذي سيتم تشغيل الاختبار فيه. حدد الخيار المفضل لديك من الخيارات المتاحة في عميل Cypress.

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

حدد إنشاء مواصفات جديدة خيار لإنشاء ملف الاختبار الخاص بك.

توجه إلى محرر التعليمات البرمجية الخاص بك، وافتح ملف السرو/e2e/App.spec.cy.js file، وقم بتحديث محتويات هذا الملف بالكود التالي.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

بالعودة إلى قصص المستخدمين الموضحة أعلاه، تتحقق مجموعة الاختبار المحددة هذه من جانبين:

  • أن يعرض المتصفح حقل إدخال وزر إرسال على الصفحة.
  • أنه يمكن استخدام إدخال استعلام البحث.

مثل أدوات اختبار JavaScript الأخرى مثل Jest وSupertest، تستخدم Cypress بناء جملة ولغة تعريفية لتحديد حالات الاختبار.

لإجراء الاختبار، ارجع إلى إصدار المتصفح المبسط الذي تديره Cypress واختر ملف الاختبار المحدد الذي ترغب في تشغيله.

سيقوم Cypress بإجراء الاختبارات وعرض النتائج في اللوحة اليسرى لملعب الاختبار.

محاكاة عمليات التطبيق

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

للتوضيح، يمكنك إنشاء ملف اختبار جديد لاستيعاب مجموعة اختبار مختلفة داخل الملف e2e مجلد. وبدلاً من ذلك، يمكنك أيضًا اختيار تضمين جميع مجموعات الاختبار التي تستكشف حالة اختبار معينة في ملف اختبار واحد.

المضي قدما وإنشاء جديد Products.spec.cy.js الملف في e2e مجلد. داخل هذا الملف، قم بتضمين الكود التالي.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

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

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

محاكاة الأخطاء والاستجابات

يمكنك أيضًا محاكاة سيناريوهات الخطأ والاستجابات المختلفة ضمن اختبارات Cypress.

إنشاء جديد Error.spec.cy.js الملف في e2e الدليل ويتضمن الكود التالي.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');


const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();


 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

تتحقق مجموعة الاختبار هذه من ظهور رسالة خطأ عندما يقوم المستخدم بإدخال استعلام بحث غير صحيح.

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

تشير هذه النتيجة إلى أن آلية معالجة الأخطاء تعمل كما هو متوقع.

استخدام السرو في التطوير القائم على الاختبار

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

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