Angular Academy · Урок

Интеграция с непрерывной интеграцией

Запускайте сквозные тесты в среде непрерывной интеграции

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

Зачем запускать E2E в CI

Тесты E2E наиболее полезны, когда они автоматически запускаются при каждом отправлении изменений или запросе на слияние. Непрерывная интеграция (CI) выявляет регрессии до слияния изменений, поэтому сломанный сценарий входа в систему незаметно не попадёт в рабочую среду.

Что нужно CI для запуска E2E

Задание CI должно установить зависимости, установить браузеры Playwright, собрать или запустить приложение Angular, а затем выполнить тесты без интерфейса. На машинах CI нет дисплея, поэтому по умолчанию тесты запускаются в безинтерфейсном режиме.

Установка браузеров в CI

Браузеры не добавляются в репозиторий. Установите их в конвейере с помощью установщика Playwright, включая зависимости ОС.

npm ci
npx playwright install --with-deps

Разрешение Playwright запускать приложение

Конфигурация webServer сообщает Playwright, что нужно запустить приложение перед тестами и остановить его после. В CI задайте reuseExistingServer: false, чтобы всегда запускался новый сервер.

// playwright.config.ts
export default {
  webServer: {
    command: 'ng serve --configuration production',
    url: 'http://localhost:4200',
    reuseExistingServer: !process.env.CI,
  },
};

Рабочий процесс GitHub Actions

Типичный рабочий процесс извлекает код, настраивает Node, устанавливает зависимости и браузеры, а затем запускает набор тестов.

# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

Флаги безинтерфейсного режима и CI

Playwright автоматически определяет CI по переменной окружения CI и изменяет поведение: повторно запускает неудачные тесты, запрещает test.only и осторожно использует большее число рабочих процессов. Вы также можете явно задать количество повторных запусков.

export default {
  retries: process.env.CI ? 2 : 0,
  forbidOnly: !!process.env.CI,
};

Публикация HTML-отчёта

Playwright создаёт HTML-отчёт. Загрузите его как артефакт CI, чтобы после выполнения можно было изучить ошибки, включая трассировки и снимки экрана.

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Запись трассировок при ошибках

Настройте запись трассировок только при первой повторной попытке. Это позволяет быстро выполнять тесты и одновременно получать полную запись любого сбоя для отладки.

export default {
  use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};

Разбиение для ускорения

Большие наборы тестов можно разделить между параллельными машинами с помощью --shard. Каждое задание CI выполняет свою часть, сокращая общее календарное время выполнения.

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

Кэширование для ускорения CI

Кэшируйте node_modules и двоичные файлы браузеров Playwright между запусками, чтобы установка не занимала большую часть времени сборки. Большинство поставщиков CI предлагают действие кэширования с ключом на основе файла блокировки.

Корректное завершение сборки с ошибкой

Playwright завершается с ненулевым кодом, если какой-либо тест завершается ошибкой. Благодаря этому CI помечает задание красным цветом и блокирует слияние. Не подавляйте этот код завершения с помощью || true, иначе сломанные тесты будут молча считаться пройденными.

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

Что устанавливает браузеры в CI?

Итоги

Запускайте E2E при каждом отправлении изменений: устанавливайте зависимости и браузеры (playwright install --with-deps), разрешайте webServer запускать приложение и выполняйте тесты без интерфейса с учётом повторных запусков в CI. Загружайте HTML-отчёт и трассировки как артефакты, разделяйте тесты для ускорения и позволяйте ненулевому коду завершения блокировать ошибочные слияния.

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

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

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

Чему я научусь в уроке «Интеграция с непрерывной интеграцией»?

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

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

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

Сколько времени занимает урок «Интеграция с непрерывной интеграцией»?

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

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

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

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

← Назад к Angular Academy