Come testare correttamente il campo di inserimento…

La convalida del campo email include il controllo di funzionalità, validazione, usabilità e sicurezza.

Test funzionali:

Inserimento di indirizzi validi:
- 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.демо (per supportare nomi di dominio internazionalizzati - IDN)
Inserimento di indirizzi non validi:
- Mancanza di @: testexample.com
- Múltipli @: test@@example.com
- Formato di dominio errato: test@example
- Mancanza di nome utente: @example.com
- Caratteri speciali nel nome utente: te!st@example.com, te#st@example.com
- Caratteri speciali nel dominio: test@exa!mple.com
- Indirizzo lungo (controllo dei limiti): a_very_long_email_address_that_exceeds_typical_limits@example.com (verificare i limiti secondo specifica o buon senso)
- Indirizzo con spazi: test @example.com
- Indirizzo con sintassi incorretta: test@.com, test.@example.com
- Indirizzo con indirizzo IP invece del dominio (se non supportato): test@[192.168.1.1]
- Indirizzo con caratteri cirillici (se non supportato IDN): тест@пример.рф
Campo vuoto: Invio del modulo con campo vuoto.

Validazione:

Verifica che i dati inseriti rispettino la sintassi email (espressioni regolari).
Visualizzazione di messaggi di errore all'utente in caso di dati non validi.
Verifica della precisione e chiarezza dei messaggi di errore.
Assicurarsi che il modulo non venga inviato in presenza di errori di validazione.

Usabilità & UI/UX:

Focus sul campo al caricamento della pagina (se pertinente).
Testo di placeholder con esempio di formato (ad esempio, user@example.com).
Supporto all'autocompletamento del browser.
Presenza di un'etichetta (<label>) per il campo.
L'utente non può inserire caratteri non validi (se presente tale logica nel frontend).
Se presente una maschera di input, verificarne il funzionamento.

Sicurezza:

Verifica di vulnerabilità XSS: inserimento di script, tag HTML (<script>alert('XSS')</script>) nel campo.
Verifica di injection (SQL/NoSQL): inserimento di caratteri specifici che possano influenzare le query al database (' OR '1'='1).
Limitazione del rate (se il modulo invia email o compie azioni che richiedono risorse): verificare il limite di tentativi di invio da un IP o utente.

Automazione:

Scrittura di test unitari per le funzioni di validazione email.
Scrittura di test di integrazione per verificare il funzionamento del campo nel contesto del modulo.
Scrittura di test E2E per verificare lo scenario completo di utilizzo del modulo con il campo email.

Esempio di codice per test unitario di validazione:

// Supponiamo di avere la funzione validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Esempio semplice di regex
  return re.test(email);
}

// Test unitari con Jest
describe('validateEmail', () => {
  test('dovrebbe restituire true per una email valida', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('dovrebbe restituire false per una email non valida', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('dovrebbe restituire false per una stringa vuota', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Esempio di test E2E con Cypress:

// cypress/integration/email_field.spec.js
describe('Campo email', () => {
  it('valida correttamente e mostra erro per input non valido', () => {
    cy.visit('/pagina-form'); // URL della pagina con il modulo
    cy.get('#email-input').type('email-invalido'); // Inserimento email non valida
    cy.get('button[type="submit"]').click(); // Clic sul pulsante di invio
    cy.get('.error-message').should('be.visible').and('contain', 'Formato email non valido'); // Verifica messaggio di errore
  });

  it('consente di inviare il modulo con email valida', () => {
    cy.visit('/pagina-form');
    cy.get('#email-input').type('valido@example.com');
    cy.get('button[type="submit"]').click();
    // Verifiche aggiuntive: redirect, messaggio di successo, ecc.
    cy.url().should('include', '/successo'); // Verifica URL dopo invio
  });
});

Tabella dei casi di test:

ID	Azione utente	Risultato atteso
TC_01	Inserire `test@example.com`	Il campo è considerato valido. Il modulo viene inviato (se tutti i campi sono compilati).
TC_02	Inserire `email-invalido`	Il campo è considerato non valido. Viene mostrato un messaggio di errore.
TC_03	Lasciare il campo vuoto e tentare di inviare	Il campo è considerato non valido (se obbligatorio). Viene mostrato un messaggio di errore.
TC_04	Inserire `test@example.co.uk`	Il campo è considerato valido.
TC_05	Inserire `<script>alert('XSS')</script>`	Lo script non deve essere eseguito. Il campo deve essere sanificato o validato.

È inoltre necessario considerare i requisiti specifici del progetto (ad esempio, supporto per determinati domini, sensibilità al maiuscolo/minuscolo), test su diversi dispositivi e browser.

Come testare correttamente il campo di inserimento dell'indirizzo email?