Η ανάπτυξη του Frontend περιλαμβάνει τη δημιουργία οπτικά ελκυστικών, λειτουργικών εφαρμογών που απευθύνονται στον πελάτη. Αλλά υπάρχει μια σύλληψη? αυτές οι εφαρμογές πρέπει να διασφαλίζουν ότι οι χρήστες έχουν μια απρόσκοπτη εμπειρία.

Αν και οι δοκιμές μονάδας και ενοποίησης είναι απαραίτητες για την επαλήθευση της λειτουργικότητας μιας εφαρμογής, ενδέχεται να μην καταγράφουν πλήρως τις τυπικές αλληλεπιδράσεις των χρηστών. Για να προσομοιώσετε πραγματικά τη διαδρομή ενός χρήστη, πρέπει να εκτελέσετε δοκιμές από άκρο σε άκρο που αναπαράγουν τις πραγματικές αλληλεπιδράσεις των χρηστών. Αυτό θα διασφαλίσει ότι η εφαρμογή σας λειτουργεί όπως σκοπεύετε από την αρχή μέχρι το τέλος.

Ξεκινώντας με δοκιμές από άκρο σε άκρο με χρήση Cypress

Ο κύριος στόχος των δοκιμών από άκρο σε άκρο σε εφαρμογές front-end είναι η επαλήθευση των αποτελεσμάτων και όχι οι λεπτομέρειες εφαρμογής της επιχειρηματικής λογικής.

Πάρτε για παράδειγμα μια φόρμα σύνδεσης. Στην ιδανική περίπτωση, θα δοκιμάζατε εάν η οθόνη σύνδεσης εμφανίζεται με τον τρόπο που υποτίθεται και κάνει αυτό που προορίζεται να κάνει. Ουσιαστικά, οι υποκείμενες τεχνικές λεπτομέρειες δεν είναι σημαντικές. Ο τελικός στόχος είναι απλώς να μπείτε στη θέση του χρήστη και να αξιολογήσετε ολόκληρη την εμπειρία του.

Κυπαρίσσι είναι ένα εξαιρετικό πλαίσιο δοκιμών αυτοματισμού που είναι συμβατό με ορισμένα από τα πιο δημοφιλή πλαίσια JavaScript. Η ικανότητά του να εκτελεί δοκιμές απευθείας στο πρόγραμμα περιήγησης και η ολοκληρωμένη σουίτα δυνατοτήτων δοκιμών καθιστούν τη δοκιμή απρόσκοπτη και αποτελεσματική. Υποστηρίζει επίσης διάφορες προσεγγίσεις δοκιμών, όπως:

• Δοκιμές Μονάδων
• Δοκιμές από άκρο σε άκρο
• Δοκιμές ολοκλήρωσης

Για να συντάξετε δοκιμές από άκρο σε άκρο για μια εφαρμογή React, λάβετε υπόψη αυτές τις ιστορίες χρηστών:

• Ένας χρήστης μπορεί να δει ένα πεδίο εισαγωγής με ένα αντίστοιχο κουμπί υποβολής.
• Ένας χρήστης μπορεί να εισαγάγει ένα ερώτημα αναζήτησης στο πεδίο εισαγωγής.
• Αφού κάνει κλικ στο κουμπί υποβολής, ο χρήστης θα πρέπει να δει μια λίστα στοιχείων που εμφανίζεται ακριβώς κάτω από το πεδίο εισαγωγής.

Ακολουθώντας αυτές τις ιστορίες χρηστών, μπορείτε να δημιουργήσετε μια απλή εφαρμογή React που επιτρέπει σε έναν χρήστη να αναζητά προϊόντα. Η εφαρμογή θα ανακτήσει δεδομένα προϊόντος από το DummyJSON API και αποδώστε το στη σελίδα.

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό GitHub αποθήκη

Ρυθμίστε ένα έργο React

Για να ξεκινήσετε, δημιουργήστε ένα έργο React χρησιμοποιώντας το Vite ή χρησιμοποιήστε το εντολή create-react-app για να ρυθμίσετε μια βασική εφαρμογή React. Μόλις ολοκληρωθεί η διαδικασία εγκατάστασης, προχωρήστε και εγκαταστήστε το πακέτο Cypress ως εξάρτηση dev στο έργο σας:

npm install cypress --save-dev

Τώρα, ενημερώστε το πακέτο.json αρχείο προσθέτοντας αυτό το σενάριο:

"test": "npx cypress open"

Δημιουργήστε ένα λειτουργικό στοιχείο

Στο src κατάλογο, δημιουργήστε ένα φάκελο και ονομάστε τον συστατικά. Μέσα σε αυτόν τον φάκελο, προσθέστε έναν νέο προϊόντα.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>
"input">Input</label>

 id="text"
 type="text"
 ref={searchInputRef}
 />


"btn" type="button" onClick={handleSubmit}>Submit</button>
"products-component" searchInput={searchInput} /> 
 </div>
 )
}
exportdefault App

Προχωρήστε και ξεκινήστε τον διακομιστή ανάπτυξης.

npm run dev

Εξαιρετική! Θα πρέπει να μπορείτε να ανακτήσετε συγκεκριμένα δεδομένα προϊόντος από το εικονικό JSON API.

Ρυθμίστε το περιβάλλον δοκιμών

Πρώτα, εκτελέστε την εντολή δοκιμαστικής δέσμης ενεργειών στο τερματικό σας:

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 και επιλέξτε το συγκεκριμένο αρχείο δοκιμής που θέλετε να εκτελέσετε.

Το 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 είναι ένα εξαιρετικό εργαλείο για την εφαρμογή δοκιμαστικής ανάπτυξης σε εφαρμογές — όχι μόνο παρέχει μια ολοκληρωμένη σειρά δυνατοτήτων δοκιμών, αλλά επίσης υποστηρίζει διάφορες στρατηγικές δοκιμών. Για να αξιοποιήσετε στο έπακρο το Cypress, προχωρήστε και εξερευνήστε την επίσημη τεκμηρίωσή του για να ανακαλύψετε πολλές περισσότερες δυνατότητες δοκιμών.