Playwright MCP: как заставить ИИ писать тесты за вас

До появления Playwright MCP AI-генерация тестов проваливалась на локаторах: модель представляла структуру DOM которой не существовало. С MCP всё иначе. AI открывает браузер, смотрит на реальное дерево доступности и генерирует getByRole и getByLabel из того что видит, а не из того что предполагает. Эта статья объясняет как работает Playwright MCP, как подключить его к Claude Desktop, что именно AI видит через браузер, и как выглядит рабочий процесс генерации, проверки и доработки тестов на живом приложении.

Что такое MCP и зачем он нужен для тестирования

Аббревиатура MCP означает Model Context Protocol: открытый протокол позволяющий AI-ассистентам подключаться к внешним инструментам и источникам данных. Anthropic выпустила его в 2024 году, в 2025-м команда Playwright добавила официальную поддержку.

На практике это означает: AI-ассистент с поддержкой MCP (например, Claude в IDE) может открыть браузер, перейти в твоё приложение, изучить DOM и понять какие элементы там есть, прежде чем написать хоть строчку кода теста.

До MCP генерация тестов выглядела так:

1. Описываешь приложение текстом

2. AI генерирует код на основе описания

3. Обнаруживаешь что локаторы неверные: AI придумал структуру которой нет

4. Правишь локаторы вручную

С MCP:

1. AI открывает приложение в браузере

2. Изучает реальную структуру DOM

3. Генерирует код с реальными ролями, реальными лейблами, реальными data-testid

4. Локаторы работают с первого запуска (обычно)

Это не просто удобство. Качество результата меняется принципиально.

Установка Playwright MCP

Что нужно заранее

Node.js 18 или выше и MCP-совместимый AI-клиент (Claude Desktop или IDE с поддержкой MCP).

Установка

npm install -g @playwright/mcp

Или как зависимость проекта:

npm install --save-dev @playwright/mcp

Подключение к Claude Desktop

Добавь MCP-сервер в конфигурацию Claude Desktop. Файл конфигурации:

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

Перезапусти Claude Desktop. В меню инструментов появится новый инструмент Playwright.

Подключение к VS Code

Если используешь MCP-совместимое расширение VS Code (например, расширение Claude), конфигурация аналогичная: добавь сервер в настройках MCP-серверов расширения.

Что AI видит через MCP

При подключении через Playwright MCP у AI есть доступ к следующему.

Генерация теста через MCP

Реальная MCP-сессия выглядит так. Открываешь AI-ассистент, просишь написать тест, и он начинает работать.

AI видит:

• Навигационную панель с кнопкой «Login» (роль: button, имя: «Login»)
• Модал с двумя инпутами (лейбл: «Username», лейбл: «Password»)
• Кнопку отправки (роль: button, имя: «Submit»)
• После входа: заголовок с текстом «My Travel Items»

AI генерирует:

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

test('user can log in with valid credentials', async ({ page }) => {
  await page.goto('https://lab.becomeqa.com');
  
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill('admin@becomeqa.com');
  await page.getByLabel('Password').fill('testpass123');
  await page.getByRole('button', { name: 'Submit' }).click();
  
  await expect(page.getByRole('heading', { name: 'My Travel Items' })).toBeVisible();
});

Локаторы верны потому что AI смотрел на реальное приложение, а не на его описание. getByRole('button', { name: 'Login' }) работает потому что AI убедился: такая кнопка с таким точным доступным именем существует.

Запуск MCP-генерированных тестов в существующем проекте

MCP генерирует стандартные Playwright-тесты. Они интегрируются в существующий тест-сьют без каких-либо изменений:

# запускаем как любой другой тест
npx playwright test tests/login.spec.ts

# или все тесты
npx playwright test

Сгенерированные тесты используют тот же playwright.config.ts, те же репортеры, тот же CI-пайплайн. MCP не тест-раннер, а инструмент генерации.

Рабочий процесс: разработка тестов с помощью AI

Процесс который хорошо работает на практике.

Шаг 1: генерируем начальный тест через MCP

Попроси AI написать тест для конкретного сценария. Будь конкретен в том что нужно проверить: не «протестируй логин», а «убедись что вход с валидными данными показывает дашборд с именем пользователя в навигации».

Шаг 2: проверяем сгенерированный код

Смотрим на:

• Локаторы через getByRole / getByLabel / getByTestId? Хорошо.
• Есть getByXpath или locator('div.some-class')? Плохо, сломаются.
• Есть вызовы page.waitForTimeout(2000)? Плохо, заменяй на await expect(...).
• Есть смысловые ассёрты, а не просто «страница загрузилась»?

Шаг 3: запускаем тест

npx playwright test tests/login.spec.ts --headed

Смотрим как работает. Совпадает с ожиданиями?

Шаг 4: просим доработать

Если что-то не так, говорим AI что произошло. «Тест падает на шаге с моделью. Похоже модал появляется не сразу. Можешь добавить нормальное ожидание?» AI может вернуться в приложение и посмотреть что происходит.

Шаг 5: добавляем негативные сценарии

Когда happy path работает, просим написать негативные тесты: «Теперь напиши тест для случая когда пароль неверный.» MCP позволяет AI взаимодействовать с приложением и увидеть что реально происходит: какое сообщение об ошибке появляется, где и как написано.

Что MCP генерирует хорошо, а что хуже

Генерирует хорошо

• Базовые сценарии с понятной структурой UI
• Взаимодействие с формами (fill, select, click)
• Ассёрты на видимый текст и заголовки
• Взаимодействие с модалами и диалогами
• Тесты для приложений с хорошей семантической HTML-разметкой

Генерирует хуже

• Сложные сценарии зависящие от состояния («у пользователя ровно 3 элемента в конкретном статусе»)
• Тесты которые требуют подготовки данных на бэкенде
• Тесты визуального расположения элементов
• Гонки состояний и чувствительные к таймингу сценарии
• Тесты требующие setup/teardown базы или API

Для второй категории AI-генерация даёт стартовую структуру которую нужно дорабатывать вручную.

MCP против обычной AI-генерации

| Аспект | MCP | Генерация из описания |

|--------|-----|----------------------|

| Точность локаторов | Высокая, из реального DOM | Варьируется, из описания |

| Работает с первого запуска | Обычно да | Часто требует правок |

| Требование | Доступ к запущенному приложению | Только текстовое описание |

| Полезен когда | Приложение запущено локально | Приложение ещё не построено |

Оба подхода уместны. Для тестирования задеплоенного приложения MCP существенно лучше. Для написания тестов до того как приложение существует (test-driven development), генерация из спецификации по-прежнему полезна.

MCP в CI

MCP не запускается в CI: это инструмент разработки. Используешь MCP локально для генерации и доработки тестов, коммитишь сгенерированные тесты в репозиторий, и CI запускает их в headless-режиме через стандартный Playwright. В CI запускаются тесты которые MCP помог написать, а не сам MCP.

FAQ

MCP работает с любым приложением или только с определёнными фреймворками?

С любым веб-приложением доступным через браузер. Неважно React, Vue, Angular или чистый HTML. MCP работает на уровне браузера, а не фреймворка.

Может ли MCP обновлять существующие тесты когда UI меняется?

Экспериментально, да. Можно попросить AI посмотреть на текущее приложение и починить тест который падает из-за UI-изменения. На практике хорошо работает для обновления локаторов, хуже для структурных изменений в тест-флоу.

MCP бесплатный?

Пакет @playwright/mcp открытый и бесплатный. Нужен MCP-совместимый AI-клиент. Claude Desktop (Anthropic) есть в бесплатном и платном варианте. Другие совместимые клиенты отличаются по условиям.

Работает с TypeScript и JavaScript?

С обоими. Укажи что именно нужно: «Напиши этот тест на TypeScript со strict mode», или AI использует то что соответствует конфигурации проекта.

Может ли AI запускать тесты и самостоятельно исправлять ошибки?

При правильной конфигурации MCP и AI-клиента, да. Можно попросить AI запустить тест, посмотреть на падение, изучить приложение в состоянии ошибки и обновить тест. Это агентный рабочий процесс тестирования который формируется в 2026 году: AI итерирует тесты автономно пока они не пройдут.