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

В этой статье мы рассмотрим, как 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, пройдите вступительный тест.