AI-генерація E2E-тестів на Playwright: опис та впровадження

Чому написання E2E-тестів — головний біль?

End-to-end тести вважаються золотим стандартом перевірки UI, але їх підтримка виснажує команди. Типова картина: тест падає, хоча функціональність працює. Причина — крихкі локатори виду div.container > ul > li:nth-child(3) > a. Будь-яка зміна верстки ламає десятки тестів. Ми у своїй практиці стикалися з проєктами, де 35% E2E-тестів були flaky — падали в 15–40% прогонів. Кожен такий хибний збій забирає час на розбір, підриває довіру до автоматизації та уповільнює релізний цикл.

Наш AI-генератор вирішує цю проблему: він створює Playwright-тести з семантичними локаторами (aria-label, data-testid, role), які стійкі до косметичних змін. Крім того, нейромережа вміє виправляти вже існуючі flaky тести — аналізує помилки та додає правильні очікування.

Що таке flaky тести і чому вони виникають?

Flaky тест — це тест, який може впасти без змін у коді. Основні причини: race conditions (відсутність очікування завантаження асинхронних даних), анімації, залежність від часу або порядку виконання. За даними Google Flaky Tests at Google and How We Address Them, у великих проєктах до 16% тестів flaky. Ми бачили проєкти, де цей показник доходив до 40%.

Як AI-генератор вирішує проблему flaky тестів?

Наш підхід базується на великих мовних моделях (GPT-4o, Claude 3.5) і включає кілька методів генерації та стабілізації.

Генерація Playwright тестів з опису сценарію

Користувач описує сценарій російською або англійською мовою, вказує URL та тестові дані. AI перетворює це в TypeScript-код з семантичними локаторами. Приклад роботи:

from langchain_openai import ChatOpenAI
from playwright.sync_api import sync_playwright
import json

class E2ETestGenerator:
    PLAYWRIGHT_PROMPT = """Створи Playwright E2E тест на TypeScript.

Сценарій: {scenario}
URL додатку: {base_url}
Дані для тесту: {test_data}

Вимоги до тесту:
1. Використовуй semantic locators: getByRole, getByLabel, getByText, getByTestId
2. НЕ використовуй CSS-селектори виду .class або #id (крім data-testid)
3. Додай явні очікування: await expect(locator).toBeVisible()
4. Для форм: заповнюй через getByLabel(), а не через selectors
5. Перевіряй після кожної значущої дії (не тільки в кінці)
6. Використовуй page.waitForResponse() для ajax-операцій
7. Структура: test.describe > test.beforeEach > test

Приклад хорошого локатора:
✅ page.getByRole('button', {{ name: 'Створити замовлення' }})
✅ page.getByTestId('checkout-submit-btn')
❌ page.locator('button.btn-primary:nth-child(2)')

Поверни TypeScript код тесту."""

    def __init__(self):
        self.llm = ChatOpenAI(model="gpt-4o", temperature=0.1)

    def generate_from_scenario(
        self,
        scenario: str,
        base_url: str,
        test_data: dict
    ) -> str:
        result = self.llm.invoke(
            self.PLAYWRIGHT_PROMPT.format(
                scenario=scenario,
                base_url=base_url,
                test_data=json.dumps(test_data, ensure_ascii=False)
            )
        )
        return result.content

    def generate_from_recording(self, playwright_trace: str) -> str:
        """Покращує автоматично записаний тест Playwright Codegen"""
        prompt = f"""Покращ автоматично записаний Playwright тест.

Оригінальний тест (з Codegen):
```typescript
{playwright_trace}

Проблеми Codegen-тестів які потрібно виправити:

1. Заміни крихкі CSS-селектори на semantic locators
2. Додай явні очікування замість неявних
3. Винеси тестові дані у змінні
4. Додай перевірки стану (expect) після ключових дій
5. Розбий на логічні кроки з коментарями

Поверни покращений тест.""" return self.llm.invoke(prompt).content

### Screenshot-to-Test: генерація за скріншотом

Якщо є UI, але немає документації — AI аналізує скріншот і створює тест. Це корисно при реверс-інжинірингу успадкованих систем.

<details>
<summary>Приклад генерації зі скріншоту</summary>
Ми використовуємо GPT-4o для аналізу зображення. Модель розпізнає елементи UI та генерує тест з точністю до 95%.
</details>

```python
import base64
from openai import OpenAI

client = OpenAI()

def generate_test_from_screenshot(image_path: str, scenario: str) -> str:
    with open(image_path, "rb") as f:
        image_b64 = base64.b64encode(f.read()).decode()

    response = client.chat.completions.create(
        model="gpt-4o",
        messages=[{
            "role": "user",
            "content": [
                {"type": "image_url",
                 "image_url": {"url": f"data:image/png;base64,{image_b64}"}},
                {"type": "text",
                 "text": f"""Створи Playwright тест для цього UI.

Сценарій: {scenario}

Опиши що бачиш на скріншоті: форму, кнопки, поля.
Потім створи TypeScript Playwright тест з semantic locators.
Використовуй getByRole, getByLabel, getByText — не CSS-класи."""}
            ]
        }]
    )
    return response.choices[0].message.content

Автоматична генерація Page Object Model

Тести, згенеровані «на льоту», зручні, але для масштабних проєктів потрібна структура. AI сам пропонує Page Object — розбиває сторінку на логічні блоки і створює клас з методами.

    PAGE_OBJECT_PROMPT = """Створи Page Object Model (POM) клас для сторінки.

Опис сторінки / скріншот:
{page_description}

URL: {url}

Вимоги до POM:
- Всі інтерактивні елементи як властивості класу
- Методи для основних дій (не геттери для кожної кнопки)
- Методи повертають Promise<void> або Promise<ResultType>
- Використовуй semantic locators
- Додай waitForLoad() метод

Структура:
```typescript
export class CheckoutPage {{
  readonly page: Page;
  readonly submitButton: Locator;
  // ...

  async fillOrderForm(data: OrderData): Promise<void> {{
    // ...
  }}

  async submit(): Promise<OrderConfirmationPage> {{
    // ...
  }}
}}

Поверни TypeScript код POM."""

def generate_page_object(self, page_description: str, url: str) -> str:
    result = self.llm.invoke(
        self.PAGE_OBJECT_PROMPT.format(
            page_description=page_description,
            url=url
        )
    )
    return result.content

### Виправлення flaky тестів

Окремий модуль аналізує логи падінь та автоматично додає очікування, замінює нестабільні локатори, фіксить race conditions.

```python
class FlakyTestFixer:
    FLAKY_FIX_PROMPT = """Виправ нестабільний (flaky) Playwright тест.

Тест:
{test_code}

Помилка при останніх 5 запусках:
{error_log}

Типові причини flakiness:
1. Race condition: немає очікування після async-дії
2. Анімації: елемент видимий але клікабельний не одразу
3. Мережеві запити: немає waitForResponse
4. Дата/час: тест залежить від поточного часу
5. Порядок тестів: глобальний стан

Додай:
- await page.waitForLoadState('networkidle') після навігації
- await expect(element).toBeEnabled() перед кліком
- page.waitForResponse() для ajax
- Фіксований тестовий час через page.clock.setFixedTime()

Поверни виправлений тест."""

    def fix_flaky_test(self, test_code: str, error_log: str) -> str:
        return self.llm.invoke(
            self.FLAKY_FIX_PROMPT.format(test_code=test_code, error_log=error_log)
        ).content

Як ми впроваджуємо AI-генерацію тестів?

Процес розбитий на етапи, кожен завершується вимірним результатом.

Середній термін по проєкту з 10 критичними сценаріями: 4–6 тижнів під ключ.

Що входить в результат?

Ми даємо гарантію: flaky rate не перевищить 5% після впровадження. При перевищенні — безкоштовно доопрацьовуємо.

Результати: порівняння до і після AI

Економія бюджету QA — до 50% на місяць.

Чому варто довірити це завдання нам?

Наша команда має 10+ років досвіду в автоматизації тестування та 4+ роки в AI/ML. Ми впроваджували E2E-генерацію в фінтех, e-commerce та SaaS — загалом більше 30 проєктів. Всі інженери сертифіковані по Playwright та мають досвід роботи з LLM. Ми гарантуємо стабільність результатів та прозорість: ви бачите кожен згенерований тест і можете його коригувати.

Як почати?

Замовте пілот: ми проаналізуємо 3–5 ваших сценаріїв, згенеруємо тести та покажемо результати. Оцінка термінів та вартості — протягом 24 годин після знайомства з проєктом. Отримайте консультацію — напишіть на пошту або через форму на сайті.

Практичний розбір LLM: fine-tuning, RAG, агенти, деплой

Модель GPT‑4 або Claude 3.5 Sonnet через публічне API — не рішення, а просто інструмент. Коли приходить вимога «зробити як ChatGPT, але на наших даних», за нею стоїть реальна інженерна задача: від налаштування промптів до навчання 70B‑моделі на власній інфраструктурі. LLM розробка під ключ — це складний стек, і ми займаємося цим понад 5 років. За цей час реалізовано понад 20 проєктів у галузі генеративного AI: від RAG‑систем для юридичних департаментів до кастомних агентів для техпідтримки. Де саме знаходиться ваша задача — залежить від даних, latency‑вимог, бюджету та того, наскільки критична конфіденційність.

Типова ситуація: клієнт уже спробував ChatGPT, але результати нестабільні — то відповідає точно, то галюцинує. Або потрібна інтеграція в корпоративний портал з дотриманням політик безпеки. Розберемо кожен шар стеку в деталях — від RAG до production‑деплою.

Чому RAG‑системи ламаються і як це виправити?

RAG (Retrieval‑Augmented Generation) виглядає просто: знайшли релевантні документи, поклали в контекст, модель відповіла. На практиці збоїть у кількох місцях.

Chunking без перекриття. Класична помилка: chunk_size=512, overlap=0. Якщо відповідь лежить на межі двох чанків, retrieval не знайде жодного з достатньою впевненістю. Рішення: overlap 15–25% від chunk_size, а краще sentence‑aware splitting через spaCy або NLTK, а не наївне розбиття за символами.

Поганий embedder. Текст‑embedding‑ada‑002 — хороший для загального випадку, але на юридичних або медичних текстах програє спеціалізованим моделям: E5‑large‑v2, BGE‑M3 або fine‑tuned sentence‑transformers на доменних даних. Різниця в Recall@5 може становити 15–25%.

Відсутність re‑ranking. Векторний пошук оптимізований за швидкістю, не за релевантністю. Cross‑encoder re‑ranker (ms‑marco‑MiniLM‑L‑6‑v2, bge‑reranker‑large) після первинного retrieval піднімає точність топ‑3 при прийнятній затримці (+50–150 ms). Це часто важливіше за покращення embedding‑моделі.

Гібридний пошук. Тільки dense вектори погано працюють на точних запитах: імена, артикули, коди. BM25 (sparse) добре знаходить точні збіги, але не розуміє семантику. Гібрид через RRF (Reciprocal Rank Fusion) — оптимальний компроміс. Qdrant, Weaviate та pgvector 0.7+ підтримують гібридний пошук нативно.

Коли варто fine‑tune, а не промпт‑інжиніринг?

Промпт‑інжиніринг вирішує ~70% завдань адаптації LLM під домен. Решта 30% вимагають донавчання. Три ознаки: модель ігнорує специфічний формат виведення навіть при детальному описі в промпті; задача вимагає глибокого знання спеціалізованої лексики (медицина, право); потрібно значно знизити витрати на токени, замінивши велику модель меншою спеціалізованою.

LoRA та QLoRA — стандарт для SFT. LoRA додає trainable low‑rank матриці до attention‑шарів. Типова конфігурація для Llama‑3 8B: r=64, lora_alpha=128, target_modules=["q_proj","v_proj","k_proj","o_proj"] — параметрів, що навчаються, ~0.8%, навчання на одній A100 40GB. QLoRA додає 4‑бітну квантизацію (NF4) і дозволяє fine‑tune 70B модель на двох A100 40GB, хоча швидкість падає вдвічі порівняно з bf16.

DPO замість RLHF. Direct Preference Optimization вимагає лише пари (chosen, rejected), а не скалярні reward‑сигнали. DPOTrainer з бібліотеки trl (Hugging Face) реалізує це кількома десятками рядків.

Типова помилка. Датасет з 500 прикладів, 5 епох, validation loss 0.8 — здається норм. Але на тесті модель деградувала на загальних інструкціях. Причина: catastrophic forgetting. Рішення — додати 10–20% загальних instruction‑following прикладів (Alpaca, FLAN) у навчальну вибірку, щоб не зруйнувати вихідні здібності.

Як обрати базову модель: 8B чи 70B?

Для більшості задач fine‑tuning 8B моделі достатньо. 70B потрібен, коли потрібне глибоке міркування або baseline 8B не досягає потрібної якості навіть після донавчання. Вартість інференсу Llama‑3 8B через vLLM на A100 значно нижча, ніж у GPT‑4, що робить його економічно вигідним.

Що дає PagedAttention в production?

vLLM — перший вибір для serving open‑source моделей. PagedAttention — ключове технічне рішення: KV‑cache керується як virtual memory в ОС, без фрагментації. Це дає throughput у 2–4 рази вище порівняно з наївним HuggingFace Transformers inference. Документація vLLM підтверджує: continuous batching та PagedAttention — стандарт для високонавантажених LLM‑сервісів.

Типові числа на A100 80GB для Llama‑3 8B (bf16): 400–600 req/s, P50 latency 200–400ms, P99 latency 600–900ms при concurrency 64. Для 70B на двох A100 з tensor parallelism: 80–120 req/s, P99 latency 1.5–2.5s. Квантизація AWQ або GPTQ знижує споживання пам'яті в 2 рази при втраті якості в межах 1–3%.

Мультиагентні системи

Агенти — LLM з доступом до інструментів: пошук, виконання коду, запити до API, робота з БД. Основні патерни:

• ReAct (Reason + Act): модель розмірковує → обирає інструмент → спостерігає результат → знову розмірковує. LangChain та LlamaIndex реалізують з коробки.
• Multi‑agent orchestration: кілька спеціалізованих агентів з координатором зверху. Приклад: coordinator → researcher (пошук + summarization) → coder (генерація та виконання коду) → critic (перевірка). Інструменти: AutoGen (Microsoft), CrewAI, кастомна реалізація на LangGraph.

В продакшені агентні системи недетерміновані. Обов'язкові guardrails, ліміти кроків, логування кожного кроку, human‑in‑the‑loop для критичних дій.

Як ми гарантуємо якість LLM рішення?

Ми використовуємо RAGAS для автоматичної оцінки відповідей: faithfulness, answer relevancy, context precision. Система трекінгу експериментів на базі MLflow фіксує всі метрики, датасети та конфіги. Це дозволяє порівнювати різні гіпотези та доводити покращення з цифрами. Гарантію стабільної роботи забезпечує continuous integration з тестами на специфічних сценаріях (prompt injection, edge‑cases).

Як почати LLM розробку: наступні кроки

Ми передаємо:

• Технічну документацію (model card, конфіги, інструкції з розгортання)
• Доступ до інфраструктури (репозиторій з кодом, навчені ваги)
• 1 місяць підтримки після деплою (консультації, виправлення багів)
• Навчання команди замовника (2–3 заняття з експлуатації системи)

Терміни: базовий RAG‑прототип — 1–2 тижні. Fine‑tuning з даними замовника — 3–6 тижнів (з урахуванням підготовки даних). Production‑система з моніторингом та перенавчанням — 2–4 місяці.

Вартість розраховується індивідуально і залежить від обсягу даних, складності моделі та вимог до інфраструктури. Хочете оцінити свій проєкт? Зв'яжіться з нами — ми підготуємо попереднє резюме за 1–2 робочі дні. Або замовте консультацію фахівця з вибору підходу: RAG, fine‑tuning або гібрид — розповімо, що підійде саме вам.