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

---
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) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

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

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

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