Uygulamanın istemci tarafı testleri hakkında bilgi…

Uygulamanın istemci tarafı testleri (frontend testleri), kullanıcı arayüzünün ve onun etkileşiminin doğru çalışmasını doğrulamaya yöneliktir. Ana hedef, uygulamanın farklı cihazlar ve tarayıcılarda son kullanıcı açısından düzgün göründüğünden, davrandığından ve çalıştığından emin olmaktır.

İstemci tarafı test türleri:

Görsel Testler (Visual Testing): Arayüz öğelerinin görünümünün, tasarımlara uygunluğunun, örtüşmelerin, kaymaların ve diğer görsel hataların kontrol edilmesi.
Fonksiyonel Testler (Functional Testing): Tüm etkileşimli öğelerin (düğmeler, formlar, bağlantılar vb.) ve istemci tarafında uygulanan iş mantığının doğru çalıştığının kontrol edilmesi.
Çapraz Tarayıcı Testleri (Cross-browser Testing): Uygulamanın farklı web tarayıcılarında (Chrome, Firefox, Safari, Edge vb.) ve sürümlerinde görüntülenmesi ve fonksiyonelliğinin kontrol edilmesi.
Çapraz Platform Testleri (Cross-platform Testing): Uygulamanın farklı işletim sistemlerinde (Windows, macOS, Linux) ve sürümlerinde çalıştığının doğrulanması.
Performans Testleri (Performance Testing): Sayfaların yüklenme hızının, arayüz yanıt verme kabiliyetinin, bellek ve işlemci kullanımının değerlendirilmesi.
Kullanılabilirlik Testleri (Usability Testing): Kullanıcı için arayüzün kolaylığı ve sezgisel olup olmadığının, UX/UI standartlarına uygunluğun kontrol edilmesi.
Erişilebilirlik Testleri (Accessibility Testing): Uygulamanın erişilebilirlik standartlarına (örneğin WCAG) uygunluğunun, sınırlı yeteneklere sahip kullanıcılar için uygunluğunun kontrol edilmesi.
Duyarlı Tasarım Testleri (Responsive Testing): Farklı ekran boyutlarına sahip cihazlarda uygulamanın doğru görüntülenip görüntülenmediğinin ve düzgün çalışıp çalışmadığının kontrol edilmesi.
Güvenlik Testleri (Security Testing): Cross-Site Scripting (XSS) veya Cross-Site Request Forgery (CSRF) gibi güvenlik açıklarının, kullanıcı kimlik doğrulama ve yetkilendirmesinin istemci tarafında olup olmadığının kontrol edilmesi.

İstemci tarafı testleri otomasyonu için araçlar:

E2E (End-to-End) ve entegrasyon testleri için: Selenium, Cypress, Playwright.
Birim ve bileşen testleri için (kullandıkları framework'e göre): Jest, Mocha, Jasmine (JavaScript/TypeScript için), Testing Library, Enzyme.
Görsel testler için: Applitools, Percy.
Performans testleri için: Lighthouse, WebPageTest.
Erişilebilirlik testleri için: Axe DevTools, WAVE.

Cypress kullanılarak örnek test:

// cypress/integration/example.spec.js
describe('Ana sayfa testi', () => {
  beforeEach(() => {
    cy.visit('/'); // Ana sayfaya git
  });

  it('Sayfa başlığını kontrol et', () => {
    cy.title().should('eq', 'Uygulama Adı'); // Tarayıcı sekmesi başlığını kontrol et
  });

  it('Ana sayfada anahtar öğenin varlığını kontrol et', () => {
    cy.get('h1').should('contain', 'Hoşgeldiniz'); // Belirli metni içeren h1 öğesinin varlığını kontrol et
  });

  it('Düğmenin çalışmasını kontrol et', () => {
    cy.get('button#myButton').click(); // id'si 'myButton' olan düğmeye tıkla
    cy.get('.success-message').should('be.visible'); // Başarı mesajının görünür olduğunu doğrula
  });
});

React bileşeni için Jest ve React Testing Library kullanılarak örnek test:

// src/components/Button/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

describe('Button bileşeni testi', () => {
  it('Düğme doğru metinle görüntüleniyor', () => {
    render(<Button text="Bana tıkla" />);
    const buttonElement = screen.getByText(/Bana tıkla/i);
    expect(buttonElement).toBeInTheDocument(); // Düğme öğesinin belgede olduğunu doğrula
  });

  it('Tıklama olayını tetikleyen fonksiyon çağrılır', () => {
    const handleClick = jest.fn(); // Mock fonksiyon
    render(<Button text="Bana tıkla" onClick={handleClick} />);
    const buttonElement = screen.getByText(/Bana tıkla/i);
    fireEvent.click(buttonElement); // Tıklamayı simüle et
    expect(handleClick).toHaveBeenCalledTimes(1); // Fonksiyonun bir kez çağrıldığını doğrula
  });
});

İstemci tarafı test stratejisi, uygulamanın mimarisi, kullanılan teknolojiler ve gereksinimlere bağlıdır. Genellikle, test piramidi uygulanır: daha fazla birim testi, daha az entegrasyon ve E2E testi. Manuel testler, kullanılabilirlik ve görsel unsurların doğrulanması için önemli olmaya devam eder, çünkü bunlar otomasyonla tamamen kapsanması zor olan alanlardır.

Uygulamanın istemci tarafı testleri hakkında bilgi veriniz.