Тестирование поля ввода email включает проверку функциональности, валидации, удобства использования и безопасности.

Функциональное тестирование:

Ввод валидных адресов:
- 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.демо (для поддержки интернационализованных доменных имен - IDN)
Ввод невалидных адресов:
- Отсутствие @: testexample.com
- Несколько @: test@@example.com
- Неверный формат домена: test@example
- Отсутствие имени пользователя: @example.com
- Специальные символы в имени пользователя: te!st@example.com, te#st@example.com
- Специальные символы в домене: test@exa!mple.com
- Длинный адрес (проверка лимитов): a_very_long_email_address_that_exceeds_typical_limits@example.com (проверить лимиты согласно спецификации или здравому смыслу)
- Адрес с пробелами: test @example.com
- Адрес с некорректным синтаксисом: test@.com, test.@example.com
- Адрес с IP-адресом вместо домена (если не поддерживается): test@[192.168.1.1]
- Адрес с кириллицей (если не поддерживается IDN): тест@пример.рф
Пустое поле: Отправка формы с пустым полем.

Валидация:

Проверка соответствия введенных данных синтаксису email (регулярные выражения).
Отображение пользователю сообщений об ошибке при вводе невалидных данных.
Проверка сообщений об ошибке на точность и понятность.
Проверка, что форма не отправляется при наличии ошибок валидации.

Usability & UI/UX:

Фокус на поле при загрузке страницы (если уместно).
Placeholder-текст с примером формата (например, user@example.com).
Поддержка автозаполнения браузером.
Наличие метки (<label>) для поля.
Пользователь не может ввести недопустимые символы (если есть такая логика на фронтенде).
Если есть маска ввода, проверить ее работу.

Безопасность:

Проверка на XSS-уязвимости: ввод скриптов, HTML-тегов (<script>alert('XSS')</script>) в поле.
Проверка на инъекции (SQL/NoSQL): ввод специфических символов, которые могут повлиять на запросы к базе данных (' OR '1'='1).
Rate limiting (если форма отправляет email или совершает ресурсоемкие действия): проверка ограничения количества попыток отправки с одного IP или пользователя.

Автоматизация:

Написание юнит-тестов для функций валидации email.
Написание интеграционных тестов для проверки работы поля в контексте формы.
Написание E2E-тестов для проверки полного сценария использования формы с полем email.

Пример кода для юнит-теста валидации:

// Предположим, у нас есть функция validateEmail
function validateEmail(email) {
  const re = /\S+@\S+\.\S+/; // Простой пример регулярного выражения
  return re.test(email);
}

// Unit тесты с использованием 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);
  });
});

Пример E2E-теста с использованием 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 страницы с формой
    cy.get('#email-input').type('invalid-email'); // Ввод невалидного email
    cy.get('button[type="submit"]').click(); // Нажатие кнопки отправки (может потребоваться явный триггер валидации)
    cy.get('.error-message').should('be.visible').and('contain', 'Некорректный формат email'); // Проверка сообщения об ошибке
  });

  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();
    // Дальнейшие проверки: например, редирект, сообщение об успешной отправке
    cy.url().should('include', '/success'); // Пример проверки URL после успешной отправки
  });
});

Таблица с примерами тест-кейсов:

ID	Действие пользователя	Ожидаемый результат
TC_01	Ввод `test@example.com`	Поле считается валидным. Форма отправляется (если все поля заполнены).
TC_02	Ввод `invalid-email`	Поле считается невалидным. Отображается сообщение об ошибке.
TC_03	Оставить поле пустым и попытаться отправить форму	Поле считается невалидным (если обязательное). Отображается сообщение об ошибке.
TC_04	Ввод `test@example.co.uk`	Поле считается валидным.
TC_05	Ввод `<script>alert('XSS')</script>`	Скрипт не должен быть выполнен. Поле должно быть санировано или валидировано.

Необходимо также учитывать специфические требования проекта (например, поддержка определенных доменных зон, чувствительность к регистру), тестирование на разных устройствах и браузерах.

Как правильно тестировать поле для ввода адреса электронной почты?