Playwright чи браузерні агенти? Де скриптована автоматизація все ще має перевагу.

Веб був створений для людей, які клікають по посиланнях та читають сторінки. Selenium, Puppeteer та Playwright дозволяють коду виконувати ці дії замість людини. Протягом понад десяти років автоматизація браузерів означала написання скриптів, детальне описування кожного кроку та їхнє багаторазове виконання. Тепер штучні інтелектуальні агенти змінюють ситуацію. Вони можуть міркувати, планувати та діяти, а також переглядати сторінки так само, як людина: спостерігати за ними, розуміти їх зміст та вирішувати, що робити далі. Це піднімає важливе питання: чи робить Model Context Protocol (MCP) скриптовану автоматизацію застарілою, чи Playwright все ще займає своє місце?

Чому розробники люблять Playwright

Playwright від Microsoft — це сучасна платформа для автоматизації браузерів. Код, написаний з її використанням, змушує Chromium, Firefox чи WebKit клікати по кнопках, заповнювати форми, збирати дані та виконувати тестування від початку до кінця. Ось невеликий приклад:

const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/login');
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'secret');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
console.log('Logged in!');
await browser.close();

Результат є чистим, детермінованим та прогнозованим. Звичайні причини його популярності:

• Підтримка різних браузерів є вбудованою.
• Ізоляція тестів та їх паралельний запуск є дуже надійними.
• Функція автоматичного очікування усуває старі хаки з використанням sleep(2000).
• Є можливість відстеження, зйомки екрана та запису відео.
• Він ідеально вписується в пайплайни CI/CD.

Для автоматизації тестування якості, тестування на регресію та скриптованих веб-процесів він є стандартом.

Де скрипти створюють проблеми

Слабкістю є крихкість. Якщо змінити назву CSS-класу кнопки, скрипт перестає працювати. Якщо перемістити поле форми, він також перестає функціонувати. Якщо впровадити варіант A/B із новим макетом, проблеми знову виникають. Кожен скрипт — це жорстко закодована карта припущень щодо вигляду сторінки в певний момент часу, а інтерфейси постійно змінюються. У компанії з швидкими змінами підтримка великої кількості інструментів Playwright може перетворитися на другу повноцінну роботу.

Аналогія допоможе зрозуміти. Скрипт — це ламінована картка з інструкціями для пересування по місту. Він працює доти, доки дорога не закриється, будівля не переміститься або не з’явиться односпрямована вулиця. Кращий навігатор озирнеться навколо, прочитає вуличні знаки та буде приймати рішення на льоту.

Що додає MCP

MCP, представлений компанією Anthropic наприкінці 2024 року, — це відкритий стандарт для структурованого підключення моделей ШІ, таких як Claude, до зовнішніх інструментів, джерел даних та середовищ. Він функціонує як універсальна система плагінів для агентів. Замість того, щоб працювати всередині вікна чату, модель може отримувати доступ до баз даних, API, файлових систем та веб-браузерів.

Вже існує сервер Playwright MCP, який надає доступ до дій браузера у вигляді функцій, які можуть викликатися агентом. Там, де розробник би написав щось на кшталт цього:

await page.click('#submit-button');

Натомість агент отримує мету:

"Submit the contact form on acme.com with the user's name and email"

Звідти він навігує, знаходить елементи та взаємодіє з сторінкою за допомогою зору, парсингу HTML та міркувань, без жодних жорстко закодованих селекторів.

Порівняння

Playwright – традиційний підхід

• Контроль: розробник пише кожен крок.
• Селектори: CSS, XPath або текст.
• Стійкість до змін інтерфейсу: припиняє працювати при змінах інтерфейсу.
• Налаштування: середнє, оскільки потрібен код.
• Детермінізм: повністю детермінований.
• Відлагоджування: просте, завдяки журналам слідування та скріншотам.
• Швидкість: швидкий.
• Витрати: лише обчислювальні.
• Найкраще підходить для: тестів на регресію та пайплайнів CI/CD.
• Надійність: висока при належному обслуговуванні.

WebMCP або Playwright MCP – підхід з агентом

• Контроль: ШІ-агент міркує та приймає рішення.
• Селектори: природна мова разом із візуальним розумінням.
• Стійкість до змін інтерфейсу: адаптується шляхом повторного аналізу поточного DOM.
• Налаштування: низькі, оскільки достатньо описати мету.
• Детермінізм: недетерміністичний, оскільки використовується міркування LLM.
• Виправлення помилок: складніше, оскільки питання полягає у тому, чому агент обрав саме цю дію.
• Швидкість: повільніше через додаткові витрати на обробку даних LLM.
• Витрати: обчислювальні ресурси плюс токени API LLM.
• Найкраще підходить для: динамічних завдань, складних робочих процесів та агентів.
• Надійність: покращується, але ще не досягає рівня продакшн-систем.

Одне завдання, два методи

Завдання: увійти у панель керування SaaS, знайти останню рахунку-фактуру та завантажити її у форматі PDF.

За допомогою Playwright скрипт переходить на сторінку входу, заповнює електронну пошту та пароль за допомогою селекторів data-testid, натискає кнопку входу та продовжує крок за кроком.

await page.goto('https://app.saas.com/login');
await page.fill('[data-testid="email"]', credentials.email);
await page.fill('[data-testid="password"]', credentials.password);
await page.click('[data-testid="login-btn"]');
await page.waitForSelector('.dashboard');
await page.click('nav >> text=Billing');
await page.click('.invoice-list tr:first-child .download-btn');
await page.waitForEvent('download');

Розгляньте, що станеться, якщо під час рефакторингу буде змінено назву атрибута data-testid, якщо навігація за рахунками переміститься у бічну панель, або якщо таблиця рахунків буде форматуватися з іншою структурою сторінок.

З агентом інструкція формулюється простою мовою як конкретна мета:

Goal: "Go to app.saas.com, log in with my credentials,
navigate to billing, find the most recent invoice,
and download it as a PDF."

Агент завантажує сторінку, читає DOM та візуальну структуру, визначає форму входу за змістом, вводить облікові дані та надсилає заявку, шукає елементи навігації з позначками «Білінг», «Рахунки-фактури» чи подібними, знаходить найновіший рахунок-фактуру за датою та натискає «Завантажити». Якщо інтерфейс змінюється, він знову читає сторінку та пристосовується. Жодних скриптів не потрібно оновлювати.

Is the task well-defined with a stable UI?
        │
        ├── YES → Does it run repeatedly at scale (CI/CD, regression)?
        │              │
        │              ├── YES → Use Playwright
        │              └── NO  → Either works; Playwright is cheaper
        │
        └── NO → Is the UI dynamic, unknown, or frequently changing?
                       │
                       ├── YES → Use MCP Agent / AI Browser
                       └── NO  → Does it require multi-step reasoning?
                                      │
                                      ├── YES → Use MCP Agent
                                      └── NO  → Use Playwright