# Навык тестирования веб-приложений (импортированный)

---
name: web-application-testing-skill
description: Набор инструментов для взаимодействия с локальными веб-приложениями и их тестирования с помощью Playwright.
---

# Тестирование веб-приложений

Этот навык позволяет всесторонне тестировать и отлаживать локальные веб-приложения с помощью автоматизации Playwright.

## Когда использовать этот навык

Используй этот навык, когда нужно:
- Протестировать функциональность фронтенда в настоящем браузере
- Проверить поведение интерфейса и взаимодействия
- Отладить проблемы веб-приложения
- Сделать скриншоты для документации или отладки
- Изучить логи консоли браузера
- Проверить отправку форм и пользовательские сценарии
- Проверить адаптивный дизайн при разных размерах области просмотра

## Предварительные условия

- В системе установлен Node.js
- Локально запущенное веб-приложение (или доступный URL)
- Playwright будет установлен автоматически, если его ещё нет

## Основные возможности

### 1. Автоматизация браузера
- Переход по URL
- Нажатие кнопок и ссылок
- Заполнение полей форм
- Выбор значений в раскрывающихся списках
- Обработка диалоговых окон и оповещений

### 2. Проверка
- Проверка наличия элементов
- Проверка текстового содержимого
- Проверка видимости элементов
- Проверка URL
- Тестирование адаптивного поведения

### 3. Отладка
- Создание скриншотов
- Просмотр логов консоли
- Изучение сетевых запросов
- Отладка неуспешных тестов

## Примеры использования

### Пример 1: Базовый тест навигации
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### Пример 2: Взаимодействие с формой
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Пример 3: Создание скриншота
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Рекомендации

1. **Всегда проверяй, что приложение запущено** — Перед запуском тестов убедись, что локальный сервер доступен
2. **Используй явные ожидания** — Дожидайся элементов или завершения навигации, прежде чем взаимодействовать
3. **Делай скриншоты при сбое** — Снимки экрана помогут разобраться в проблемах
4. **Освобождай ресурсы** — Всегда закрывай браузер по завершении
5. **Корректно обрабатывай тайм-ауты** — Задавай разумные ограничения времени для медленных операций
6. **Тестируй постепенно** — Начинай с простых взаимодействий, прежде чем переходить к сложным сценариям
7. **Разумно выбирай селекторы** — Предпочитай data-testid или селекторы по ролям классам CSS

## Распространённые приёмы

### Приём: Ожидание элемента
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Приём: Проверка наличия элемента
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Приём: Получение логов консоли
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Приём: Обработка ошибок
```javascript
try {
  await page.click('#button');
} catch (error) {\n  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## Ограничения

- Требуется среда Node.js
- Нельзя тестировать нативные мобильные приложения (вместо этого используй React Native Testing Library)
- Возможны проблемы со сложными процессами аутентификации
- Для некоторых современных фреймворков может понадобиться специальная конфигурация

---
Источник: prompts.chat. Текст: CC0 1.0 Universal. Русская версия: Kvantora.