בדיקות קפדניות פוגשות את העולם האמיתי עם מבחני משתמש מדומים מקצה לקצה.

פיתוח חזית כרוך בבניית אפליקציות מושכות ויזואלית ופונקציונליות הפונות ללקוח. אבל יש מלכוד; יישומים אלה חייבים להבטיח שלמשתמשים תהיה חוויה חלקה.

בעוד שמבחני יחידה ואינטגרציה חיוניים לאימות הפונקציונליות של יישום, ייתכן שהם לא יתפוסו לחלוטין אינטראקציות משתמש טיפוסיות. כדי לדמות באמת מסע של משתמש, עליך להריץ בדיקות מקצה לקצה אשר משכפלות אינטראקציות משתמש בפועל. זה יבטיח שהאפליקציה שלך תפעל כפי שאתה מתכוון מההתחלה ועד הסוף.

תחילת העבודה עם בדיקות מקצה לקצה באמצעות ברוש

המטרה העיקרית של בדיקות מקצה לקצה באפליקציות חזיתיות היא לאמת תוצאות ולא את פרטי ההטמעה של ההיגיון העסקי.

קח טופס התחברות כדוגמה. באופן אידיאלי, תבדוק אם מסך הכניסה יופיע כמו שהוא אמור ועושה את מה שהוא אמור לעשות. בעיקרו של דבר, הפרטים הטכניים הבסיסיים אינם חשובים. המטרה הסופית היא פשוט להיכנס לנעליו של המשתמש ולהעריך את כל החוויה שלו.

בְּרוֹשׁ היא מסגרת מצוינת לבדיקת אוטומציה התואמת לחלק מהן מסגרות JavaScript הפופולריות ביותר. היכולת שלו להריץ בדיקות ישירות בדפדפן והחבילה המקיפה של תכונות הבדיקה הופכות את הבדיקה לחלקה ויעילה. זה גם תומך בגישות בדיקה שונות כולל:

instagram viewer

  • בדיקות יחידה
  • מבחנים מקצה לקצה
  • מבחני אינטגרציה

כדי לכתוב מבחנים מקצה לקצה עבור אפליקציית React, שקול את סיפורי המשתמשים הבאים:

  • משתמש יכול לראות שדה קלט עם כפתור הגשה מתאים.
  • משתמש יכול להזין שאילתת חיפוש בשדה הקלט.
  • לאחר לחיצה על כפתור השליחה, משתמש אמור לראות רשימה של פריטים המוצגים ממש מתחת לשדה הקלט.

על ידי מעקב אחר סיפורי המשתמשים האלה, אתה יכול לבנות אפליקציית React פשוטה המאפשרת למשתמש לחפש מוצרים. האפליקציה תביא נתוני מוצר מה- ממשק API של DummyJSON ולעבד אותו בדף.

אתה יכול למצוא את הקוד של הפרויקט הזה בו GitHub מאגר

הגדר פרויקט React

להתחיל, ליצור פרויקט 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 hook, אשר מבצעת פונקציה אסינכרונית שמביאה את נתוני המוצר בהתבסס על שאילתת החיפוש שסופקה.

 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

גדול! אתה אמור להיות מסוגל להביא נתוני מוצר ספציפיים מה-Dmmy JSON API.

הגדר את סביבת הבדיקה

ראשית, הפעל את פקודת ה-test script בטרמינל שלך:

npm run test

פקודה זו תפעיל ותפתח את לקוח Cypress. קדימה ולחץ על בדיקת E2E לַחְצָן.

לאחר מכן, לחץ לְהַמשִׁיך כדי להוסיף קבצי תצורה של Cypress.

לאחר השלמת תהליך זה, אתה אמור לראות ספריית בדיקות Cypress חדשה בפרויקט שלך. בנוסף, הלקוח של Cypress מוסיף אוטומטית את הקובץ cypress.config.js. אתה יכול לעדכן קובץ זה כדי להתאים אישית עוד היבטים שונים של סביבת הבדיקה, ההתנהגות וההגדרה שלך.

כתוב בדיקות מקצה לקצה באמצעות ברוש

כדי לכתוב את המבחן הראשון שלך, עליך לבחור את הדפדפן שבו הבדיקה תפעל. בחר באפשרות המועדפת עליך מבין האפשרויות הזמינות בלקוח Cypress.

Cypress תשיק גרסה פשוטה של ​​הדפדפן שבחרת, ותיצור סביבה מבוקרת להפעלת בדיקות.

בחר את צור מפרט חדש אפשרות ליצור את קובץ הבדיקה שלך.

עבור אל עורך הקוד שלך, פתח את cypress/e2e/App.spec.cy.js קובץ, ועדכן את תוכן הקובץ עם הקוד הבא.

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 ובחר את קובץ הבדיקה הספציפי שברצונך להפעיל.

ברוש תריץ את הבדיקות ויציג את התוצאות בפאנל השמאלי של מגרש המשחקים.

הדמיית תהליכי יישום

כדי להבטיח שתעבור ותבדוק את כל מסע המשתמש - במקרה השימוש הספציפי הזה - עליך לאמת זאת האפליקציה יכולה לקחת את קלט המשתמש, להביא את הנתונים הנדרשים, ולבסוף, להציג את הנתונים בדפדפן עמוד.

למען הבהירות, אתה יכול ליצור קובץ בדיקה חדש כדי להכיל חבילת בדיקה אחרת בתוך 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: $');
 });
 });

חבילת בדיקה זו בודקת שברגע שמשתמש שולח פריט חיפוש מסוים, האפליקציה מאחזרת ומציגה את הנתונים בדף הדפדפן.

הוא עושה זאת על ידי הדמיית תהליך הזנת קלט החיפוש, לחיצה על כפתור השלח, המתנה ל- מוצרים לטעינה, ולאחר מכן אימות נוכחותם של פריטי מוצר, יחד עם פרטים כגון כותרת ומחיר. למעשה, הוא לוכד ומאמת את כל החוויה מנקודת מבט של משתמש.

הדמיית שגיאות ותגובות

אתה יכול גם לדמות תרחישי שגיאה שונים ותגובות במבחני ברוש ​​שלך.

ליצור חדש 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, קדימה, חקור את התיעוד הרשמי שלה כדי לגלות עוד הרבה יכולות בדיקה.