Como testar corretamente o campo de entrada de email…

A validação do campo de entrada de email inclui a verificação de funcionalidade, validação, usabilidade e segurança.

Testes funcionais:

Inserção de endereços válidos:
- 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 suporte de nomes de domínio internacionalizados - IDN)
Inserção de endereços inválidos:
- Ausência de @: testexample.com
- Múltiplos @: test@@example.com
- Formato de domínio incorreto: test@example
- Ausência de nome de utilizador: @example.com
- Caracteres especiais no nome de utilizador: te!st@example.com, te#st@example.com
- Caracteres especiais no domínio: test@exa!mple.com
- Endereço longo (verificação de limites): a_very_long_email_address_that_exceeds_typical_limits@example.com (verificar limites de acordo com a especificação ou bom senso)
- Endereço com espaços: test @example.com
- Endereço com sintaxe incorreta: test@.com, test.@example.com
- Endereço com endereço IP em vez de domínio (se não suportado): test@[192.168.1.1]
- Endereço com cirílico (se não suportado IDN): тест@пример.рф
Campo vazio: Envio do formulário com o campo vazio.

Validação:

Verificação de conformidade dos dados inseridos com a sintaxe do email (expressões regulares).
Exibição de mensagens de erro ao utilizador ao inserir dados inválidos.
Verificação da precisão e clareza das mensagens de erro.
Verificação de que o formulário não é enviado na presença de erros de validação.

Usabilidade & UI/UX:

Foco no campo ao carregar a página (se relevante).
Texto de placeholder com exemplo de formato (por exemplo, user@example.com).
Suporte para preenchimento automático do navegador.
Presença de uma etiqueta (<label>) para o campo.
O utilizador não pode inserir caracteres inválidos (se houver tal lógica no front-end).
Se houver uma máscara de entrada, verificar seu funcionamento.

Segurança:

Verificação de vulnerabilidades XSS: inserção de scripts, tags HTML (<script>alert('XSS')</script>) no campo.
Verificação de injeções (SQL/NoSQL): inserção de caracteres específicos que possam afetar as consultas ao banco de dados (' OR '1'='1).
Limitação de taxa (se o formulário envia email ou realiza ações que consomem recursos): verificar a limitação do número de tentativas de envio de um mesmo IP ou utilizador.

Automatização:

Escrita de testes unitários para funções de validação de email.
Escrita de testes de integração para verificar o funcionamento do campo no contexto do formulário.
Escrita de testes E2E para verificar o cenário completo de uso do formulário com o campo de email.

Exemplo de código para teste unitário de validação:

// Suponha que temos a função validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Exemplo simples de expressão regular
  return re.test(email);
}

// Testes unitários usando Jest
describe('validateEmail', () => {
  test('deve retornar true para um email válido', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('deve retornar false para um email inválido', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('deve retornar false para uma string vazia', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Exemplo de teste E2E usando Cypress:

// cypress/integration/email_field.spec.js
describe('Campo de entrada de email', () => {
  it('valida corretamente e exibe erro para entrada inválida', () => {
    cy.visit('/sua-pagina-do-formulario'); // URL da página com o formulário
    cy.get('#email-input').type('email-invalido'); // Inserção de email inválido
    cy.get('button[type="submit"]').click(); // Clicar no botão de enviar
    cy.get('.error-message').should('be.visible').and('contain', 'Formato de email incorreto'); // Verificação da mensagem de erro
  });

  it('permite enviar o formulário com um email válido', () => {
    cy.visit('/sua-pagina-do-formulario');
    cy.get('#email-input').type('valido@example.com');
    cy.get('button[type="submit"]').click();
    // Verificações adicionais: redirecionamento, mensagem de sucesso, etc.
    cy.url().should('include', '/sucesso'); // Verificação da URL após envio bem-sucedido
  });
});

Tabela com exemplos de casos de teste:

ID	Ação do utilizador	Resultado esperado
TC_01	Inserir `test@example.com`	O campo é considerado válido. A forma é enviada (se todos os campos estiverem preenchidos).
TC_02	Inserir `email-invalido`	O campo é considerado inválido. Uma mensagem de erro é exibida.
TC_03	Deixar o campo vazio e tentar enviar o formulário	O campo é considerado inválido (se obrigatório). Uma mensagem de erro é exibida.
TC_04	Inserir `test@example.co.uk`	O campo é considerado válido.
TC_05	Inserir `<script>alert('XSS')</script>`	O script não deve ser executado. O campo deve ser sanitizado ou validado.

Também é necessário considerar os requisitos específicos do projeto (por exemplo, suporte para certos domínios, sensibilidade a maiúsculas/minúsculas), testes em diferentes dispositivos e navegadores.

Como testar corretamente o campo de entrada de email?