Налаштування тестового середовища для веб-проекту: покрокове керівництво

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування тестового середовища для веб-проекту: покрокове керівництво
Середній
від 1 дня до 3 днів
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1358
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1250
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    956
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1188
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    929
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    947

Уявіть: ви запускаєте тести перед релізом, а половина падає з помилками підключення до БД або зависає через конкурентні запити. Знайомо? Найчастіше проблема не в коді, а в тестовому середовищі — воно сконфігуроване нашвидкуруч, без ізоляції та відтворюваності. У таких випадках ви витрачаєте години на відлагодження інфраструктури замість тестування нового функціоналу. Це безпосередньо впливає на швидкість релізів: команди з якісним тестовим середовищем викочують зміни в 2-3 рази частіше.

Ми налаштовуємо середовище так, щоб тести літали: Docker Compose з тимчасовими базами в RAM (tmpfs), транзакції після кожного кейсу та CI/CD, який ганяє паралельні джоби за хвилини. У результаті — стабільні тести, які виконуються за 2-3 хвилини замість звичайних 15-20. Наша команда має 8 років досвіду в цій галузі — ми налаштували тестові середовища для 50+ веб-проектів. Економія часу розробників після нашого налаштування досягає 60%.

Чому ізоляція тестового середовища критична?

Без ізоляції тести впливають один на одного: один видаляє запис, а інший його чекає. Або черга листів переповнюється, і асерти падають. Наші інженери використовують два перевірених підходи:

Метод Швидкість Ізоляція Підходить для
DatabaseTransactions ⚡ Швидко (відкат однією транзакцією) Висока Unit-тести, тести з HTTP-клієнтом не рекомендуються
RefreshDatabase 🐢 Повільно (перестворення БД) Повна Feature-тести, E2E-тести

Другий варіант надійніший, але довший — тому ми використовуємо флаг <env name="DB_CONNECTION" value="sqlite"/> з :memory: для модульних тестів і окремий контейнер Postgres для інтеграційних. Так досягається баланс швидкості та ізоляції.

Як ми налаштовуємо Docker Compose для тестів?

Ми пишемо окремий docker-compose.test.yml, який піднімає копію продакшен-середовища, але з тестовими параметрами: синхронні черги (QUEUE_CONNECTION=sync), перехоплення листів (MAIL_MAILER=array) і кеш у пам'яті (CACHE_DRIVER=array). Ключова фішка — база даних на tmpfs (файлова система в RAM): це прискорює міграції та вибірки в 3-5 разів.

# docker-compose.test.yml
services:
  app:
    build:
      context: .
      target: test
    environment:
      APP_ENV: testing
      DB_HOST: db
      DB_DATABASE: testdb
      REDIS_HOST: redis
      QUEUE_CONNECTION: sync    # черги синхронно в тестах
      MAIL_MAILER: array        # перехоплення листів у масив
      CACHE_DRIVER: array       # кеш у пам'яті
    depends_on:
      db: { condition: service_healthy }
      redis: { condition: service_healthy }

  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_DB: testdb
      POSTGRES_USER: test
      POSTGRES_PASSWORD: test
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U test"]
      interval: 5s
      timeout: 3s
      retries: 5
    tmpfs:
      - /var/lib/postgresql/data   # БД в RAM — швидше

  redis:
    image: redis:7-alpine
    healthcheck:
      test: ["CMD", "redis-cli", "ping"]
      interval: 5s

Як конфігурувати Laravel для тестів?

У phpunit.xml ми задаємо оточення — це гарантує, що жоден тест випадково не смикне продакшен-базу. Приклад конфігурації для тестової бази даних:

// phpunit.xml
<php>
    <env name="APP_ENV"          value="testing"/>
    <env name="DB_CONNECTION"    value="sqlite"/>
    <env name="DB_DATABASE"      value=":memory:"/>
    <env name="CACHE_DRIVER"     value="array"/>
    <env name="SESSION_DRIVER"   value="array"/>
    <env name="QUEUE_CONNECTION" value="sync"/>
    <env name="MAIL_MAILER"      value="array"/>
</php>

Базовий TestCase використовує RefreshDatabase — він перестворює БД перед кожним тестом. Для тестів з HTTP-клієнтом (наприклад, $this->post()) транзакції можуть не відкотити дані, тому ми віддаємо перевагу RefreshDatabase.

// Базовий TestCase з транзакціями
abstract class TestCase extends BaseTestCase
{
    use RefreshDatabase;

    protected function setUp(): void
    {
        parent::setUp();
        $this->withoutVite();
        $this->seed(TestDatabaseSeeder::class);
    }
}

Детальніше про тестування в Laravel: Laravel Testing.

Фабрики тестових даних

Щоб тести були реалістичними, ми пишемо фабрики для ключових моделей. Приклад UserFactory з ролями:

// database/factories/UserFactory.php
class UserFactory extends Factory
{
    public function definition(): array
    {
        return [
            'name'              => $this->faker->name(),
            'email'             => $this->faker->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password'          => Hash::make('password'),
        ];
    }

    public function admin(): static
    {
        return $this->afterCreating(fn(User $user) =>
            $user->assignRole('admin')
        );
    }

    public function unverified(): static
    {
        return $this->state(['email_verified_at' => null]);
    }
}

Використовуємо в тестах: $user = User::factory()->admin()->create(); — мінімум коду, максимум виразності.

CI/CD — GitHub Actions

Налаштовуємо два воркфлоу: для юніт-тестів (SQLite, швидкі) та для інтеграційних (Postgres у сервісі). Паралельний запуск скорочує загальний час прогону в 2-3 рази.

name: Tests

on: [push, pull_request]

jobs:
  unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: shivammathur/setup-php@v2
        with: { php-version: '8.3', extensions: 'sqlite3' }
      - run: composer install --no-interaction
      - run: php artisan test --parallel --testsuite=Unit

  integration:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:16
        env:
          POSTGRES_DB: testdb
          POSTGRES_PASSWORD: test
        ports: ['5432:5432']
        options: --health-cmd pg_isready --health-interval 5s
    env:
      DB_CONNECTION: pgsql
      DB_HOST: localhost
      DB_DATABASE: testdb
      DB_PASSWORD: test
    steps:
      - uses: actions/checkout@v4
      - run: composer install
      - run: php artisan test --testsuite=Feature

Що входить у налаштування тестового середовища

Ми готуємо під ключ:

  • Проектування архітектури тестової середи (Docker + CI).
  • Налаштування Docker Compose із продакшен-залежностями, але тестовими налаштуваннями.
  • Конфігурацію PHPUnit / Pest із паралельним запуском (--parallel).
  • Фабрики даних (UserFactory, ProductFactory) зі станами під сценарії.
  • Моки зовнішніх сервісів (Stripe, SendGrid, будь-які API).
  • Інтеграцію з GitHub Actions (юніт + інтеграційні джоби).
  • Документацію щодо запуску та доопрацювання тестів.
  • Навчання команди (воркшоп на 2 години).

Після здачі ви отримаєте репозиторій, готовий до тестування на кожному коміті. Зв'яжіться з нами — ми оцінимо ваш проект і запропонуємо терміни. Отримайте консультацію з налаштування тестового середовища вже сьогодні.

Етапи налаштування тестового середовища

Етап Тривалість Опис
Аналіз проекту 0.5–1 день Вивчення архітектури, залежностей, поточного тестового покриття
Підготовка Docker-середовища 1–2 дні Написання docker-compose.test.yml, налаштування всіх сервісів
Конфігурація тест-ранера 0.5 дня PHPUnit/Pest, паралельний запуск, конфігурація бази даних
Фабрики даних і моки 1–2 дні Створення фабрик для моделей, моків зовнішніх сервісів
Інтеграція CI/CD 0.5 дня GitHub Actions, розділення юніт/інтеграційних тестів
Документація та навчання 0.5 дня Readme, опис запуску, воркшоп для команди

Економія часу та зниження витрат на підтримку — результат, який ви отримаєте. Замовте налаштування тестового середовища та переконайтеся в стабільності тестів.

Чому юніт-тести важливі, але не панацея?

Баг, знайдений юніт-тестом, коштує хвилини виправлення. Той самий баг у продакшені — години інциденту, компенсації та втрата довіри. На проекті інтернет-магазину помилка в розрахунку знижки пройшла ручне тестування, потрапила в прод і за 4 години обробила 37 замовлень за нульовою ціною. Автотест на граничні випадки розрахунку зловив би її при першому ж push. Оцініть свій проект — ми проведемо аудит поточного покриття і дамо рекомендації.

Jest — стандарт для JavaScript/TypeScript, але юніт-тести виправдані тільки там, де є ізольована логіка: функції трансформації, валідатори, бізнес-правила, утиліти. Тестувати React-компоненти через Jest + Testing Library правильно для поведінкових тестів: «кнопка з'являється після завантаження», «форма показує помилку при порожньому email». Снепшот-тести (toMatchSnapshot) — пастка: вони ламаються при будь-якій зміні верстки і стають шумом, який розробники оновлюють не дивлячись. Покриття коду (code coverage) — погана метрика якості: 80% coverage можна отримати тестами, які нічого не перевіряють. Coverage показує, що код виконався, а не те, що він працює правильно.

Критерій Jest Vitest
Швидкість для великих проектів Середня (Babel-трансформація) В 10–20 разів швидше (ES modules)
Інтеграція з Vite Через плагін Нативна
Монорепозиторії Вимагає конфігурації З коробки

Vitest як альтернатива Jest для Vite-проектів: в 10–20 разів швидше завдяки нативним ES modules без трансформації через Babel. Для монорепозиторіїв з тисячами тестів різниця у швидкості відчутна. Детальніше про юніт-тестування.

Як налаштувати E2E тести, які не будуть flaky?

Playwright обійшов Cypress за ключовими параметрами: нативна підтримка multi-tab, multi-origin, iframe; паралельне виконання на рівні тестів; WebKit, Firefox, Chromium з коробки; немає iframe для додатку — тести працюють в реальному браузері.

Playwright codegen записує дії та генерує тест — хороша точка старту, але згенерований код потрібно рефакторити. Локатори за text content крихкі: getByRole('button', { name: 'Оформить заказ' }) — стійкіше, ніж locator('.btn-primary').

Page Object Model — стандарт організації E2E тестів. Кожна сторінка — окремий клас з методами замість прямих локаторів. Коли кнопка переїхала з хедера в сайдбар — міняємо в одному місці, не шукаємо по всіх тестах.

Як уникнути flaky тестів? Типова проблема — flaky tests. Причини: race condition між запитом і рендером, анімації без очікування, залежність від зовнішніх API. Рішення: `page.waitForResponse()` замість `page.waitForTimeout()`, мокування зовнішніх API через `page.route()`.
// Погано
await page.click('#submit');
await page.waitForTimeout(2000);
await expect(page.locator('.success')).toBeVisible();

// Добре
await page.click('#submit');
await page.waitForResponse(resp =>
  resp.url().includes('/api/orders') && resp.status() === 201
);
await expect(page.getByRole('alert', { name: /заказ создан/i })).toBeVisible();

Наші інженери гарантують стабільність тестів у CI. Документація Playwright — основний інструмент на проектах з мільйонами користувачів.

Навантажувальне тестування з k6

k6 — інструмент для навантажувального тестування з JavaScript API. Сценарії пишуться як код, версіонуються в git, запускаються в CI. Три основних сценарії:

  • Spike test — різке зростання навантаження: 0 → 1000 користувачів за 30 секунд. Імітує запуск рекламної кампанії. Показує здатність системи реагувати на піки.
  • Soak test — стабільне навантаження на 2–4 години. Виявляє memory leaks, connection pool exhaustion, деградацію продуктивності.
  • Stress test — навантаження вище розрахункової (150–200% від очікуваного піку). Показує точку відмови та graceful degradation.

Порогові значення:

thresholds: {
  http_req_duration: ['p95<500', 'p99<1000'],
  http_req_failed: ['rate<0.01'],
}

p95 < 500ms означає: 95% запитів відповідають швидше півсекунди. Якщо поріг не виконується — k6 завершується з кодом помилки, CI-пайплайн падає.

На одному проекті інтернет-магазину ми виявили деградацію API на 4-й годині тесту: p95 зріс з 200ms до 2s через витік з'єднань. Після оптимізації клієнт заощадив значну суму на інцидентах та зайвих ресурсах. Отримайте аналогічний аудит вашого проекту — замовте навантажувальне тестування.

Як Core Web Vitals впливають на ранжування?

Google використовує Core Web Vitals у ранжуванні. Lighthouse CLI в CI-пайплайні: при кожному деплої перевіряємо, що LCP < 2.5s, CLS < 0.1, INP < 200ms. Детальніше про веб-продуктивність. Реальні проблеми, які Lighthouse знаходить:

  • Hero image без атрибутів width/height: CLS 0.35 при завантаженні.
  • JavaScript-бандл 2.1MB синхронно блокує парсинг: INP 450ms.
  • Шрифти без font-display: swap: невидимий текст до завантаження шрифту (FOIT).
  • Неоптимізований hero image 4MB: LCP 8.2s.

Lighthouse CI (lhci) зберігає історію метрик і надсилає коментар до PR з деградацією. За даними Google, 53% користувачів залишають сайт при завантаженні довше 3 секунд — наші тести запобігають таким втратам.

Піраміда тестування в проекті

Рівень Інструмент Кількість Швидкість
Юніт Vitest/Jest Багато (тисячі) <5 хв
Інтеграція Vitest + supertest Середня 5–15 хв
E2E Playwright Мало (happy path) 10–30 хв
Навантаження k6 За розкладом 30–60 хв
Продуктивність Lighthouse CI При кожному деплої 5 хв

Що входить в роботу?

  • Аудит поточного покриття та визначення критичних user flows.
  • Написання unit-тестів для ключової бізнес-логіки, інтеграційних тестів для API, E2E для сценаріїв користувача.
  • Налаштування паралельного виконання в CI (sharded workers для Playwright).
  • Навантажувальне тестування зі звітом та рекомендаціями.
  • Документація за тест-кейсами, навчання вашої команди роботі з тестами.
  • Гарантійна підтримка 1 місяць після впровадження.

Процес роботи

  1. Аналітика — аудит поточного тестування, виявлення слабких місць, визначення пріоритетів.
  2. Проектування — вибір інструментів, написання тест-плану, узгодження.
  3. Реалізація — написання тестів, інтеграція в CI.
  4. Тестування — прогін всіх рівнів, аналіз результатів, виправлення помилок.
  5. Деплой — запуск в прод, моніторинг метрик, навчання команди.

Терміни

Налаштування повного тест-пайплайна (Jest + Playwright + k6 + Lighthouse CI) з нуля: 2–4 тижні. Покриття E2E-тестами існуючого проекту (20–30 сценаріїв): 3–6 тижнів. Навантажувальне тестування зі звітом та рекомендаціями: 1–2 тижні. Вартість розраховується індивідуально після аудиту.

Готові обговорити ваш проект? Залиште заявку — ми проведемо аудит поточного тестування безкоштовно і запропонуємо план з економією до 60% часу на інциденти. Отримайте консультацію з тестування веб-додатків — напишіть нам.