Автоматизація на стероїдах: Як Playwright MCP та ШІ пишуть тести за вас

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Привіт! Сьогодні ми зануримося у світ майбутнього тестування і дізнаємося, як можна автоматизувати саму автоматизацію за допомогою інструмента Playwright MCP.

На порядку денному:

1. Що таке Playwright MCP і для яких завдань він підходить?
2. Як встановити його у ваш редактор коду (VS Code або Cursor).
3. Запуск першого простого тесту на реальному прикладі.
4. Інтеграція в робочий проєкт і написання нових тестів.
5. Погляд у майбутнє: що ще можна робити з цим інструментом?

Поїхали!

Що таке Playwright MCP?

Якщо говорити просто, Playwright MCP — це інструмент, що дозволяє керувати браузером за допомогою нейронних мереж та звичайних текстових команд. Ви пишете в чат, що потрібно зробити — наприклад, «відкрий такий-то сайт, натисни на кнопку, перевір текст», — а спеціальний ШІ-агент відкриває браузер і виконує всі ваші інструкції, надаючи в кінці звіт.

Де це може бути корисно?

• Автоматизація UI-перевірок: Швидке створення скриптів для рутинних перевірок.
• Створення автотестів: Генерація коду для Playwright на основі текстового опису.
• Пошук локаторів: Допомога у визначенні правильних селекторів для елементів на сторінці.
• Автоматичне дослідницьке тестування: Ви можете поставити агенту мету (наприклад, «знайди всі способи зламати форму реєстрації»), і він самостійно намагатиметься її досягти.
• Бізнес-сценарії: Будь-які завдання, що вимагають взаємодії з вебсайтами.

Підготовка до роботи

Для роботи нам знадобиться редактор коду VS Code або Cursor.

• Для VS Code: Обов’язковою є підписка на GitHub Copilot (бажано Pro-версія за $10/місяць). Безкоштовна версія має суттєві ліміти.
  • Лайфхак: Якщо ви студент, можете отримати Pro-підписку безкоштовно за програмою від Microsoft.
• Для Cursor: Цей редактор коштує $20/місяць, і має 20-денний пробний період, якого цілком вистачить для знайомства.

Встановлення та налаштування

Процес встановлення елементарний.

1. Перейдіть до офіційного GitHub-репозиторію Playwright MCP від Microsoft. github.com/microsoft/playwright-mcp
2. Знайдіть розділ «Getting Started».

Для Cursor:

• Натисніть кнопку «Add to Cursor», а потім «Open Cursor».

• У вікні MCP Tools натисніть Install навпроти Playwright MCP server. Готово!

Для VS Code:

1. Натисніть «Install Server» та відкрийте посилання у VS Code, підтвердьте встановлення.
2. Переконайтеся, що у вас встановлено розширення GitHub Copilot і ви увійшли у свій акаунт.
3. Відкрийте панель команд (Ctrl+Shift+P) і введіть MCP: List servers. Ви побачите, що playwright має статус stopped.
4. Запустіть його відповідною командою.

Практичний приклад № 1: Запускаємо простий тест

Давайте попросимо нашого ШІ-агента знайти на сайті Apple певну модель iPhone та перевірити її ціну.

Відкриваємо чат з Copilot у чистому проєкті та пишемо запит:

Що відбувається далі?

1. Агент запускає браузер і переходить на сайт Apple.
2. Він знаходить у меню розділ «iPhone» і переходить на сторінку «iPhone 17 Pro».
3. Агент розуміє, що ціни на сторінці немає, і сам натискає кнопку «Buy», щоб перейти до конфігуратора.
4. Далі він намагається обрати колір. З першого разу не виходить, але він не здається, пробує інший підхід і досягає успіху! Це демонструє його здатність до адаптації.
5. Він обирає пам’ять 512 ГБ.
6. Нарешті, він перевіряє ціну. Справжня ціна відрізняється від очікуваної ($1499). Агент фіксує це і виводить у консоль помилку з деталями: Price verification has failed. Expected price: 1499, actual price: 1599.

Практичний приклад № 2: Пишемо тести для існуючого проєкту

Тепер ускладнимо завдання. Візьмемо реальний проєкт (у відео це був onlytest.io — платформа для тестувальників) і попросимо агента написати тести для однієї зі сторінок.

Замість того, щоб давати йому готовий тест-кейс, ми попросимо його провести дослідницьке тестування.

Пишемо запит:

Агент починає роботу:

1. Відкриває потрібну сторінку в браузері.
2. Взаємодіє з усіма елементами: змінює параметри, генерує текст, копіює його. Тобто, він вивчає функціонал.
3. На основі свого дослідження він генерує три файли:
   • Page Object з локаторами елементів.
   • Файл з утилітами для генерації тестових даних.
   • Файл із 29 готовими автотестами.
4. Далі він запускає лінтер, знаходить 12 проблем у коді й самостійно їх виправляє.
5. Після цього він запускає всі написані тести. 10 з них падають.
6. Агент аналізує звіти про помилки і виправляє несправні тести.
7. Фінальний запуск показує, що всі 29 тестів успішно проходять!

Поки ми пили каву, ШІ-агент виконав роботу, яка могла б зайняти кілька годин у досвідченого автоматизатора.

Важливі поради

1. Безпека перш за все

Ніколи не пишіть логіни та паролі у чаті з ШІ! Ці дані можуть бути передані на зовнішні сервери. Замість цього використовуйте змінні оточення.

Створіть у корені проєкту файл .env:

А в запиті посилайтеся на них:

Так ваші дані залишаться в безпеці.

2. Якість коду

Згенерований код не завжди ідеальний. Щоб покращити його, створіть у проєкті текстовий файл з описом стандартів кодування (наприклад, «не використовувати жорстко закодовані локатори, виносити їх у Page Object») і просіть агента дотримуватися цих правил.

Що далі?

Це лише початок. У майбутньому ми зможемо побудувати повністю автоматизований процес:

1. ШІ генерує тест-кейси на основі вимог.
2. Інший ШІ-агент (як Playwright MCP) пише автотести за цими кейсами.
3. Система автоматично створює гілку в репозиторії, комітить код, запускає тести, створює Pull Request і надсилає його вам на рев’ю.

Це вже не наукова фантастика, а найближче майбутнє тестування.