Автоматизація тестування веб-додатків з Playwright: ШІ-промпт

---
назва: навичка-тестування-веб-додатків
опис: Інструментарій для взаємодії та тестування локальних веб-додатків за допомогою Playwright.
---

# Тестування веб-додатків

Ця навичка забезпечує комплексне тестування та налагодження локальних веб-додатків за допомогою автоматизації Playwright.

## Коли використовувати цю навичку

Використовуйте цю навичку, коли вам потрібно:
- Протестувати функціональність фронтенду в реальному браузері
- Перевірити поведінку UI та взаємодії
- Налагодити проблеми веб-додатка
- Зробити скріншоти для документації або налагодження
- Перевірити логи консолі браузера
- Валідувати відправку форм та користувацькі сценарії
- Перевірити адаптивний дизайн на різних екранах (viewports)

## Попередні вимоги

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

## Основні можливості

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

### 2. Верифікація
- Перевірка наявності елементів (Assert)
- Перевірка текстового вмісту
- Перевірка видимості елементів
- Валідація URL-адрес
- Тестування адаптивної поведінки

### 3. Налагодження (Debugging)
- Створення скріншотів
- Перегляд логів консолі
- Інспектування мережевих запитів
- Налагодження невдалих тестів

## Приклади використання

### Приклад 1: Базовий тест навігації
```javascript
// Перехід на сторінку та перевірка заголовка
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Заголовок сторінки:', title);
```

### Приклад 2: Взаємодія з формою
```javascript
// Заповнення та відправка форми
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Приклад 3: Створення скріншота
```javascript
// Створення скріншота для налагодження
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Рекомендації

1. **Завжди перевіряйте, чи запущено додаток** - переконайтеся, що локальний сервер доступний перед запуском тестів.
2. **Використовуйте явні очікування (explicit waits)** - чекайте завершення завантаження елементів або навігації перед взаємодією.
3. **Робіть скріншоти при помилках** - це допоможе швидше знайти причину проблеми.
4. **Очищуйте ресурси** - завжди закривайте браузер після завершення роботи.
5. **Обробляйте тайм-аути** - встановлюйте розумні тайм-аути для повільних операцій.
6. **Тестуйте інкрементно** - починайте з простих взаємодій перед складними сценаріями.
7. **Обирайте селектори розумно** - віддавайте перевагу data-testid або селекторам на основі ролей (role-based) замість 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('Лог браузера:', msg.text()));
```

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

## Обмеження

- Потрібне середовище Node.js
- Неможливо тестувати нативні мобільні додатки (використовуйте React Native Testing Library)
- Можливі проблеми зі складними потоками автентифікації
- Деякі сучасні фреймворки можуть потребувати специфічної конфігурації