Modern QA2026Паттерны тестирования для ИИ-управляемой автоматизации браузера
Join

Course › 01 Agent Skills for Browser Automation

Cutting-edge · Chapter 01

Паттерны тестирования для ИИ-управляемой автоматизации браузера

Updated Jul 2026

Паттерн 1: Navigate-Act-Verify (NAV)

Фундаментальный паттерн тестирования. Каждый браузерный тест следует этой структуре:

Navigate → Act → Verify

Пример: Тест авторизации

# NAVIGATE
vibe-check navigate https://app.example.com/login

# ACT
vibe-check type "input[name=email]" "user@test.com"
vibe-check type "input[name=password]" "secret123"
vibe-check click "button[type=submit]"

# VERIFY
vibe-check wait "h1.dashboard-title"
vibe-check text "h1.dashboard-title"
# → Агент проверяет: написано ли "Dashboard"? ПРОШЁЛ

Роль агента

Агент решает:

  • На какой URL перейти
  • Какой селектор использовать (из подсказок или обнаружения)
  • Какой текст ввести
  • Как проверить успех (текстовое содержимое, изменение URL, наличие элемента)

Паттерн 2: Тестирование валидации форм

Проверить, что формы корректно отклоняют невалидный ввод.

Пример: Форма регистрации

# Тест: отправка пустой формы
vibe-check navigate https://app.example.com/register
vibe-check click "button[type=submit]"     # Отправить пустую форму
vibe-check text ".error"                     # Прочитать все сообщения об ошибках
# → Агент проверяет: "Email is required", "Password is required"

# Тест: невалидный email
vibe-check type "input[name=email]" "not-an-email"
vibe-check click "button[type=submit]"
vibe-check text ".error[data-field=email]"
# → Агент проверяет: "Please enter a valid email"

# Тест: слабый пароль
vibe-check type "input[name=email]" "valid@test.com"
vibe-check type "input[name=password]" "123"
vibe-check click "button[type=submit]"
vibe-check text ".error[data-field=password]"
# → Агент проверяет: "Password must be at least 8 characters"

# Тест: валидная отправка
vibe-check type "input[name=email]" "valid@test.com"
vibe-check type "input[name=password]" "StrongP@ss123"
vibe-check click "button[type=submit]"
vibe-check wait ".success-message"
vibe-check text ".success-message"
# → Агент проверяет: "Registration successful"

Добавленная ценность агента

Агент может генерировать тестовые случаи из структуры формы:

  • Прочитать все элементы <input> и их атрибуты валидации
  • Автоматически генерировать тесты граничных значений
  • Проверить, что сообщения об ошибках соответствуют ожидаемому UX-тексту

Паттерн 3: Многостраничный поток

Тесты, охватывающие несколько страничных переходов.

Пример: Оформление заказа в интернет-магазине

# Просмотр товаров
vibe-check navigate https://shop.example.com
vibe-check click ".product-card:first-child a"
vibe-check text ".product-name"
# → Агент отмечает: "Blue Widget, $29.99"

# Добавить в корзину
vibe-check click "#add-to-cart"
vibe-check wait ".cart-badge"
vibe-check text ".cart-badge"
# → Агент проверяет: бейдж показывает "1"

# Перейти в корзину
vibe-check navigate https://shop.example.com/cart
vibe-check text ".cart-item-name"
# → Агент проверяет: "Blue Widget"
vibe-check text ".cart-total"
# → Агент проверяет: "$29.99"

# Оформление заказа
vibe-check click "#checkout"
vibe-check type "#card-number" "4111111111111111"
vibe-check type "#expiry" "12/28"
vibe-check type "#cvv" "123"
vibe-check click "#pay-now"
vibe-check wait ".order-confirmation"
vibe-check text ".order-number"
# → Агент фиксирует: "Order #12345"

Ключевые соображения

  • Состояние переносится между страницами (содержимое корзины, куки сессии)
  • Использовать режим daemon для многостраничных потоков (браузер сохраняется)
  • Скриншот на каждой странице для следа отладки

Паттерн 4: Извлечение и верификация данных

Извлечь структурированные данные со страницы и проверить их на соответствие ожидаемым значениям.

Пример: Метрики дашборда

vibe-check navigate https://app.example.com/dashboard
vibe-check eval "JSON.stringify({
  revenue: document.querySelector('.metric-revenue').textContent,
  users: document.querySelector('.metric-users').textContent,
  orders: document.querySelector('.metric-orders').textContent
})"
# → {"revenue": "$45,230", "users": "1,234", "orders": "567"}

Пример: Табличные данные

vibe-check navigate https://app.example.com/users
vibe-check eval "JSON.stringify(
  [...document.querySelectorAll('table tbody tr')].map(row => ({
    name: row.cells[0].textContent,
    email: row.cells[1].textContent,
    role: row.cells[2].textContent
  }))
)"
# → [{"name": "Alice", "email": "alice@test.com", "role": "Admin"}, ...]

Добавленная ценность агента

Агент может:

  • Разобрать JSON-вывод
  • Сравнить с ожидаемыми значениями из базы данных или API
  • Выявить расхождения и осмысленно сообщить о них

Паттерн 5: Wait-and-Verify (асинхронные операции)

Для операций, которые не завершаются мгновенно (AJAX-вызовы, загрузка файлов и т.д.).

Пример: Загрузка файла

vibe-check navigate https://app.example.com/upload
# Примечание: взаимодействие с полем file input может потребовать eval
vibe-check eval "document.querySelector('input[type=file]').value"

# После инициации загрузки
vibe-check wait ".upload-progress" --state visible
vibe-check wait ".upload-progress" --state hidden --timeout 60000  # Ожидание завершения
vibe-check text ".upload-status"
# → Агент проверяет: "Upload complete"

Пример: Поиск с задержкой (debounce)

vibe-check navigate https://app.example.com/search
vibe-check type "#search-box" "test query"
# Ожидание debounce + API-вызова + отрисовки
vibe-check wait ".search-results"
vibe-check text ".result-count"
# → Агент проверяет: "15 results found"

Паттерн 6: Тестирование с вкладками

Тесты, требующие нескольких вкладок или окон.

Пример: Открытие ссылки в новой вкладке

vibe-check navigate https://app.example.com
vibe-check tab-new https://docs.example.com/api  # Открыть документацию API в новой вкладке
vibe-check text "h1"
# → "API Reference"
vibe-check tab-switch 0                            # Обратно к приложению
vibe-check text "h1"
# → "Dashboard"

Пример: Сравнение двух страниц

vibe-check navigate https://staging.example.com
vibe-check text ".version" > /tmp/staging-version.txt
vibe-check tab-new https://production.example.com
vibe-check text ".version" > /tmp/prod-version.txt
# Агент сравнивает два файла

Паттерн 7: Негативное тестирование

Проверить, что приложение корректно отклоняет невалидные операции.

Пример: Несанкционированный доступ

# Попытка доступа к странице админа без авторизации
vibe-check navigate https://app.example.com/admin
vibe-check url
# → Агент проверяет: перенаправлен на /login (не /admin)

vibe-check text "h1"
# → Агент проверяет: "Please log in" (не контент администратора)

Пример: Ограничение скорости запросов

# Быстрые запросы подряд
for i in $(seq 1 10); do
  vibe-check click "#submit-button"
  vibe-check text ".response"
done
# Агент проверяет, сработало ли ограничение скорости

Паттерн 8: Визуальная регрессия (сравнение скриншотов)

Использование скриншотов для обнаружения визуальных изменений.

# Сохранить базовый снимок
vibe-check navigate https://app.example.com/dashboard
vibe-check screenshot -o baseline/dashboard.png

# ... после изменения кода ...

# Сохранить текущий снимок
vibe-check navigate https://app.example.com/dashboard
vibe-check screenshot -o current/dashboard.png

# Агент сравнивает скриншоты (через модель зрения или инструмент попиксельного сравнения)

Добавленная ценность агента

С возможностями зрения агент может:

  • Выявить конкретные визуальные различия
  • Классифицировать изменения как намеренные или регрессию
  • Описать, что изменилось, на естественном языке

Паттерн 9: Тестирование состояний ошибок

Проверить, что приложение корректно обрабатывает ошибки.

Пример: Ошибка сети

# Использовать eval для имитации офлайн-режима
vibe-check eval "window.navigator.__defineGetter__('onLine', () => false)"
vibe-check click "#save-button"
vibe-check text ".error-banner"
# → Агент проверяет: отображается соответствующее сообщение об офлайне

Пример: Ошибка сервера

vibe-check navigate https://app.example.com/broken-page
vibe-check text "body"
# → Агент проверяет: есть ли пользовательская страница ошибки (а не необработанный стек 500)?
vibe-check screenshot -o error-page.png

Антипаттерны

Не надо: Жёстко задавать время ожидания

# ПЛОХО
vibe-check navigate https://app.example.com
sleep 5  # Произвольное ожидание
vibe-check text "h1"

# ХОРОШО
vibe-check navigate https://app.example.com
vibe-check wait "h1"  # Ожидание конкретного элемента
vibe-check text "h1"

Не надо: Игнорировать возвращаемые значения

# ПЛОХО
vibe-check click "#submit"
vibe-check text ".result"  # Может не сработать, если клик не прошёл

# ХОРОШО
vibe-check click "#submit"
vibe-check wait ".result"  # Явно ожидать ожидаемое состояние
vibe-check text ".result"

Не надо: Цеплять команды без верификации

# ПЛОХО: Предполагает, что каждый шаг успешен
vibe-check navigate url && vibe-check click A && vibe-check click B && vibe-check click C

# ХОРОШО: Проверять каждый критический шаг
vibe-check navigate url
vibe-check wait "selector-A"
vibe-check click "selector-A"
vibe-check wait "selector-B"
vibe-check click "selector-B"