How to test an email address input field?

To test the email address input field, its functional and non-functional aspects need to be checked.

Test types:

1. Positive tests:

   • Entering valid addresses (with different domains, subdomains, special characters in the local part).
   • Entering addresses of various lengths within the limit.
   • Entering addresses with Cyrillic domains (IDN).

2. Negative tests:

   • Missing '@' symbol.
   • Missing domain (after '@').
   • Missing '.' in the domain.
   • Presence of invalid characters (spaces, special characters outside allowed positions).
   • Incorrect number of '.' in the domain.
   • Top-level domain shorter than 2 characters.
   • Empty field.
   • Entering only spaces.
   • Exceeding the maximum allowed address length.

3. UI/UX tests:

   • Correct display of the field and label.
   • Placeholder (if available).
   • Error messages (their text, placement, style).
   • Field state on focus, hover.
   • Accessibility (keyboard focus, screen readers).

4. Validation checks:

   • Client-side validation (front-end check, without sending data to server).
   • Server-side validation (check on backend after form submission).
   • Consistency between client and server validation.

5. Performance tests:

   • Validation speed on large data volumes (relevant for systems where the address is used as login or key).

6. Security tests:

   • Script injection (XSS).
   • SQL injection.
   • Brute force address guessing.

Test data examples:

• Valid:

  • test@example.com
  • firstname.lastname@example.co.uk
  • test+alias@example.com
  • test@example.com. (if allowed)
  • user123@sub.domain.example.com
  • test@xn--p1ai (for .рф domain)

• Invalid:

  • testexample.com (no '@')
  • test@ (no domain)
  • test@example (no '.')
  • test@example..com (double dot)
  • test.@example.com (dot before '@')
  • .test@example.com (dot at start)
  • test@example.c (short TLD)
  • test@example..ru (double dot)
  • test@example-.com (hyphen before dot)
  • test@-example.com (hyphen after '@')
  • test user@example.com (space)
  • " Manager @"example.com` (quotes)

Automation:

Automation uses frameworks (Selenium, Puppeteer, Cypress) for UI interaction and libraries for backend validation checks.

# Example of automated email field validation using Selenium (structural)

from selenium.webdriver import Chrome
from selenium.webdriver.common.by import By

# Assume the input field has locator By.ID, 'email_input'
EMAIL_INPUT_LOCATOR = (By.ID, 'email_input')
ERROR_MESSAGE_LOCATOR = (By.ID, 'email_error_message') # Locator for error message

def test_email_field_validation(driver):
    # Valid email test
    driver.find_element(*EMAIL_INPUT_LOCATOR).send_keys("test@example.com")
    # Wait for error message to disappear or be absent
    # Check that the field is considered valid (e.g., by CSS class or attribute)

    # Invalid email test
    driver.find_element(*EMAIL_INPUT_LOCATOR).clear()
    driver.find_element(*EMAIL_INPUT_LOCATOR).send_keys("invalid-email")
    # Wait for error message to appear
    error_message = driver.find_element(*ERROR_MESSAGE_LOCATOR)
    assert error_message.is_displayed()
    assert "Invalid email format" in error_message.text # Example of error message check

// Example sketch of UI validation test for Email field with TestNG and Selenium

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.testng.Assert;
import org.testng.annotations.Test;

public class EmailFieldTest {

    private WebDriver driver; // Initialization in @BeforeMethod

    @Test
    public void testValidEmailInput() {
        WebElement emailInput = driver.findElement(By.id("email_input")); // Example locator
        emailInput.sendKeys("valid.user@domain.co.uk");
        // Additional checks: no error message, valid field state
        WebElement errorMessage = driver.findElement(By.id("email_error_message")); // Example locator
        Assert.assertFalse(errorMessage.isDisplayed(), "Error message displayed for valid email");
    }

    @Test
    public void testInvalidEmailInputMissingAt() {
        WebElement emailInput = driver.findElement(By.id("email_input"));
        emailInput.sendKeys("invalid-email.com");
        // Action that triggers validation (e.g., click "Submit" button)
        driver.findElement(By.id("submit_button")).click(); // Example locator

        WebElement errorMessage = driver.findElement(By.id("email_error_message"));
        Assert.assertTrue(errorMessage.isDisplayed(), "Error message not displayed for invalid email (missing @)");
        // Check error message text
        Assert.assertTrue(errorMessage.getText().contains("Invalid format"), "Incorrect error message text");
    }

    // Add other tests for different invalid scenarios
}