08.07.2025 09:10
kmoseenk 0 857 Источник

Что, если бы тесты могли писаться сами, просто используя ваше приложение как реальный пользователь?

В этой статье мы рассмотрим, как Playwright MCP (Model Context Protocol) в режиме агента может автономно исследовать приложение, обнаруживать ключевые функции и генерировать исполнимые тесты — без необходимости в ручном скриптинге.

Мы разберём процесс генерации и запуска теста для приложения Movies, не обойдя без внимания то, как MCP выявляет крайние случаи, строит покрытие и даже находит баги, которые вы могли пропустить.

Настройка окружения

Для этого демо у меня запущен сервер MCP Playwright локально в папке проекта.vscode в файле под названием mcp.json.

{
    "servers": {
        "playwright": {
            "command": "npx",
            "args": [
                "@playwright/mcp@latest"
            ]
        }
    }
}

Для этого я подготовил простой тестовый промпт, который находится в папке.github и называется generate_tests.prompt.md:

‑-

tools: ['playwright']

mode: 'agent'

‑-

Ты — генератор тестов для Playwright.
Тебе дается сценарий, для него нужно сгенерировать тест для Playwright.
НЕ генерируй тестовый код только на основе сценария.
ВЫПОЛНЯЙ шаги по очереди, используя инструменты, предоставленные Playwright MCP.
Когда тебя просят исследовать сайт:

  1. Перейди по указанному URL.

  2. Изучи одну ключевую функциональность сайта и, когда завершишь, закрой браузер.

  3. Напиши тест Playwright на TypeScript, который использует @playwright/test, основываясь на истории сообщений, используя лучшие практики Playwright, включая локаторы на основе ролей, автоматическое повторение утверждений (assertions) и без добавления тайм‑аутов, если это не обязательно, так как Playwright имеет встроенные повторные попытки и автоподтягивание, если используются правильные локаторы и утверждения.

Сохрани сгенерированный тестовый файл в директории tests.
Выполни тестовый файл и повторяй, пока тест не пройдет.
Включи соответствующие утверждения для проверки ожидаемого поведения.
Правильно структурируй тесты с описательными названиями тестов и комментариями.

Затем в VS Code я использую режим агента и убеждаюсь, что мой промпт добавлен в контекст, а затем просто набираю:

Explore https://debs-obrien.github.io/playwright-movies-app

Режим агента использует Playwright MCP для навигации по сайту и использования браузера для исследования приложения как реальный пользователь.

Цель: позволить агенту свободно исследовать приложение, обнаруживать функциональность и генерировать тесты на основе взаимодействий.

Начало исследования
Как только агент приступает к исследованию, он первым делом пробует функцию поиска. Он вводит «Star Wars» в строку поиска — и сразу же мы обнаруживаем баг.

Результаты поиска показывают «Star Wars», но название фильма, которое вернулось, — «Kill». Это явно ошибка.

Это крайний случай, который я не заметил при ручном тестировании. Ранее я искал такие фильмы, как Garfield, Deadpool и Avengers — и всё работало нормально. Но теперь, благодаря автономному поведению агента, я обнаружил регрессию.

Результат: Агент обнаружил проблему с поиском — то, что я совершенно пропустил.

Переключение темы и покрытие UI
Далее агент переключает тему приложения между тёмной и светлой. Он проверяет, что переключатель работает, кликает по навигационным ссылкам и продолжает своё исследовательское поведение.

После завершения взаимодействий агент подводит итоги:

  • Главная страница

  • Функциональность поиска

  • Страница описания фильма

  • Переключение темы

  • Навигация

Из этого списка он выбирает функциональность поиска как фокус для теста, который будет сгенерирован.

Примечание: Вы можете указать агенту, сколько тестов хотите. В данном случае я запросил только один для демонстрации.

Генерация и запуск теста

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

Вот как выглядит сгенерированный им тест:

import { test, expect } from '@playwright/test';

test.describe('Поиск фильма', () => {
  test('Поиск фильма по названию', async ({ page }) => {
    // Переход на приложение с фильмами
    await page.goto('https://debs-obrien.github.io/playwright-movies-app');

    // Клик по кнопке поиска для активации поля поиска
    await page.getByRole('search').click();

    // Вводим 'Star Wars' в поле поиска и нажимаем Enter
    const searchTerm = 'Star Wars';
    await page.getByRole('textbox', { name: 'Search Input' }).fill(searchTerm);
    await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');

    // Проверяем, что мы на странице результатов поиска с правильным названием
    await expect(page).toHaveTitle(`${searchTerm} - Search Results`);

    // Проверяем, что заголовок результатов поиска содержит искомый запрос
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
    await expect(page.getByRole('heading', { name: 'search results', level: 2 })).toBeVisible();

    // Проверяем, что результаты поиска отображаются
    await expect(page.getByRole('list', { name: 'movies' })).toBeVisible();

    // Кликаем на фильм из результатов поиска
    const firstMovie = page.getByRole('list', { name: 'movies' }).getByRole('link').first();
    const movieTitleElement = firstMovie.getByRole('heading', { level: 2 });
    const movieTitle = await movieTitleElement.textContent() || '';
    await firstMovie.click();

    // Проверяем, что страница с деталями фильма загружена с правильным названием
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(movieTitle);

    // Проверяем наличие разделов о фильме
    await expect(page.getByText('The Synopsis')).toBeVisible();
    await expect(page.getByText('The Cast')).toBeVisible();

    // Проверяем наличие раздела с рекомендованными фильмами
    await expect(page.getByRole('heading', { name: 'Recommended Movies' })).toBeVisible();

    // Возвращаемся на страницу результатов поиска
    await page.getByRole('button', { name: 'Back' }).click();

    // Проверяем, что мы вернулись на страницу результатов поиска
    await expect(page.getByRole('heading', { level: 1 })).toHaveText(searchTerm);
  });
});

После генерации теста открывается терминал, и тест выполняется. Он проходит ✅.

Затем открываем Trace Viewer в VS Code, чтобы визуально проверить выполненные шаги:

  • Агент искал «Star Wars».

  • Кликал по результатам, например, по Deadpool.

  • Проверял заголовки на странице с деталями фильма.

Это полный цикл: исследование → генерация → выполнение → обзор.

Почему это важно

Это может показаться магией, но на самом деле это реальный пример разработки с использованием искусственного интеллекта. Вот что действительно круто в этом подходе:

  • Он нашёл реальную ошибку, которую я пропустил.

  • Сэкономил мне время на написание шаблонов тестов.

  • Предложил идеи для покрытия тестами, основанные на реальных путях использования.

  • Сгенерировал код, который можно сразу закоммитить или расширить для дополнительных тестов.

Вы можете повторно запустить тесты, уточнить промпт, увеличить количество тестов или попросить агента исследовать другие области. Это как работать с тестировщиком на базе ИИ, который доступен в любой момент.

Попробуйте сами

Если вы разрабатываете современные приложения и хотите улучшить тестовое покрытие без необходимости писать их вручную, рекомендую попробовать Playwright MCP.

Просто укажите ему на ваше приложение, сформулируйте промпт, и пусть он исследует.

Вы будете удивлены тем, что он найдёт — и как быстро вы сможете перейти от отсутствия тестов к реальному покрытию. Протестируйте разные модели и посмотрите, что работает для вас лучше всего. Для этой демонстрации я использовал Claude Sonnet 3.7.

Удачи в тестировании — и делегируйте написание тестов ботам! Дайте знать в комментариях, что вы думаете, и если попробовали это на своём сайте — как успехи? Результаты могут отличаться в зависимости от модели и версии.

Совет: В папке.vscode в файле settings.json я добавляю эту строку кода, чтобы не нужно было каждый раз нажимать «продолжить». Это удобно для демонстраций.

{
    "chat.tools.autoApprove": true
}

Тестирование и мониторинг приложений — ключевые аспекты, которые всегда требовали внимания. На этих открытых уроках мы поделимся, как правильно подходить к этим вопросам, научим тестировать и мониторить системы, а также дадим практические советы для разработчиков и тестировщиков.

А чтобы узнать, достаточно ли ваших текущих знаний для поступления на курс по автоматизации тестирования на JavaScript, пройдите вступительный тест.

Комментарии (0)