How to properly test an email address input field?

Testing the email input field includes checking functionality, validation, usability, and security.

Functional testing:

• Entering valid addresses:
  • 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.демо (for supporting internationalized domain names - IDN)
• Entering invalid addresses:
  • Missing @: testexample.com
  • Multiple @: test@@example.com
  • Invalid domain format: test@example
  • Missing username: @example.com
  • Special characters in username: te!st@example.com, te#st@example.com
  • Special characters in domain: test@exa!mple.com
  • Long address (testing limits): a_very_long_email_address_that_exceeds_typical_limits@example.com (check limits according to specifications or common sense)
  • Address with spaces: test @example.com
  • Address with incorrect syntax: test@.com, test.@example.com
  • Address with IP address instead of domain (if not supported): test@[192.168.1.1]
  • Address with Cyrillic characters (if IDN not supported): тест@пример.рф
• Empty field: Submitting the form with an empty field.

Validation:

• Checking that entered data matches email syntax (regular expressions).
• Displaying error messages to the user when invalid data is entered.
• Checking the accuracy and clarity of error messages.
• Ensuring the form does not submit when there are validation errors.

Usability & UI/UX:

• Focus on the field when the page loads (if appropriate).
• Placeholder text with an example format (for example, user@example.com).
• Support for browser autofill.
• Presence of a <label> for the field.
• User cannot enter invalid characters (if such front-end logic exists).
• If input masking is used, verify its functionality.

Security:

• Check for XSS vulnerabilities: input of scripts, HTML tags (<script>alert('XSS')</script>) in the field.
• Check for injections (SQL/NoSQL): input of specific characters that could affect database queries (' OR '1'='1).
• Rate limiting (if the form sends emails or performs resource-intensive actions): check restrictions on the number of attempts from one IP or user.

Automation:

• Writing unit tests for email validation functions.
• Writing integration tests to verify the field's operation within the form.
• Writing E2E tests to verify the complete usage scenario of the form with the email field.

Example code for a unit test of validation:

// Assume we have a function validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Simple regex example
  return re.test(email);
}

// Unit tests using Jest
describe('validateEmail', () => {
  test('should return true for a valid email', () => {
    expect(validateEmail('test@example.com')).toBe(true);
    expect(validateEmail('firstname.lastname@example.com')).toBe(true);
  });

  test('should return false for an invalid email', () => {
    expect(validateEmail('testexample.com')).toBe(false);
    expect(validateEmail('test@example')).toBe(false);
    expect(validateEmail('@example.com')).toBe(false);
  });

  test('should return false for an empty string', () => {
    expect(validateEmail('')).toBe(false);
  });
});

Example E2E test using Cypress:

// cypress/integration/email_field.spec.js
describe('Email Input Field', () => {
  it('properly validates and displays error for invalid input', () => {
    cy.visit('/your-form-page'); // URL of the form page
    cy.get('#email-input').type('invalid-email'); // Enter invalid email
    cy.get('button[type="submit"]').click(); // Submit the form
    cy.get('.error-message').should('be.visible').and('contain', 'Invalid email format'); // Check error message
  });

  it('allows submitting the form with a valid email', () => {
    cy.visit('/your-form-page');
    cy.get('#email-input').type('valid@example.com');
    cy.get('button[type="submit"]').click();
    // Further checks: redirect, success message, etc.
    cy.url().should('include', '/success'); // Example URL check after successful submission
  });
});

Sample test case table:

ID	User action	Expected result
TC_01	Enter test@example.com	Field is considered valid. Form submits (if all fields are filled).
TC_02	Enter invalid-email	Field is considered invalid. Error message is displayed.
TC_03	Leave the field empty and try to submit the form	Field is invalid (if required). Error message is displayed.
TC_04	Enter test@example.co.uk	Field is considered valid.
TC_05	Enter <script>alert('XSS')</script>	Script should not be executed. Field should be sanitized or validated.

Additional project-specific requirements (e.g., support for certain domain zones, case sensitivity), testing on different devices and browsers should also be considered.