Main/React & Next.js/Blueprints/Performance & QA/Комплексный пайплайн тестирования: Vitest + Playwright E2E + GitHub Actions
Back to «Performance & QA» cards
Performance & QA(ТЗ 9 из 10)
ТЗ: Комплексный пайплайн тестирования: Vitest + Playwright E2E + GitHub Actions
Performance & QA1 шагов • +5 XP

ТЗ: Комплексный пайплайн тестирования: Vitest + Playwright E2E + GitHub Actions

Инженерная спецификация непрерывного контроля качества: юнит- и интеграционные тесты Vitest (Testing Library), сквозные E2E сценарии в реальных браузерах Playwright и автоматические Quality Gates в CI.

~10 ч работыVitest 4React Testing Library@testing-library/user-eventPlaywright E2EGitHub Actions MatrixCoverage 90%+
+5 XP за шаг
Выполнено 0 из 1 шагов (0%)
Трудозатраты~10 рабочих часов
Фриланс вилка~$450 – $750 (€400 – €700)
Оценка веб-студии~$950 – $1,600 (€900 – €1500)

ТЗ заказчика (исходный бриф):

Мы хотим выпускать релизы каждый день и быть уверенными, что кнопка оплаты и добавление промокода работают. Время прогона CI не должно превышать 3 минут.
Ключевые требования:
  • •Тестирование пользовательского поведения без завязки на детали реализации (getByRole приоритет)
  • •E2E сценарий: от открытия каталога через поиск до оформления тестового заказа
  • •Шардинг тестов Playwright в GitHub Actions для параллельного прогона
  • •Автоматический отчет с видео и Trace Viewer при падении тестов в PR
Ограничения проекта:
  • •Категорический запрет на sleep() и произвольные тайм-ауты в тестах
  • •Строгое соблюдение AAA паттерна (Arrange, Act, Assert)
Критерии приёмки (KPI):
  • Время выполнения юнит-тестов < 30 секунд
  • Zero Flaky Tests (0 ложных падений в CI)

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 1

Интеграционный тест формы чекаута с UserEvent и ARIA ролями

~45 минСредний

Практическое руководство:

Написать надежный тест формы оформления заказа, эмулирующий реальные клики и набор текста через userEvent.setup().

Важные технические нюансы и подводные камни:

Не используйте устаревший fireEvent, так как он не воспроизводит реальную цепочку браузерных событий фокуса.

Архитектурная база (Почему выбрано такое решение):

Поиск по ARIA-ролям (getByRole) проверяет приложение точно так же, как его видит пользователь и вспомогательные технологии (скринридеры).

Совет эксперта (Best Practice):

Используйте userEvent.setup() до вызова render для корректной инициализации внутренних таймеров библиотеки.

Ожидаемый артефакт этапа:

Надежный тест формы чекаута без ложных срабатываний.

TYPESCRIPT
// __tests__/CheckoutForm.test.tsx
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi } from 'vitest'
import { CheckoutForm } from '@/components/checkout/CheckoutForm'

describe('CheckoutForm Integration', () => {
  it('валидирует поля и вызывает onSubmit при корректных данных', async () => {
    const user = userEvent.setup()
    const handleSubmit = vi.fn()

    render(<CheckoutForm onSubmit={handleSubmit} />)

    const nameInput = screen.getByRole('textbox', { name: /имя получателя/i })
    const emailInput = screen.getByRole('textbox', { name: /электронная почта/i })
    const submitBtn = screen.getByRole('button', { name: /подтвердить заказ/i })

    // Заполнение формы
    await user.type(nameInput, 'Иван Иванов')
    await user.type(emailInput, '[email protected]')
    await user.click(submitBtn)

    expect(handleSubmit).toHaveBeenCalledOnce()
    expect(handleSubmit).toHaveBeenCalledWith(
      expect.objectContaining({
        name: 'Иван Иванов',
        email: '[email protected]'
      })
    )
  })
})

Типичные грабли на этом ТЗ

1 антипаттерна

Что сдаём клиенту (Deliverables)

Чек-лист сдачи
Набор юнит- и интеграционных тестов Vitest
Сквозные E2E сценарии Playwright
GitHub Actions CI пайплайн с блокирующими Quality Gates