APAW/tests

Web Testing README

Автоматическое тестирование веб-приложений для APAW.

Возможности

Тест	Описание
Visual Regression	Обнаружение визуальных дефектов: наложения элементов, смещения шрифтов, не те цвета
Link Checking	Проверка всех ссылок на 404/500 ошибки
Form Testing	Тестирование форм: заполнение, валидация, отправка
Console Errors	Захват JS ошибок, сетевых ошибок, создание Gitea Issues

Быстрый старт

1. Запуск в Docker (без установки на хост)

# Запустить Playwright MCP контейнер
docker compose -f docker/docker-compose.web-testing.yml up -d

# Проверить что MCP работает
curl http://localhost:8931/mcp -X POST -d '{"jsonrpc":"2.0","id":1,"method":"tools/list"}'

2. Запуск тестов

# Указать целевой URL
export TARGET_URL=https://your-app.com

# Запустить все тесты
cd tests && npm install && npm test

# Или через скрипт из корня проекта
./scripts/web-test.sh https://your-app.com

3. Просмотр отчёта

# Открыть HTML отчёт
npm run report

# Или вручную
open tests/reports/web-test-report.html

Использование с Kilo Code

Команда /web-test

/web-test https://my-app.com

Запускает все тесты и генерирует отчёт.

Команда /web-test-fix

/web-test-fix https://my-app.com

Запускает тесты + автоматически исправляет найденные ошибки через агентов.

Структура папок

tests/
├── scripts/
│   ├── compare-screenshots.js   # Visual regression
│   ├── link-checker.js          # Link checking
│   ├── console-error-monitor.js # Console errors
│   └── aggregate-errors.js      # Error aggregation
├── visual/
│   ├── baseline/                # Эталонные скриншоты
│   ├── current/                 # Текущие скриншоты
│   └── diff/                    # Разница (красное)
├── reports/
│   ├── web-test-report.html    # HTML отчёт
│   ├── web-test-report.json    # JSON отчёт
│   └── screenshots/            # Скриншоты
├── console/
├── links/
├── forms/
├── run-all-tests.js            # Главный runner
└── package.json

Переменные окружения

Переменная	По умолчанию	Описание
TARGET_URL	http://localhost:3000	URL для тестирования
MCP_PORT	8931	Порт Playwright MCP
REPORTS_DIR	./reports	Папка для отчётов
PIXELMATCH_THRESHOLD	0.05	Допустимый % отличий (5%)
AUTO_CREATE_ISSUES	false	Авто-создание Gitea Issues
GITEA_TOKEN	-	Токен Gitea API
GITEA_REPO	UniqueSoft/APAW	Репозиторий

Visual Regression Testing

Как работает

1. Делает скриншот каждой страницы в 3 разрешениях (mobile, tablet, desktop)
2. Сравнивает с baseline (эталоном) через pixelmatch
3. Генерирует diff изображение (красные пиксели = отличия)
4. Создаёт отчёт с процентом изменившихся пикселей

Эталонные скриншоты

# Создать эталон для новой страницы
node tests/scripts/compare-screenshots.js --baseline

# Обновить эталон после изменений
cp tests/visual/current/*.png tests/visual/baseline/

Обнаруживаемые проблемы

• ✅ Наложение элементов (кнопка на кнопку)
• ✅ Сдвиг шрифтов (текст поехал)
• ✅ Неверные цвета (фон не тот)
• ✅ Отсутствующие элементы (кнопка пропала)
• ✅ Лишние элементы (появился артефакт)

Console Error Detection

Что ловит

Тип	Пример
JavaScript Error	TypeError: Cannot read property 'x' of undefined
Syntax Error	Unexpected token '<'
Network Error	Failed to fetch /api/users
404 Error	GET /script.js 404 (Not Found)
500 Error	POST /api/submit 500 (Internal Server Error)

Авто-исправление

При AUTO_CREATE_ISSUES=true:

[Console Error Detected]
       ↓
[Gitea Issue Created]
       ↓
[@the-fixer Agent]
       ↓
[PR with Fix Created]
       ↓
[Issue Closed]

Docker Compose

Основной контейнер

services:
  playwright-mcp:
    image: mcr.microsoft.com/playwright/mcp:latest
    ports:
      - "8931:8931"
    command: node cli.js --headless --browser chromium --no-sandbox --port 8931 --host 0.0.0.0
    shm_size: '2gb'

Профили

# Только visual testing
docker compose -f docker-compose.web-testing.yml --profile visual up

# Все тесты
docker compose -f docker-compose.web-testing.yml --profile full up

CI/CD Integration

GitHub Actions

name: Web Testing
on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Start Playwright MCP
        run: docker compose -f docker-compose.web-testing.yml up -d
      
      - name: Run Tests
        run: cd tests && npm install && npm test
        env:
          TARGET_URL: ${{ secrets.APP_URL }}
          AUTO_CREATE_ISSUES: true
          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
      
      - name: Upload Report
        uses: actions/upload-artifact@v3
        with:
          name: web-test-report
          path: tests/reports/

Troubleshooting

MCP не отвечает

# Проверить контейнер
docker ps | grep playwright

# Перезапустить
docker compose -f docker-compose.web-testing.yml restart

# Логи
docker compose -f docker-compose.web-testing.yml logs -f

Скриншоты пустые

# Увеличить timeout
export TIMEOUT=10000

# Проверить что headless включён
# (для Docker обязателен)
docker compose -f docker-compose.web-testing.yml config | grep headless

Высокий процент ложных срабатываний

# Увеличить порог до 10%
export PIXELMATCH_THRESHOLD=0.10

# Или отключить для конкретного теста
node tests/scripts/compare-screenshots.js --no-compare --create-baseline

See Also

• .kilo/skills/web-testing/SKILL.md - Полная документация
• .kilo/commands/web-test.md - Команда тестирования
• .kilo/commands/web-test-fix.md - Тестирование с авто-исправлением
• docker-compose.web-testing.yml - Docker конфигурация