На какие основные компоненты (с точки зрения тестирования) можно разбить веб-приложение?

Ответ

С точки зрения тестировщика, приложение разбивается на слои, каждый из которых требует своих подходов к тестированию:

  1. Пользовательский интерфейс (UI / Frontend): Визуальная часть (HTML, CSS, JavaScript-фреймворки). Тестируется через:

    • E2E-тесты (Selenium, Playwright, Cypress) — проверка комплексных сценариев.
    • Визуальное регрессионное тестирование (Applitools, Percy).
    • Кросс-браузерное и кросс-платформенное тестирование.
  2. Серверная логика и API (Backend): "Мозг" приложения. Основной объект для:

    • API-тестирования (REST, GraphQL, gRPC) — проверка эндпоинтов, статус-кодов, схем JSON, бизнес-логики.
    • Интеграционного тестирования — проверка взаимодействия между сервисами (например, сервис заказов и сервис оплаты).
  3. База данных (Database): Тестируется целостность данных, корректность миграций, работа триггеров и хранимых процедур. Используются SQL-запросы для проверки состояния данных после выполнения тестов.

  4. Интеграции с внешними сервисами: Платежные шлюзы, почтовые сервисы, SMS-провайдеры. Тестируются с помощью моков (mocks) и стабов (stubs) в автотестах, чтобы изолировать тест от нестабильности внешних систем.

  5. Инфраструктура и конфигурация: Тестирование развертывания (deployment), конфигурационных файлов, работы в разных средах (dev, staging, prod).

Стратегия тестирования строится на комбинации проверок этих слоев: юнит-тесты для логики, интеграционные для API и БД, E2E для критичных пользовательских сценариев. Это позволяет находить дефекты на ранних этапах и снижать стоимость их исправления.

Ответ 18+ 🔞

Давай разберем эту всю кухню тестирования, а то как посмотришь на эти слои — волнение ебать, овердохуища всего. Но на самом деле, если по полочкам, то всё логично, как бутерброд с колбасой: каждый слой жрёт свои таблетки.

Смотри, приложение — это как многослойный пирог, только вместо вкусняшки там сплошные баги, которые ждут своего часа. И к каждому слою свой подход, иначе нихуя не найдёшь.

  1. Лицо проекта, или Пользовательский интерфейс (UI / Frontend). Ну, это то, во что тыкает юзер. Вся эта мишура из HTML, CSS и этих ваших React-ов с Vue. Тут главное — чтобы не разъехалось, не поломалось и не вызвало у человека желание швырнуть ноутбук об стену.

    • E2E-тесты (типа Selenium, Playwright) — это когда ты заставляешь робота пройти весь путь, как живой дурак: залогиниться, купить тапки, оплатить. Если робот споткнётся — пиши пропало, где-то косяк.
    • Визуальное регрессионное тестирование — вообще хитрая жопа. Ты вроде поменял одну кнопку, а оно тебе полстраницы съехало. Эти штуки (типа Applitools) делают скриншоты и кричат, если что-то встало не так.
    • Кросс-браузерное тестирование — святое дело. Потому что в Хроме всё летает, а в каком-нибудь древнем Эксплорере твой сайт выглядит, будто его делал мартышлюшка с клавиатурой. Надо проверять везде.
  2. Мозги, или Серверная логика (Backend). Тут уже не до красивостей. Работает логика или нет? API не гонит хуйню? Это основа основ.

    • API-тестирование — твой лучший друг. Ты долбишь по эндпоинтам запросами (REST, GraphQL), смотришь, что тебе отдаёт сервер. Статус-код 200? JSON не кривой? Логика вычисления скидки не ебёт клиента? Вот это всё.
    • Интеграционное тестирование — проверяешь, как разные сервисы друг с другом общаются. Например, сервис заказов сказал сервису оплаты: «Спиши бабки!». А сервис оплаты ему: «Пошёл на хуй, карта невалидная». Они друг друга поняли? Отлично.
  3. Хранилище, или База данных. Тут доверия ебать ноль. Написал ты код, вроде данные сохраняются. А на деле — нихуя. Проверяешь: записалось ли в таблицу то, что нужно? Миграции не сломали ли всё к чертям? Триггеры не творят какую-то дичь? Просто лезешь SQL-запросами и смотришь, что там наворотили.

  4. Сторонние шлюзы (Интеграции). Платежки, смс-ки, почта. Вот это самое больное место, потому что эти сервисы живут своей жизнью. В автотестах их мокают (заменяют заглушками). То есть ты не ждёшь реального письма от почтового сервиса, а просто говоришь: «Да похуй, считай, что оно ушло». Иначе твои тесты будут падать каждый раз, когда у провайдера чих-пых.

  5. Инфраструктура. А это, чувак, вообще тёмный лес. Развернулось ли приложение на продакшене? Конфиги не перепутались? Переменные окружения на месте? Бывает, на тестовой среде всё работает, а выкатили — и накрылось медным тазом, потому что забыли какой-нибудь файлик.

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