Wie testet man das Eingabefeld für die E-Mail-Adresse…

Die Validierung des Eingabefelds für E-Mails umfasst die Überprüfung der Funktionalität, Validierung, Benutzerfreundlichkeit und Sicherheit.

Funktionstests:

Eingabe gültiger Adressen:
- 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.демо (zur Unterstützung internationalisierter Domänennamen - IDN)
Eingabe ungültiger Adressen:
- Fehlen von @: testexample.com
- Mehrere @: test@@example.com
- Falsches Domain-Format: test@example
- Fehlender Benutzername: @example.com
- Sonderzeichen im Benutzernamen: te!st@example.com, te#st@example.com
- Sonderzeichen im Domain: test@exa!mple.com
- Lange Adresse (Längenbegrenzung): a_very_long_email_address_that_exceeds_typical_limits@example.com (Längen gemäß Spezifikation oder gesundem Menschenverstand prüfen)
- Adresse mit Leerzeichen: test @example.com
- Adresse mit inkorrekter Syntax: test@.com, test.@example.com
- Adresse mit IP-Adresse statt Domain (falls nicht unterstützt): test@[192.168.1.1]
- Adresse mit kyrillischen Zeichen (falls IDN nicht unterstützt): тест@пример.рф
Leeres Feld: Absenden des Formulars mit leerem Feld.

Validierung:

Überprüfung, ob die eingegebenen Daten der E-Mail-Syntax entsprechen (reguläre Ausdrücke).
Fehlermeldungen bei ungültigen Eingaben anzeigen.
Genauigkeit und Verständlichkeit der Fehlermeldungen prüfen.
Sicherstellen, dass das Formular bei Validierungsfehlern nicht abgeschickt wird.

Benutzerfreundlichkeit & UI/UX:

Fokus auf das Feld beim Laden der Seite (falls angebracht).
Platzhaltertext mit Beispiel-Format (zum Beispiel, user@example.com).
Unterstützung der Browser-Aautovervollständigung.
Vorhandensein eines <label>-Elements für das Feld.
Der Benutzer kann keine ungültigen Zeichen eingeben (falls solche Logik im Frontend vorhanden ist).
Wenn eine Eingabemaske vorhanden ist, diese testen.

Sicherheit:

Überprüfung auf XSS-Schwachstellen: Eingabe von Skripten, HTML-Tags (<script>alert('XSS')</script>) im Feld.
Überprüfung auf Injektionen (SQL/NoSQL): Eingabe spezieller Zeichen, die Anfragen an die Datenbank beeinflussen könnten (' OR '1'='1).
Rate-Limiting (falls das Formular E-Mails versendet oder ressourcenintensive Aktionen durchführt): Begrenzung der Versuche pro IP oder Nutzer.

Automatisierung:

Schreiben von Unit-Tests für die Validierungsfunktionen.
Schreiben von Integrationstests für die Formularfunktionalität.
Schreiben von E2E-Tests für den vollständigen Nutzungsszenario des Formulars mit E-Mail-Feld.

Beispielcode für einen Unit-Test der Validierung:

// Angenommen, wir haben eine Funktion validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Einfaches Beispiel für eine Regex
  return re.test(email);
}

// Unit-Tests mit Jest
describe('validateEmail', () => {
  test('sollte bei einer gültigen E-Mail true zurückgeben', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('sollte bei einer ungültigen E-Mail false zurückgeben', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('sollte bei einem leeren String false zurückgeben', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Beispiel E2E-Test mit Cypress:

// cypress/integration/email_field.spec.js
describe('E-Mail Eingabefeld', () => {
  it('validiert korrekt und zeigt Fehler bei ungültiger Eingabe', () => {
    cy.visit('/deine-formularseite'); // URL der Seite mit dem Formular
    cy.get('#email-input').type('ungültige-email'); // Ungültige E-Mail eingeben
    cy.get('button[type="submit"]').click(); // Absenden klicken
    cy.get('.error-message').should('be.visible').and('contain', 'Ungültiges E-Mail-Format'); // Fehlernachricht prüfen
  });

  it('erlaubt das Absenden des Formulars mit einer gültigen E-Mail', () => {
    cy.visit('/deine-formularseite');
    cy.get('#email-input').type('gültig@example.com');
    cy.get('button[type="submit"]').click();
    // Weitere Prüfungen: Weiterleitung, Erfolgsmeldung, etc.
    cy.url().should('include', '/erfolg'); // URL nach erfolgreichem Versand prüfen
  });
});

Beispieltabelle für Testfälle:

ID	Benutzeraktion	Erwartetes Ergebnis
TC_01	`test@example.com` eingeben	Das Feld gilt als gültig. Das Formular wird gesendet (wenn alle Felder ausgefüllt sind).
TC_02	`ungültige-email` eingeben	Das Feld gilt als ungültig. Fehlermeldung wird angezeigt.
TC_03	Das Feld leer lassen und versuchen, das Formular zu senden	Das Feld gilt als ungültig (wenn erforderlich). Fehlermeldung wird angezeigt.
TC_04	`test@example.co.uk` eingeben	Das Feld gilt als gültig.
TC_05	`<script>alert('XSS')</script>` eingeben	Das Skript darf nicht ausgeführt werden. Das Feld muss bereinigt oder validiert werden.

Es sind auch projektspezifische Anforderungen zu berücksichtigen (z.B. Unterstützung bestimmter Domänen, Groß-/Kleinschreibung), Tests auf verschiedenen Geräten und Browsern.

Wie testet man das Eingabefeld für die E-Mail-Adresse richtig?