Ön uç geliştirme, görsel olarak çekici, işlevsel, müşteriye yönelik uygulamalar oluşturmayı içerir. Ama bir sorun var; bu uygulamalar kullanıcıların kusursuz bir deneyim yaşamasını sağlamalıdır.

Birim ve entegrasyon testleri bir uygulamanın işlevselliğini doğrulamak için gerekli olsa da tipik kullanıcı etkileşimlerini tam olarak yakalayamayabilirler. Bir kullanıcının yolculuğunu gerçekten simüle etmek için, gerçek kullanıcı etkileşimlerini kopyalayan uçtan uca testler çalıştırmanız gerekir. Bu, uygulamanızın baştan sona istediğiniz gibi performans göstermesini sağlayacaktır.

Cypress Kullanarak Uçtan Uca Teste Başlarken

Ön uç uygulamalarda uçtan uca testin temel amacı, iş mantığının uygulama ayrıntılarından ziyade sonuçları doğrulamaktır.

Örnek olarak bir giriş formunu alın. İdeal olarak, giriş ekranının olması gerektiği gibi açılıp açılmadığını ve yapması gerekeni yapıp yapmadığını test edersiniz. Temelde, altta yatan teknik ayrıntılar önemli değildir. Nihai hedef, kullanıcının yerine geçmek ve tüm deneyimini değerlendirmektir.

Selvi bazılarıyla uyumlu harika bir otomasyon test çerçevesidir en popüler JavaScript çerçeveleri. Testleri doğrudan tarayıcıda çalıştırma yeteneği ve kapsamlı test özellikleri paketi, testleri sorunsuz ve verimli hale getirir. Ayrıca aşağıdakiler dahil çeşitli test yaklaşımlarını da destekler:

• Birim Testleri
• Uçtan Uca Testler
• Entegrasyon Testleri

Bir React uygulamasına yönelik uçtan uca testler yazmak için şu kullanıcı hikayelerini göz önünde bulundurun:

• Kullanıcı, karşılık gelen gönder düğmesinin bulunduğu bir giriş alanı görebilir.
• Kullanıcı giriş alanına bir arama sorgusu girebilir.
• Gönder düğmesini tıkladıktan sonra kullanıcı, giriş alanının hemen altında görüntülenen öğelerin bir listesini görmelidir.

Bu kullanıcı hikayelerini takip ederek kullanıcının ürünleri aramasına olanak tanıyan basit bir React uygulaması oluşturabilirsiniz. Uygulama, ürün verilerini KuklaJSON API'si ve sayfaya aktarın.

Bu projenin kodunu kendi içinde bulabilirsiniz. GitHub depo

React Projesi Kurma

Başlamak, Vite kullanarak bir React projesi oluşturun veya şunu kullanın Temel bir React uygulaması kurmak için create-react-app komutu. Kurulum işlemi tamamlandıktan sonra devam edin ve Cypress paketini projenize geliştirici bağımlılığı olarak yükleyin:

npm install cypress --save-dev

Şimdi güncelleyin paket.json Bu betiği ekleyerek dosya:

"test": "npx cypress open"

İşlevsel Bir Bileşen Oluşturun

İçinde kaynak dizin, bir klasör oluşturun ve ona bir ad verin bileşenler. Bu klasörün içine yeni bir tane ekleyin ürünler.jsx dosyanızı oluşturun ve aşağıdaki kodu ekleyin.

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

İşlevsel bileşen içinde bir tanımlayın kullanımEtkisi sağlanan arama sorgusuna göre ürün verilerini getiren eşzamansız bir işlevi yürüten kanca.

 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 Dosyasını Güncelleyin

Şimdi güncelleyin Uygulama.jsx aşağıdaki koda sahip dosya:

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

Devam edin ve geliştirme sunucusunu başlatın.

npm run dev

Harika! Sahte JSON API'sinden belirli ürün verilerini alabilmeniz gerekir.

Test Ortamını Ayarlama

Öncelikle terminalinizde test script komutunu çalıştırın:

npm run test

Bu komut Cypress istemcisini tetikleyecek ve açacaktır. Devam edin ve tıklayın E2E Testi düğme.

Sonra tıklayın Devam etmek Cypress yapılandırma dosyalarını eklemek için.

Bu işlem tamamlandıktan sonra projenizde yeni bir Cypress testleri dizini görmelisiniz. Ayrıca Cypress'in istemcisi cypress.config.js dosyasını otomatik olarak ekler. Test ortamınızın, davranışınızın ve kurulumunuzun çeşitli yönlerini daha da özelleştirmek için bu dosyayı güncelleyebilirsiniz.

Cypress Kullanarak Uçtan Uca Testler Yazma

İlk testinizi yazmak için testin çalışacağı tarayıcıyı seçmeniz gerekir. Cypress istemcisindeki mevcut seçenekler arasından tercih ettiğiniz seçeneği seçin.

Cypress, seçtiğiniz tarayıcının basitleştirilmiş bir sürümünü başlatacak ve testleri çalıştırmak için kontrollü bir ortam yaratacaktır.

Şunu seçin: Yeni spesifikasyon oluştur test dosyanızı oluşturma seçeneği.

Kod düzenleyicinize gidin, selvi/e2e/App.spec.cy.js Dosyayı açın ve bu dosyanın içeriğini aşağıdaki kodla güncelleyin.

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

Yukarıda vurgulanan kullanıcı hikayelerine geri dönecek olursak, bu özel test paketi iki hususu doğrulamaktadır:

• Tarayıcının sayfada bir giriş alanı ve bir gönder düğmesi görüntülemesi.
• Kullanımın bir arama sorgusu girebilmesi.

Jest ve Supertest gibi diğer JavaScript test araçları gibi Cypress de test senaryolarını tanımlamak için bildirimsel bir sözdizimi ve dil kullanır.

Testi çalıştırmak için Cypress tarafından yönetilen basitleştirilmiş tarayıcı sürümüne dönün ve çalıştırmak istediğiniz spesifik test dosyasını seçin.

Cypress testleri çalıştıracak ve sonuçları test alanının sol panelinde görüntüleyecektir.

Başvuru Süreçlerinin Simülasyonu

Bu özel kullanım durumunda kullanıcı yolculuğunun tamamını tamamlayıp test ettiğinizden emin olmak için şunları doğrulamanız gerekir: uygulama kullanıcı girişini alabilir, gerekli verileri getirebilir ve son olarak verileri tarayıcıda görüntüleyebilir sayfa.

Netlik sağlamak amacıyla, farklı bir test paketini barındıracak yeni bir test dosyası oluşturabilirsiniz. e2e dosya. Alternatif olarak, belirli bir test senaryosunu araştıran tüm test paketlerini tek bir test dosyasına dahil etmeyi de tercih edebilirsiniz.

Devam edin ve yeni bir tane yaratın Products.spec.cy.js dosyadaki e2e dosya. Bu dosyanın içine aşağıdaki kodu ekleyin.

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

Bu test paketi, kullanıcı belirli bir arama öğesini gönderdiğinde uygulamanın verileri alıp tarayıcı sayfasında görüntülediğini kontrol eder.

Bunu, arama girdisini girme, gönder düğmesine tıklama, mesajın gelmesini bekleme sürecini simüle ederek yapar. yüklenecek ürünleri ve ardından başlık ve fiyat gibi ayrıntılarla birlikte ürün öğelerinin varlığını doğrulamak. Temelde, tüm deneyimi kullanıcı perspektifinden yakalar ve doğrular.

Hataları ve Yanıtları Simüle Etme

Ayrıca Cypress testlerinizde çeşitli hata senaryolarını ve yanıtlarını simüle edebilirsiniz.

Yeni bir tane oluştur Error.spec.cy.js dosyadaki e2e dizini açın ve aşağıdaki kodu ekleyin.

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

Bu test paketi, kullanıcı yanlış bir arama sorgusu girdiğinde bir hata mesajının görüntülenip görüntülenmediğini kontrol eder.

Test senaryosunun geçmesi için Cypress'i kullanıyor tutmak ağı saplama ve bir ağ isteği hatasını simüle etme işlevi. Daha sonra, giriş alanına yanlış bir arama sorgusu girdikten ve getirme işlemini başlattıktan sonra sayfada bir hata mesajının (Ürün bulunamadı) gözle görülür şekilde görüntülenip görüntülenmediğini kontrol eder.

Bu sonuç, hata giderme mekanizmasının beklendiği gibi çalıştığını göstermektedir.

Test Odaklı Geliştirmede Cypress Kullanımı

Test etmek temel bir geliştirme gereksinimidir ancak aynı zamanda zaman alıcı bir süreç de olabilir. Ancak Cypress'i dahil etmek, test senaryolarınızın birlikte çalışmasını izlemenin gerçek tatminini sağlayabilir.

Cypress, uygulamalarda test odaklı geliştirmeyi uygulamak için harika bir araçtır; yalnızca kapsamlı bir test özellikleri paketi sağlamakla kalmaz, aynı zamanda çeşitli test stratejilerini de destekler. Cypress'ten en iyi şekilde yararlanmak için devam edin ve çok daha fazla test özelliğini keşfetmek için resmi belgelerini inceleyin.