Hogyan teszteljük helyesen az e-mail cím beviteli…

Az email mező tesztelése magában foglalja a funkcionalitás, validáció, használhatóság és biztonság ellenőrzését.

Funkcionális tesztelés:

Érvényes címek megadása:
- 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.демо (az IDN támogatásához)
Érvénytelen címek megadása:
- @ hiánya: testexample.com
- Több @: test@@example.com
- Hibás domain formátum: test@example
- Felhasználónév hiánya: @example.com
- Különleges karakterek a felhasználónévben: te!st@example.com, te#st@example.com
- Különleges karakterek a domainben: test@exa!mple.com
- Hosszú cím (limitek ellenőrzése): a_very_long_email_address_that_exceeds_typical_limits@example.com
- Szóközöket tartalmazó cím: test @example.com
- Hibás szintaxisú címek: test@.com, test.@example.com
- IP-cím a domain helyett (ha nem támogatott): test@[192.168.1.1]
- Cirill betűk (ha nem támogatott IDN): тест@пример.рф
Üres mező: űrlap küldése üres mezővel.

Validáció:

A megadott adatok szintaxisának ellenőrzése (reguláris kifejezések).
Hibajelzések megjelenítése a felhasználónak érvénytelen adatok megadása esetén.
A hibajelzések pontosságának és érthetőségének ellenőrzése.
Ellenőrizze, hogy a form nem küldhető el validációs hibák esetén.

Használhatóság & UI/UX:

A fókusz a mezőn az oldal betöltésekor (ha releváns).
Példát mutató placeholder szöveg (például, user@example.com).
Böngésző automatikus kitöltés támogatása.
Címke (<label>) megléte a mezőhöz.
A felhasználó nem írhat be nem megengedett karaktereket (ha ilyen front-end logika van).
Ha van bemeneti maszk, ellenőrizze annak működését.

Biztonság:

XSS sebezhetőség ellenőrzése: szkriptek, HTML tagek (<script>alert('XSS')</script>) bevitele a mezőbe.
Injektálás (SQL/NoSQL) ellenőrzése: speciális karakterek bevitele, amelyek befolyásolhatják az adatbázis lekérdezéseket (' OR '1'='1).
Kérelmek korlátozása (ha az űrlap emailt küld vagy erőforrás-igényes műveleteket végez): próbálkozások számának korlátozása IP vagy felhasználó szerint.

Automatizálás:

Egységtesztek írása az email validációs funkciókhoz.
Integrációs tesztek írása a mező működésének ellenőrzésére a formában.
E2E tesztek írása a teljes űrlap használati forgatókönyvének ellenőrzésére.

Példa kód egységteszthez:

// Feltételezzük, hogy van egy validateEmail függvény
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Egyszerű reguláris kifejezés példa
  return re.test(email);
}

// Egységtesztek Jest használatával
describe('validateEmail', () => {
  test('helyes email esetén igazat adjon vissza', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('helytelen email esetén hamisat adjon vissza', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('üres string esetén hamisat adjon vissza', () => {
    expect(validateEmail('')).toBe(false);
  });
});

E2E teszt példa Cypress használatával:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('helyesen validál és hibát jelenít meg érvénytelen bemenet esetén', () => {
    cy.visit('/your-form-page'); // Az oldal URL-je
    cy.get('#email-input').type('invalid-email'); // Érvénytelen email bevitele
    cy.get('button[type="submit"]').click(); // Küldés gomb megnyomása
    cy.get('.error-message').should('be.visible').and('contain', 'Hibás email formátum'); // Hibajelzés ellenőrzése
  });

  it('engedélyezi a form küldését érvényes email esetén', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // További ellenőrzések: pl. átirányítás, sikerüzenet
    cy.url().should('include', '/siker'); // URL ellenőrzése
  });
});

Tesztesetek táblázat:

ID	Felhasználói művelet	Várt eredmény
TC_01	`test@example.com` megadása	A mező érvényesnek számít. A formátum szerint küldhető a form.
TC_02	`invalid-email` megadása	A mező érvénytelennek számít. Hibaüzenet jelenik meg.
TC_03	Üres mezővel próbálja küldeni a formot	A mező érvénytelen (ha kötelező). Hibaüzenet jelenik meg.
TC_04	`test@example.co.uk` megadása	A mező érvényesnek számít.
TC_05	`<script>alert('XSS')</script>` megadása	A szkript nem hajtódik végre. A mezőnek szanitizáltnak vagy validáltnak kell lennie.

Ezen kívül figyelembe kell venni a projekt specifikus követelményeit (pl. támogatott domainek, érzékenység a kis- és nagybetűkre), különböző eszközökön és böngészőkben végzett tesztelést.

Hogyan teszteljük helyesen az e-mail cím beviteli mezőt?