Angular Academy · Урок

Обзор сквозного тестирования

Разберитесь в роли сквозных тестов

«Обзор сквозного тестирования» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Что означает сквозное тестирование

Сквозные тесты (E2E) проверяют приложение так, как им пользуется реальный пользователь: запускают его в настоящем браузере, открывают страницы, нажимают кнопки, вводят данные в формы и проверяют видимые элементы. Они проверяют совместную работу всего стека, а не только одного модуля.

Пирамида тестирования

В качественном наборе много быстрых модульных тестов, меньше интеграционных тестов и небольшое количество медленных, но очень ценных E2E-тестов. E2E находятся на вершине: каждый тест дает большой охват, но его запуск и сопровождение обходятся дороже всего.

Модульные: функция или компонент в изоляции
Интеграционные: несколько модулей вместе
E2E: запущенное приложение целиком

Что обнаруживают E2E, но не модульные тесты

E2E-тесты обнаруживают проблемы, видимые только при соединении реальных частей: ошибки маршрутизации, неработающую интеграцию с API, отсутствующий DOM после развертывания, CSS, скрывающий кнопку, или зацикленное перенаправление при аутентификации. Модульные тесты с подмененными зависимостями могут проходить, даже если реальное приложение не работает.

История Angular и E2E

В старых версиях Angular для E2E поставлялся Protractor. Protractor устарел и был удален из новых проектов. Сегодня Angular CLI позволяет выбрать сторонний инструмент для E2E; наиболее популярны Playwright и Cypress.

Почему Playwright

Playwright — современный быстрый фреймворк для E2E от Microsoft. Он управляет Chromium, Firefox и WebKit, автоматически ждет появления элементов, изолирует тесты в новых контекстах браузера и предоставляет отличные инструменты отладки. В этом курсе используется Playwright.

Добавление Playwright в Angular

Создать заготовку Playwright можно с помощью собственного установщика. Он создает playwright.config.ts и папку с примером теста.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Структура E2E-теста

E2E-тест запускает приложение, выполняет действия пользователя и проверяет страницу. Последовательность такова: подготовка (переход), действие (взаимодействие), проверка (проверка видимого результата).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

E2E выполняются на реальном сервере

Для E2E приложение Angular должно действительно работать. Обычно конфигурация запускает ng serve (или предоставляет сборку для рабочей среды) и указывает тестам URL через baseURL и запись webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Делайте наборы E2E небольшими и важными

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

Нестабильность и детерминированность

Главная проблема E2E — нестабильность: тесты периодически завершаются с ошибкой. Избегайте фиксированных задержек sleep; полагайтесь на автоматическое ожидание и проверки Playwright. Управляйте тестовыми данными, чтобы каждый запуск начинался с известного состояния.

E2E и тестирование компонентов

Тесты компонентов Angular (TestBed) проверяют компонент в искусственной среде. E2E проверяют развернутое приложение в настоящем браузере. Они дополняют друг друга: используйте TestBed для быстрых проверок логики и DOM, а E2E — чтобы убедиться в работоспособности всего продукта.

Быстрая проверка

Чем E2E отличаются от модульных тестов?

Итоги

E2E-тесты запускают все приложение в настоящем браузере и обнаруживают ошибки интеграции и маршрутизации, которые не замечают модульные тесты. Они находятся на вершине пирамиды тестирования: их мало, они медленные, но очень ценны. Теперь в проектах Angular используются такие инструменты, как Playwright, которые запускают сервер и проверяют важные пользовательские сценарии.

Часто задаваемые вопросы

Урок «Обзор сквозного тестирования» бесплатный?

Да — полный текст урока «Обзор сквозного тестирования» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Обзор сквозного тестирования»?

Разберитесь в роли сквозных тестов Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Обзор сквозного тестирования»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy