Hoe test je correct het invoerveld voor…

Het testen van het e-mail invoerveld omvat het controleren van functionaliteit, validatie, gebruiksgemak en beveiliging.

Functioneel testen:

Invoeren van geldige 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.демо (voor ondersteuning van genationaliseerde domeinnamen - IDN)
Invoeren van ongeldige adressen:
- Ontbreken van @: testexample.com
- Meerdere @: test@@example.com
- Ongeldig domeinformaat: test@example
- Gebrek aan gebruikersnaam: @example.com
- Speciale tekens in gebruikersnaam: te!st@example.com, te#st@example.com
- Speciale tekens in domein: test@exa!mple.com
- Lange adressen (limietcontrole): a_very_long_email_address_that_exceeds_typical_limits@example.com (controleer limieten volgens specificatie of gezond verstand)
- Adres met spaties: test @example.com
- Adres met ongeldige syntaxis: test@.com, test.@example.com
- Adres met IP-adres in plaats van domein: test@[192.168.1.1]
- Adres met Cyrillisch script (indien niet ondersteund door IDN): тест@пример.рф
Leeg veld: Verzenden van formulier met leeg veld.

Validatie:

Controle of de ingevoerde gegevens voldoen aan de e-mail syntaxis (reguliere expressies).
Foutmeldingen tonen aan de gebruiker bij ongeldige invoer.
Controleer de nauwkeurigheid en begrijpelijkheid van foutmeldingen.
Controleer dat het formulier niet wordt verzonden bij validatiefouten.

Gebruiksvriendelijkheid & UI/UX:

Focus op het veld bij het laden van de pagina (indien passend).
Placeholder-tekst met voorbeeldformaat (bijvoorbeeld, user@example.com).
Ondersteuning voor automatische invulling door de browser.
Label (<label>) voor het veld.
Gebruiker kan geen ongeldige tekens invoeren (indien dergelijke logica op de frontend aanwezig is).
Als er een invoermasker is, controleer dan of deze werkt.

Beveiliging:

Controle op XSS-kwetsbaarheden: invoer van scripts, HTML-tags (<script>alert('XSS')</script>) in het veld.
Controle op injecties (SQL/NoSQL): invoer van speciale tekens die query's kunnen beïnvloeden (' OR '1'='1).
Rate limiting (indien het formulier e-mail verzendt of resource-intensieve acties onderneemt): controleer de beperking van het aantal pogingen vanaf één IP of gebruiker.

Automatisering:

Schrijf unit-tests voor e-mailvalidatiefuncties.
Schrijf integratietests om de werking van het veld in de context van het formulier te controleren.
Schrijf E2E-tests om het volledige gebruiksscenario van het formulier met het e-mailveld te testen.

Voorbeeld van een unit-test voor validatie:

// Stel dat we een functie validateEmail hebben
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Eenvoudig regex voorbeeld
  return re.test(email);
}

// Unit tests met Jest
describe('validateEmail', () => {
  test('moet true retourneren voor een geldig email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('moet false retourneren voor een ongeldig email', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('moet false retourneren voor een lege string', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Voorbeeld van een E2E-test met Cypress:

// cypress/integration/email_field.spec.js
describe('Email invoerveld', () => {
  it('valideert correct en toont foutmelding voor ongeldige invoer', () => {
    cy.visit('/your-form-page'); // URL van de formulierpagina
    cy.get('#email-input').type('ongeldig'); // Onjuiste email invoeren
    cy.get('button[type="submit"]').click(); // Klik op verzendknop
    cy.get('.error-message').should('be.visible').and('contain', 'Ongeldig emailformaat'); // Foutmelding controleren
  });

  it('staat het verzenden van het formulier toe met een geldige email', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('geldig@example.com');
    cy.get('button[type="submit"]').click();
    // Verdere controles: bijvoorbeeld redirect, succesbericht
    cy.url().should('include', '/success'); // URL na succesvolle verzending
  });
});

Voorbeeld testcases tabel:

ID	Gebruikersactie	Verwacht resultaat
TC_01	`test@example.com` invoeren	Veld wordt als geldig beschouwd. Formulier wordt verzonden (indien alle velden ingevuld).
TC_02	`ongeldig-email` invoeren	Veld wordt als ongeldig beschouwd. Foutmelding wordt weergegeven.
TC_03	Leeg veld en proberen formulier te verzenden	Veld wordt als ongeldig beschouwd (indien verplicht). Foutmelding wordt weergegeven.
TC_04	`test@example.co.uk` invoeren	Veld wordt als geldig beschouwd.
TC_05	`<script>alert('XSS')</script>` invoeren	Script mag niet worden uitgevoerd. Veld moet gesaneerd of gevalideerd zijn.

Houd rekening met specifieke projectvereisten (bijvoorbeeld ondersteuning voor bepaalde domeinen, gevoeligheid voor hoofdlettergebruik), testen op verschillende apparaten en browsers.

Hoe test je correct het invoerveld voor e-mailadressen?