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

Этот скилл обеспечивает комплексное тестирование и отладку локальных веб-приложений с автоматизацией Playwright.

По возможности используйте MCP-сервер Playwright. Если он недоступен, можно запускать код в локальном окружении Node.js с установленным Playwright.

Когда использовать

• Тестировать функциональность фронтенда в реальном браузере
• Проверять поведение и взаимодействия UI
• Отлаживать проблемы веб-приложения
• Снимать скриншоты для документации или отладки
• Инспектировать логи консоли браузера
• Валидировать отправку форм и пользовательские сценарии
• Проверять адаптивность на разных viewport

Предварительные требования

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

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

1. Автоматизация браузера

• Навигация по URL
• Клики по кнопкам и ссылкам
• Заполнение полей форм
• Выбор в выпадающих списках
• Обработка диалогов и алертов

2. Проверка

• Утверждение наличия элемента
• Проверка текстового содержимого
• Проверка видимости элемента
• Валидация URL
• Тест адаптивного поведения

3. Отладка

• Снятие скриншотов
• Просмотр логов консоли
• Инспекция сетевых запросов
• Отладка упавших тестов

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

Пример 1: базовый тест навигации

// Navigate to a page and verify title
await page.goto("http://localhost:3000");
const title = await page.title();
console.log("Page title:", title);

Пример 2: взаимодействие с формой

// 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: снятие скриншота

// Capture a screenshot for debugging
await page.screenshot({ path: "debug.png", fullPage: true });

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

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

Частые паттерны

Дождаться элемента:

await page.waitForSelector("#element-id", { state: "visible" });

Проверить, существует ли элемент:

const exists = (await page.locator("#element-id").count()) > 0;

Получить логи консоли:

page.on("console", (msg) => console.log("Browser log:", msg.text()));

Обработать ошибки:

try {
  await page.click("#button");
} catch (error) {
  await page.screenshot({ path: "error.png" });
  throw error;
}

Ограничения

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

Вспомогательные функции

Некоторые вспомогательные функции доступны в test-helper.js для упрощения частых задач — ожидание элементов, снятие скриншотов, обработка ошибок. Импортируйте и используйте их в тестах для читаемости и поддерживаемости.