E-posta giriş alanını doğru şekilde nasıl test…

E-posta giriş alanının testi, fonksiyonellik, doğrulama, kullanılabilirlik ve güvenlik kontrollerini içerir.

Fonksiyonel Testler:

Geçerli adreslerin girilmesi:
- test@example.com
- firstname.lastname@example.com
- email@subdomain.example.com
- firstname+lastname@example.com
- email@example.co.uk
- email@example.museum
- email@example.name
- email@example.демо (uluslararası alan adlarını desteklemek için - IDN)
Geçersiz adreslerin girilmesi:
- @ eksik: testexample.com
- Birden fazla @: test@@example.com
- Yanlış alan adı formatı: test@example
- Kullanıcı adı eksik: @example.com
- Kullanıcı adında özel karakterler: te!st@example.com, te#st@example.com
- Alan adında özel karakterler: test@exa!mple.com
- Uzun adres (limitlerin kontrolü): a_very_long_email_address_that_exceeds_typical_limits@example.com (spezifikasyona veya sağduyuya göre limitleri kontrol edin)
- Boşluk içeren adres: test @example.com
- Yanlış sözdizimi içeren adres: test@.com, test.@example.com
- IP adresi yerine alan adı olan adres (desteklenmiyorsa): test@[192.168.1.1]
- Kiril karakterleri içeren adres (IDN desteklenmiyorsa): тест@пример.рф
Boş alan: Formun boş alanla gönderilmesi.

Doğrulama:

Girilen verilerin email sözdizimine uygunluğunun kontrolü (düzenli ifadeler).
Geçersiz veriler girildiğinde kullanıcıya hata mesajlarının gösterilmesi.
Hata mesajlarının doğruluğu ve anlaşılırlığının kontrolü.
Doğrulama hataları varsa formun gönderilmediğinin kontrolü.

Kullanılabilirlik & UI/UX:

Sayfa yüklenirken alanın odaklanması (uygun ise).
Örnek format içeren placeholder metni (örneğin, user@example.com).
Tarayıcı otomatik doldurma desteği.
Alan için <label> etiketi bulunması.
Kullanıcının geçersiz karakterler girmemesi (ön uçta böyle bir mantık varsa).
Giriş maskesi varsa, onun çalışmasını kontrol edin.

Güvenlik:

XSS açıklarına karşı kontrol: script, HTML etiketleri (<script>alert('XSS')</script>) girişleri.
Enjeksiyonlara karşı kontrol (SQL/NoSQL): özel karakterlerin kullanımı (' OR '1'='1).
Hız sınırlaması (form email gönderiyor veya kaynak yoğun işlemler yapıyorsa): IP veya kullanıcı başına deneme sayısının sınırlandırılması.

Otomasyon:

Email doğrulama fonksiyonları için birim testleri yazma.
Form bağlamında alanın çalışmasını kontrol eden entegrasyon testleri yazma.
Email alanıyla formun tam kullanım senaryosunu kontrol eden E2E testleri yazma.

Doğrulama için örnek kod:

// validateEmail fonksiyonumuz olduğunu varsayıyoruz
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Basit bir regex örneği
  return re.test(email);
}

// Jest kullanarak birim testler
describe('validateEmail', () => {
  test('geçerli bir email için true döndürmeli', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('geçersiz bir email için false döndürmeli', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('boş string için false döndürmeli', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Cypress ile E2E testi örneği:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('geçerli ve geçersiz girişleri doğrular ve hata gösterir', () => {
    cy.visit('/form-sayfanız'); // Form sayfası URL'si
    cy.get('#email-input').type('geçersiz-email'); // Geçersiz email gir
    cy.get('button[type="submit"]').click(); // Gönder butonuna tıkla
    cy.get('.error-message').should('be.visible').and('contain', 'Geçersiz email formatı'); // Hata mesajını kontrol et
  });

  it('geçerli email ile formu göndermeye izin verir', () => {
    cy.visit('/form-sayfanız');
    cy.get('#email-input').type('gecerli@example.com');
    cy.get('button[type="submit"]').click();
    // Ek kontroller: yönlendirme, başarı mesajı, vb.
    cy.url().should('include', '/başarı'); // Başarılı gönderim sonrası URL kontrolü
  });
});

Test vakası tablosu:

ID	Kullanıcı eylemi	Beklenen sonuç
TC_01	`test@example.com` girilir	Alan geçerli sayılır. Form gönderilir (tüm alanlar doldurulmuşsa).
TC_02	`gecersiz-email` girilir	Alan geçersiz sayılır. Hata mesajı gösterilir.
TC_03	Alan boş bırakılır ve form gönderilmeye çalışılır	Alan geçersiz sayılır (gerekliyse). Hata mesajı gösterilir.
TC_04	`test@example.co.uk` girilir	Alan geçerli sayılır.
TC_05	`<script>alert('XSS')</script>` girilir	Script çalışmamalı. Alan temizlenmeli veya doğrulanmalı.

Projeye özgü gereksinimler, belirli alan adlarının desteklenmesi, büyük/küçük harf duyarlılığı, farklı cihaz ve tarayıcılarda test edilmesi gibi hususlar da dikkate alınmalıdır.

E-posta giriş alanını doğru şekilde nasıl test edilir?