¿Cómo probar correctamente el campo de entrada de…

La prueba del campo de entrada de correo electrónico incluye la verificación de funcionalidad, validación, usabilidad y seguridad.

Pruebas funcionales:

Ingreso de direcciones válidas:
- 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.демо (para soporte de nombres de dominio internacionalizados - IDN)
Ingreso de direcciones no válidas:
- Ausencia de @: testexample.com
- Múltiples @: test@@example.com
- Formato de dominio incorrecto: test@example
- Ausencia de nombre de usuario: @example.com
- Caracteres especiales en el nombre de usuario: te!st@example.com, te#st@example.com
- Caracteres especiales en el dominio: test@exa!mple.com
- Dirección larga (verificación de límites): a_very_long_email_address_that_exceeds_typical_limits@example.com (verificar límites según especificación o sentido común)
- Dirección con espacios: test @example.com
- Dirección con sintaxis incorrecta: test@.com, test.@example.com
- Dirección con dirección IP en lugar de dominio (si no se soporta): test@[192.168.1.1]
- Dirección con cirílico (si no se soporta IDN): тест@пример.рф
Campo vacío: Envío del formulario con el campo vacío.

Validación:

Verificación de que los datos ingresados cumplen con la sintaxis del email (expresiones regulares).
Mostrar mensajes de error al usuario al ingresar datos no válidos.
Verificación de la precisión y claridad de los mensajes de error.
Verificación de que el formulario no se envía si hay errores de validación.

Usabilidad & UI/UX:

Enfoque en el campo al cargar la página (si es apropiado).
Texto de marcador de posición con ejemplo de formato (por ejemplo, user@example.com).
Soporte para autocompletado por el navegador.
Etiqueta (<label>) para el campo.
El usuario no puede ingresar caracteres no permitidos (si hay lógica en el frontend).
Si hay una máscara de entrada, verificar su funcionamiento.

Seguridad:

Verificación de vulnerabilidades XSS: ingreso de scripts, etiquetas HTML (<script>alert('XSS')</script>) en el campo.
Verificación de inyecciones (SQL/NoSQL): ingreso de caracteres específicos que puedan afectar las consultas a la base de datos (' OR '1'='1).
Limitación de tasa (si el formulario envía email o realiza acciones que consumen recursos): verificar la restricción en la cantidad de intentos de envío desde una misma IP o usuario.

Automatización:

Escribir pruebas unitarias para funciones de validación de email.
Escribir pruebas de integración para verificar el funcionamiento del campo en el contexto del formulario.
Escribir pruebas E2E para verificar el escenario completo de uso del formulario con el campo email.

Ejemplo de código para prueba unitaria de validación:

// Supongamos que tenemos la función validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Ejemplo simple de expresión regular
  return re.test(email);
}

// Pruebas unitarias usando Jest
describe('validateEmail', () => {
  test('debería devolver true para un email válido', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('debería devolver false para un email no válido', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('debería devolver false para una cadena vacía', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Ejemplo de prueba E2E usando Cypress:

// cypress/integration/email_field.spec.js
describe('Campo de entrada de email', () => {
  it('valida correctamente y muestra error para entrada no válida', () => {
    cy.visit('/tu-página-del-formulario'); // URL de la página con el formulario
    cy.get('#email-input').type('invalid-email'); // Ingreso de email no válido
    cy.get('button[type="submit"]').click(); // Clic en el botón de enviar
    cy.get('.error-message').should('be.visible').and('contain', 'Formato de email incorrecto'); // Verificación del mensaje de error
  });

  it('permite enviar el formulario con un email válido', () => {
    cy.visit('/tu-página-del-formulario');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Verificaciones adicionales: redirección, mensaje de éxito, etc.
    cy.url().should('include', '/éxito'); // Ejemplo de verificación de URL tras envío correcto
  });
});

Tabla con ejemplos de casos de prueba:

ID	Acción del usuario	Resultado esperado
TC_01	Ingresar `test@example.com`	El campo se considera válido. La forma se envía (si todos los campos están completos).
TC_02	Ingresar `invalid-email`	El campo se considera inválido. Se muestra un mensaje de error.
TC_03	Dejar el campo vacío e intentar enviar el formulario	El campo se considera inválido (si es obligatorio). Se muestra un mensaje de error.
TC_04	Ingresar `test@example.co.uk`	El campo se considera válido.
TC_05	Ingresar `<script>alert('XSS')</script>`	El script no debe ejecutarse. El campo debe ser saneado o validado.

También se deben considerar requisitos específicos del proyecto (por ejemplo, soporte para ciertos dominios, sensibilidad a mayúsculas/minúsculas), pruebas en diferentes dispositivos y navegadores.

¿Cómo probar correctamente el campo de entrada de correo electrónico?