Для какого функционала следует создавать UI тест-кейсы?

UI тест-кейсы следует создавать для критически важных пользовательских сценариев (E2E), где корректность интерфейса напрямую влияет на бизнес-результат. Их цель — проверить интеграцию всех слоёв приложения с точки зрения конечного пользователя.

Основные сценарии для UI-тестирования:

1. Сквозные (End-to-End) пользовательские потоки: регистрация, вход, оформление заказа, добавление товара в корзину.
2. Валидация форм и обратная связь: проверка сообщений об ошибках, поведения обязательных полей, корректности масок ввода.
3. Навигация и состояние UI: работа меню, кнопок, модальных окон, табов; правильность отображения данных, полученных с бэкенда.
4. Кросс-браузерная и кросс-платформенная совместимость.
5. Визуальные регрессии (с помощью инструментов вроде Percy, Applitools).

Пример UI-теста (Cypress):

describe('Login Form', () => {
  it('should display an error for invalid credentials', () => {
    cy.visit('/login');
    cy.get('[data-testid="email-input"]').type('invalid@email.com');
    cy.get('[data-testid="password-input"]').type('wrongpass');
    cy.get('[data-testid="submit-button"]').click();

    // Проверка UI-элемента с сообщением об ошибке
    cy.get('[data-testid="error-alert"]')
      .should('be.visible')
      .and('contain.text', 'Invalid email or password');
  });
});

Не рекомендуется покрывать UI-тестами редко используемый функционал или логику, которую эффективнее проверить юнит- или API-тестами.